zgldh/Scaffold

基于 Laravel 5.5， Vue 2， ElementUI 2， vueAdmin-template 制作的后台脚手架。

升级指南: https://github.com/zgldh/scaffold/blob/master/UPDATE.md

预制功能：

• 用户，角色，权限体系
• 文件上传
• 通知系统
• 操作记录
• 系统设置
• 完全脱离 Cookie/Session 机制。全面拥抱 JWT。自动刷新 Token
• 强化的前端数据表格，使用 datatables 协议。
• 多语言

路线图

• GraphQL 1.8
• Simplified role/permission 1.9
• D2Admin 2.0
• Laradock 3.0

开始使用

1. composer create-project zgldh/scaffold your-project-dir

2. 配置好 .env 数据库相关

3. php artisan scaffold:init

   会自动执行以下命令

   • migrate
   • storage:link
   • permission:auto-refresh
   • db:seed --class=ScaffoldInitialSeeder
   • lang:dump

4. 配置好 frontend/config/dev.env.js 的 BASE_API

5. npm install

6. npm run start

初始帐号密码： admin@email.com 123456

注意：某些虚拟机中 php artisan storage:link 命令可能会失效，请在宿主主机中执行该命令。

生成器

|名称|命令 |----|----| |模块初始化 | scaffold:module {moduleName} {--force} | |模型初始化 | scaffold:model {modelStarterClass} {--only=*} {--force} | |API 生成 | scaffold:api {method} {route} {moduleName} {--controller=} {--action=}| |权限生成|permission:auto-refresh {type=api : set guard name} |通知生成|notifications:create {moduleName} {notificationName} |语言文件导出|lang:dump|

模块初始化

scaffold:module {moduleName} {--force}

模块是指一个独立的功能领域。使用本命令将初始化一个模块。

Example

scaffold:module Post

将创建好如下目录和文件:

• Modules/Post
• Modules/Post/routes.php
• Modules/Post/PostServiceProvider.php
• frontend/src/store/modules/post.js

并自动修改好如下文件：

• config/api.php
• routes/api.php
• frontend/src/store/index.js

模型初始化

scaffold:model {modelStarterClass} {--only=*} {--force}

模型是指数据模型，对应着一个数据表。需要一个 Starter Class 来描述该模型。

使用本命令将初始化该模型的migration file, controller, model, request, repository, route, factory, PHP 单元测试和前端脚手架文件。基本的 CRUD 都准备好了。

如何编写 Starter Class 请参考源码: Modules\Post\PostStarter.php

--only 取值： controller, request, repository, model, migration, api, resource, language, route, factory, phpunit 将只生成对应文件。

Example

scaffold:model Modules/Post/PostStarter.php

将创建好如下目录和文件:

• Modules/Post
• Modules/Post/Controllers/PostController.php
• Modules/Post/Repositories/PostRepository.php
• Modules/Post/Models/Post.php
• Modules/Post/Requests/CreatePostRequest.php
• Modules/Post/Requests/UpdatePostRequest.php
• resources/lang/en/post.php
• resources/lang/zh-CN/post.php
• database/migrations/xxxx_xx_xx_xxxxxx_create_posts_table.php
• database/factories/PostFactory.php
• tests/Modules/Post
• tests/Modules/Post/Post/PostIndexTest.php
• tests/Modules/Post/Post/PostStoreTest.php
• tests/Modules/Post/Post/PostShowTest.php
• tests/Modules/Post/Post/PostUpdateTest.php
• tests/Modules/Post/Post/PostDestroyTest.php
• frontend/src/api/post.js
• frontend/src/views/post
• frontend/src/views/post/Post/List.vue
• frontend/src/views/post/Post/Editor.vue

并自动修改好如下文件：

• Modules/Post/routes.php
• frontend/src/router/dynamicRouterMap.js

并创建权限：

• Post@index
• Post@store
• Post@show
• Post@update
• Post@destroy

API 生成

scaffold:api {method} {route} {moduleName} {--controller=} {--action=}

方便的生成一个单独的 API 和周边的各种类、单元测试、前台接口等。

Example

scaffold:api put /post/{id}/like Post

将创建好如下目录和文件:

• Modules/Post/Requests/PutIdLikeRequest.php
• tests/Modules/Post/Post/PutIdLikeTest.php

并自动修改好如下文件：

• Modules/Post/Controllers/PostController.php
• Modules/Post/routes.php
• frontend/src/api/post.js

并创建权限：

• Post@putIdLike

权限生成

permission:auto-refresh {type=api : set guard name}

遍历 Modules 下所有的 controller 和 repository。 根据其公共函数生成一系列权限，并自动赋予超级管理员。

如果函数的注释内，包含有 @no-permission 标记，则跳过该函数。

Example

permission:auto-refresh

将自动修改对应 model 的语言文件的 permissions 数组，并创建一系列权限。

会自动跳过重复权限。

通知生成

notifications:create {moduleName} {notificationName}

创建一个 Notification 类，和 markdown 邮件模板。

Example

notifications:create post newPost

将创建好如下目录和文件:

• Modules/Post/Notifications/NewPost.php
• Modules/Post/resources/views/newPost.blade.php

并自动修改好语言文件，请记着调整后手动执行 lang:dump：

