Scaffold php,scaffold: 基于 Laravel 5.5, Vue 2, ElementUI 2, vueAdmin-template 制作的后台脚手架...

郎曜文
2023-12-01

zgldh/Scaffold

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

预制功能:

用户,角色,权限体系

文件上传

通知系统

操作记录

系统设置

完全脱离 Cookie/Session 机制。全面拥抱 JWT。自动刷新 Token

强化的前端数据表格,使用 datatables 协议。

多语言

路线图

GraphQL 1.8

Simplified role/permission 1.9

D2Admin 2.0

Laradock 3.0

开始使用

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

配置好 .env 数据库相关

php artisan scaffold:init

会自动执行以下命令

migrate

storage:link

permission:auto-refresh

db:seed --class=ScaffoldInitialSeeder

lang:dump

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

npm install

npm run start

注意:某些虚拟机中 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

用法

描述

frontend\src\icons 里的图标

图片上传组件 image-uploader

改造自 ElementUI 的 el-upload 组件

用法

描述

处理一个图片的上传

处理多个图片的上传

处理多个图片的上传,最多5个

TODO

预制功能说明

添加新的系统设置

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

在 Modules\Setting\Bundles\System 的 defaults函数内设置该项:

public function defaults()

{

return [

'site_name' => '管理平台',

'site_introduction' => '各种介绍',

'default_language' => 'zh-CN',

'target_planets' => [

'earth',

'mars'

],

'theme' => 'sunset' // 这是新增的设置项

];

}

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

v-model="settings.theme"

value-key=""

reserve-keyword>

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

'bundles' => [

'system' => [

...

'theme' => '主题',

...

]

]

使系统设置生效

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

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

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

为某模型添加图片关联

比如想为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

常用操作

添加一个前端页面

在 frontend/views 下创建该页面。 建议储存到合理的子文件夹下。

在 frontend\src\router\dynamicRouterMap.js 里添加路由。

注意路由的 meta.title 可以设置成函数来实现多语言。

...

感谢

 类似资料: