moell/mojito - 基於 Laravel、Vue、ELement 構建的基礎後臺系統擴充套件

moell發表於2018-10-09
LaravelVue套件

Mojito 是一個基於 Laravel, Vue, Element構建的後臺管理系統。

截圖

獲取地址

https://github.com/moell-peng/mojito 歡迎使用和star

特徵

  • 可快速衍生多個後臺系統
  • 內建角色，許可權，使用者，選單管理
  • OAuth 2.0，並支援多表鑑權
  • 完善的PHPUnit測試
  • API 許可權精確至路由，頁面許可權精取到按鈕或連結
  • 前後端分離
  • 多標籤頁
  • 前端支援多語言配置
  • 簡潔的佈局

Demo

url: http://mojito.moell.cn/mojito#/admin/login
username: mojito@gmail.com
password: mojito-demo

要求

  • Laravel >= 5.5.0
  • Vue >= 2.5.17
  • Element >= 2.4.6

相容性

Laravel Mojito
5.5, 5.6 1.0.*
5.7 1.1.*

安裝

首先安裝laravel,並且確保你配置了正確的資料庫連線。

composer require moell/mojito

然後執行下面的命令來發布資源:

php artisan mojito:install

命令執行成功會生成配置檔案，資料遷移和構建SPA的檔案。

在config/auth.php中新增相應的 guards 和 providers，如下： 

'guards' => [
        ...
        'admin' => [
            'driver' => 'passport',
            'provider' => 'admin'
        ]
    ],

'providers' => [
        ...
        'admin' => [
            'driver' => 'eloquent',
            'model' => \Moell\Mojito\Models\AdminUser::class,
        ]
    ],

在 app/Http/Kernel.php 中 $routeMiddleware 屬性新增路由中間 oauth.providers 和 mojito.permission，並將auth中介軟體替換為如下：

class Kernel extends HttpKernel
{
    protected $routeMiddleware = [
        // 'auth' => \Illuminate\Auth\Middleware\Authenticate::class,
        'auth' => \SMartins\PassportMultiauth\Http\Middleware\MultiAuthenticate::class,
        'oauth.providers' => \SMartins\PassportMultiauth\Http\Middleware\AddCustomProvider::class,
        'mojito.permission' => \Moell\Mojito\Http\Middleware\Authenticate::class,
    ];
}

執行資料遷移，資料填充

php artisan migrate

php artisan db:seed --class="Moell\Mojito\Database\MojitoTableSeeder"

Passport 安裝和配置

php artisan passport:install

執行成功後獲取到相應的密碼授予客戶端的 ID 和 secret 並且配置到相對應的 resources/config/index.js :

export default {
  admin: {
    authorize: {
      clientId: ID,
      clientSecret: secret
    }
}

安裝 Javscript 依賴

npm install
npm install -D vuex@^3.0.1 vue-router@^3.0.1 vue-i18n@^8.1.0 localforage@^1.7.2 element-ui@^2.4.6

將 admin.js 新增到 webpack.mix.js 

mix.js('resources/assets/js/app.js', 'public/js')
    .sass('resources/assets/sass/app.scss', 'public/css')
    //.js('resources/js/admin.js', 'public/js') laravel5.7+
    .js('resources/assets/js/admin.js', 'public/js')

執行 Mix

#npm run watch
npm run production

登入

url: http://localhost/mojito#/admin/login

email: admin@gmail.com

password: secret

依賴開源軟體

  • Laravel
  • Vue
  • Element UI
  • laravel/passport
  • smartins/passport-multiauth
  • spatie/laravel-permission
  • orchestra/testbench

License

Apache License Version 2.0 see http://www.apache.org/licenses/LICENSE-2.0...

本作品採用《CC 協議》，轉載必須註明作者和本文連結

相關文章