zgldh/scaffold

SPA administration system scaffold made with Laravel, VueJS, ElementUI, vueAdmin-template.

zgldh/Scaffold

基于 Laravel 5.5， Vue 2， ElementUI 2， vueAdmin-template 制作的后台脚手架。, _(*1)

升级指南: https://github.com/zgldh/scaffold/blob/master/UPDATE.md, _(*2)

预制功能：

• 用户，角色，权限体系
• 文件上传
• 通知系统
• 操作记录
• 系统设置
• 完全脱离 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, _(*3)

   会自动执行以下命令, _(*4)

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

1. 配置好 frontend/config/dev.env.js 的 BASE_API
2. npm install
3. npm run start

初始帐号密码： admin@email.com 123456, _(*5)

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

生成器

模块初始化

scaffold:module {moduleName} {--force}, _(*7)

模块是指一个独立的功能领域。使用本命令将初始化一个模块。, _(*8)

Example, _(*9)

scaffold:module Post, _(*10)

将创建好如下目录和文件:, _(*11)

• Modules/Post
• Modules/Post/routes.php
• Modules/Post/PostServiceProvider.php

• frontend/src/store/modules/post.js, _(*12)

  并自动修改好如下文件：, _(*13)

• config/api.php, _(*14)

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

模型初始化

scaffold:model {modelStarterClass} {--only=*} {--force}, _(*15)

模型是指数据模型，对应着一个数据表。需要一个 Starter Class 来描述该模型。, _(*16)

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

如何编写 Starter Class 请参考源码: Modules\Post\PostStarter.php, _(*18)

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

Example, _(*20)

scaffold:model Modules/Post/PostStarter.php, _(*21)

将创建好如下目录和文件:, _(*22)

• 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, _(*23)

  并自动修改好如下文件：, _(*24)

• Modules/Post/routes.php, _(*25)

• frontend/src/router/dynamicRouterMap.js, _(*26)

  并创建权限：, _(*27)

• Post@index, _(*28)

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

API 生成

scaffold:api {method} {route} {moduleName} {--controller=} {--action=}, _(*29)

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

Example, _(*31)

scaffold:api put /post/{id}/like Post, _(*32)

将创建好如下目录和文件:, _(*33)

• Modules/Post/Requests/PutIdLikeRequest.php

• tests/Modules/Post/Post/PutIdLikeTest.php, _(*34)

  并自动修改好如下文件：, _(*35)

• Modules/Post/Controllers/PostController.php, _(*36)

• Modules/Post/routes.php

• frontend/src/api/post.js, _(*37)

  并创建权限：, _(*38)

• Post@putIdLike, _(*39)

权限生成

permission:auto-refresh {type=api : set guard name}, _(*40)

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

如果函数的注释内，包含有 @no-permission 标记，则跳过该函数。, _(*42)

Example, _(*43)

permission:auto-refresh, _(*44)

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

会自动跳过重复权限。, _(*46)

通知生成

notifications:create {moduleName} {notificationName}, _(*47)

创建一个 Notification 类，和 markdown 邮件模板。, _(*48)

Example, _(*49)

notifications:create post newPost, _(*50)

将创建好如下目录和文件:, _(*51)

• Modules/Post/Notifications/NewPost.php

• Modules/Post/resources/views/newPost.blade.php, _(*52)

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

• resources/lang/*/notification.php, _(*54)

语言文件导出

lang:dump, _(*55)

将 PHP 语言文件导出为前端语言文件。使得前端 vue-i18n 组件也可使用。, _(*56)

导出产物储存在 frontend/src/lang/languages.js, _(*57)

组件说明

内置了一些常用组件。, _(*58)

数据表格 zgldh-datatables

改造自 ElementUI 的 table 组件。, _(*59)

参数：, _(*60)

 [{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|导出文件的列配置。, _(*61)

{
  "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

图片上传组件 image-uploader

改造自 ElementUI 的 el-upload 组件, _(*62)

TODO, _(*63)

预制功能说明

1. 添加新的系统设置, _(*64)

   比如我们要设置一个 theme 项，默认值是 sunset。, _(*65)

   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' // 这是新增的设置项
       ];
   }
   

   1. 修改 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>
   

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

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

2. 使系统设置生效, _(*66)

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

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

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

3. 为某模型添加图片关联, _(*70)

   比如想为User模型添加images属性作为该用户的相册。, _(*71)

   首先在User模型添加关系：, _(*72)

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

   然后在frontend\src\views\user\Editor.vue添加images参数以及ImageUploader。, _(*73)

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

   _with=images, _(*74)

   <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, _(*75)

http://element-cn.eleme.io/, _(*76)

https://github.com/PanJiaChen/vueAdmin-template, _(*77)

http://webpack.github.io/, _(*78)