zgldh/scaffold

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

Maintainers

Details

github.com/zgldh/scaffold

Source

Issues

Installs: 401

Dependents: 3

Suggesters: 0

Security: 0

Stars: 50

Watchers: 6

Forks: 14

Open Issues: 2

Type:project

v1.7.8 2019-11-20 05:00 UTC

Requires

Requires (Dev)

MIT a8bc2db7441a39e254d7b033b01bb8ee030a1497

frameworkscaffoldlaravelSPA

This package is auto-updated.

Last update: 2024-08-28 09:32:43 UTC

README

基于 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}

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

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 组件。

参数：

图标组件 auto-icon

图片上传组件 image-uploader

改造自 ElementUI 的 el-upload 组件

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' // 这是新增的设置项
    ];
}
    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. 使系统设置生效

    初始化好以后，系统设置只会保存设置值，但目前版本不会有任何实际作用。请手工修改类 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/