• resources/lang/*/notification.php

语言文件导出

lang:dump

将 PHP 语言文件导出为前端语言文件。使得前端 vue-i18n 组件也可使用。

导出产物储存在 frontend/src/lang/languages.js

组件说明

内置了一些常用组件。

数据表格 zgldh-datatables

改造自 ElementUI 的 table 组件。

参数：

参数名|类型|必填|默认值|说明 ------|---|----|----|--- source|[Array, Function]|true|null|数据源。通常定义为一个函数。后台请实现 datatables 协议 title|String|false|null|用于数据导出的文件标题 autoLoad|Boolean|false|true|是否初始化完毕就立即执行载入 columnSelection|Boolean|false|false| 暂时没用。 Show the column selection button enableSelection|Boolean|false|true| 允许选择行 enableAddressBar|Boolean|false|true| 允许在地址栏储存请求条件 actions|Array|false| [] | 行动作按钮。 [{Title: () => this.$i18n.t('global.terms.download'), Handle: this.handleDownload }, { Title: () => this.$i18n.t('global.terms.edit'), Handle: this.handleEdit }, { Title: () => this.$i18n.t('global.terms.delete'), Handle: this.handleDelete }, 150 // Optional, the actions column width in px, or '10em' in custom width. ] multipleActions|Array|false|[]| 表格顶部动作按钮。 filters|Array|false|[]| 高级过滤器的配置。 exportColumns|Object|false|null|导出文件的列配置。{ "name": this.$t('upload.fields.name'), "description": this.$t('upload.fields.description'), "disk": this.$t('upload.fields.disk'), "path": this.$t('upload.fields.path'), "size": this.$t('upload.fields.size'), "type": this.$t('upload.fields.type'), "created_at": this.$t('global.fields.created_at'),}

图标组件 auto-icon

用法|描述 ---|--- <auto-icon icon-class="eye" />|frontend\src\icons 里的图标 <auto-icon icon-class="fa-bell" />|https://fontawesome.com/icons 的图标 <auto-icon icon-class="el-icon-bell" />|http://element-cn.eleme.io/#/zh-CN/component/icon 的图标 <auto-icon icon-class="ion-md-notifications" />|https://ionicons.com 的图标

图片上传组件 image-uploader

改造自 ElementUI 的 el-upload 组件

用法|描述 ---|--- <image-uploader v-model="image" :multiple="false"></image-uploader>| 处理一个图片的上传 <image-uploader v-model="images" :multiple="true"></image-uploader>| 处理多个图片的上传 <image-uploader v-model="images" :multiple="true" :max="5"></image-uploader>| 处理多个图片的上传，最多5个

TODO

预制功能说明

1. 添加新的系统设置

   比如我们要设置一个 theme 项，默认值是 sunset。

   1. 在 Modules\Setting\Bundles\System 的 defaults函数内设置该项：

   public function defaults()
   {
       return [
           'site_name'         => '管理平台',
           'site_introduction' => '<b>各种介绍</b>',
           'default_language'  => 'zh-CN',
           'target_planets'    => [
               'earth',
               'mars'
           ],
           'theme'             => 'sunset' // 这是新增的设置项
       ];
   }
   

   2. 修改 frontend\src\views\Setting\index.vue 增加输入字段

       <form-item :label="name('system','theme')">
         <el-select
           v-model="settings.theme"
           value-key=""
           reserve-keyword>
           <el-option label="星空" value="star"/>
           <el-option label="夕阳" value="sunset"/>
         </el-select>
       </form-item>
   

   3. （可选）新增该配置项的语言配置 resources\lang\*\setting.php。然后 lang:dump 如：

   'bundles' => [
       'system' => [
           ...
           'theme'         => '主题',
           ...
       ]
   ]
   

2. 使系统设置生效

   初始化好以后，系统设置只会保存设置值，但目前版本不会有任何实际作用。请手工修改类 Modules\Setting\Bundles\System

   注意观察里面的 setSiteName 和 setDefaultLanguage 函数，他们是当设置项的值真正改变前的钩子函数。

   你可以在这里做任何额外操作，然后将最终的设置项的值返回即可。

3. 为某模型添加图片关联

   比如想为User模型添加images属性作为该用户的相册。

   首先在User模型添加关系：

   public function images()
   {
       return $this->morphMany(Upload::class, 'uploadable')->where('z_uploads.type', __FUNCTION__);
   }
   

   然后在frontend\src\views\user\Editor.vue添加images参数以及ImageUploader。

   data() {
     return {
       ...
       form: {
         id: null,
         ...
         images:[] // 新添加的参数
       }
     };
   }
   

   _with=images
   

   <image-uploader v-model="form.images" :multiple="true"></image-uploader>
   

常用操作

1. 添加一个前端页面
   1. 在 frontend/views 下创建该页面。 建议储存到合理的子文件夹下。
   2. 在 frontend\src\router\dynamicRouterMap.js 里添加路由。
   3. 注意路由的 meta.title 可以设置成函数来实现多语言。
2. ...

感谢

https://github.com/laravel/laravel

http://element-cn.eleme.io/

https://github.com/PanJiaChen/vueAdmin-template

http://webpack.github.io/