rock-admin
是基于 Vue3
, element-plus
, vue-admin-template
的配置化后台构建工具, 核心概念是配置化渲染, 页面根据后端下发的 PageSchema
自动渲染, 辅助可视化PageSchema
构造工具, 使常见的后台页面可以无代码实现.
打造一套完整的低代码后台构建工具集, 包含前端和后端的完整链路, 通过可视化搭建, 即可实现常见的后台功能.
也可本地启动示例项目
git clone https://github.com/daodao97/rock-admin.git
cd rock-admin/exmaple
yarn
yarn serve
-
Golang + RockAdmin go-rock-amdin
-
PHP(hyperf) + RockAdmin hyperf-admin
使用本项目提供的模板快速创建本地项目
vue create --preset daodao97/rock-admin my-admin
cd my-admin
yarn serve
此时即可得到一个完整功能的后台了
运行机制
默认配置可见 src/options
{
ElementPlus: {
size: 'small',
zIndex: 3000,
locale: locale
},
nav: [],
routes: [],
globalComps: [],
mock: { enable: false, apis: [], baseURI: '', defaultMockApi: true },
use: [],
config: {
title: 'RockAdmin',
fixedHeader: false,
sidebarLogo: true,
logo: 'https://wpimg.wallstcn.com/69a1c46c-eb1c-4b46-8bd4-e9e686ef5251.png',
closeNavNotice: false,
navBarNotice: '顶部消息提示',
hasNewMessage: true,
showPageJsonSchema: true,
loginTips: '登录信息提示',
sso: [],
axios: {
baseURL: '/api'
}
}
}
ElementPlus
为element-plus
默认配置, 文档nav
为 页面顶部导航按钮,routes
为 本地vue-router
路由globalComps
为 注册到全局的组件mock
为api
模拟数据配置enable
是否启用mock
apis
需要注入的本地模拟接口defaultMockApi
是否启动底层的模拟接口
use
底层为app.use
config
为站点配置title
站点名称fixedHeader
顶部导航栏装态sidebarLogo
是否显示logologo
项目 logo图片地址navBarNotice
项目打开的消息提示showPageJsonSchema
是否显示页面的配置loginTips
登录页面提交表单的提示文字sso
企业微信和钉钉的登录配置axios
参数 | 说明 | 类型 | 默认值 | 可选值 |
---|---|---|---|---|
modelValue | 表单各字段默认值 | Object | {} | |
formItems | 表单字段配置, 具体见下方 | Array | [] | |
infoApi | 表单schema拉取接口, 不为空是将覆盖本地属性 | String | 空字符串 | |
saveApi | 表单保存接口 | String | 空 | |
options | 表单配置 | Object | 见下方 | |
afterSubmit | 表单提交后动作 | String | 空 | goback/reload |
afterReset | 变动取消按钮点击后动作 | String | 空 | goback/reload |
options默认值, 其他配置参见 element-plus/form
{
inline: false, // 行模式
labelPosition: 'right',
labelWidth: '100px',
submitButton: { // false时则隐藏提交按钮
show: true,
type: 'primary',
text: '提交'
},
cancelButton: { // false时则隐藏取消按钮
show: true,
type: 'info',
text: '取消'
}
}
可查看 example 完整样例,
表单控件各项配置说明
[
{
type: "input", // 字段类型
field: "field_name", // 字段名
label: "展示名",
value: "", // 字段值, 默认undefind
info: "表单控件提示信息", // 支持html
rules: [], // 字段校验规则
props: {}, // element-plush 组件原生的属性, 如 https://element-plus.gitee.io/#/input-attributes
options: [], // select/radio/checkbox 等组件的备选项
col: { span: 12 }, // 控件布局
section: "" // 表单分片
}
]
- input
- number
- number-range
- select
- radio
- checkbox
- image
- upload
- witch
- icon-select
- date
- datetime
- sub-form
- cascader
- cascader-panel
- codemirror
- slider
- transfer
- color
- rate
事件名 | 说明 | 回调参数 |
---|---|---|
submit | 表单提交事件 | formData |
reset | 表单取消事件 | |
fieldchange | 字段变动事件 | function(field, value) |
update:modelValue | 更新事件 | formData |
mounted | 组件挂载 |
参数 | 说明 | 类型 | 默认值 | 可选值 |
---|---|---|---|---|
filter | 表单过滤项, 同formItems | Array | [] | |
headers | 表头 | Array | [] | |
list | 默认列表数据 | Array | [] | |
listApi | 列表数据拉取接口 | String | 空 | |
infoApi | 组件属性拉取接口 | String | 空 | |
batchButton | 批量操作按钮 | Array | [] | |
normalButton | 表单操作按钮 | Array | [] | |
rowButton | 行操作按钮 | Array | [] | |
showPagination | 是否显示分页组件 | Boolen | true | |
selectedNotice | 批量选中时的提示文案 | String/Object | 空 | |
listIncrease | 编辑模式, 新增行按钮 | Boolen/Object | false | |
tableProps | ElementPlus 表格原始属性 文档 | Object | { "border":true, "stripe":true, "size":"mini", "rowKey":"id", "lazy":true, "defaultExpandAll":false } |
事件名 | 说明 | 回调参数 |
---|---|---|
cell-change | 行变动事件 | {index, field, value} |
参数 | 说明 | 类型 | 默认值 | 可选值 |
---|---|---|---|---|
text | 按钮文案 | String | 空 | |
tips | 提示文案, 按钮形式是可用 | String | 空 | |
type | 按钮类型, 可为 页面跳转/接口请求/表单/列表 | String | 空 | jump/api/form/list |
target | 目标, 可为 vue-router/path , url, api | String | 空 | |
api | type为api时, 如 {method: 'POST', url: '/test_api’} | Object | {} | |
form | type为form时可用, 表单属性 | Object | {} | |
table | type为list时可用, 列表属性 | Object | {} |
事件名 | 说明 | 回调参数 |
---|---|---|
click | 点击事件 | function(bnt) |
action | api请求成功事件 | function(payload) |
参数 | 说明 | 类型 | 默认值 | 可选值 |
---|---|---|---|---|
type | 展示类型 | String | button | button/link |
buttons | 按钮配置 | Array | [] |
事件名 | 说明 | 回调参数 |
---|---|---|
click | 点击事件 | function(bnt) |
action | api请求成功事件 | function(payload) |
/user/info
接口返回当前用户的resource
,
/user/routes
接口返回系统可用资源
系统将在 src/store/modules/user.js line 174
行对可用资源做过滤, 仅保留当前用户有权限的资源列表.
接口请求中会统一添加 header 头 Authorization
, 值为当前用户 token
响应结构
// 正常情况
{
code: 0
payload: {}
}
// 错误情况
{
code: 400, // 非零
message: "错误信息"
}
- 百度 amis
- 唯品会 [ams](