rock-admin v0.1.0

RockAdmin

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 是否显示logo
  • logo 项目 logo图片地址
  • navBarNotice 项目打开的消息提示
  • showPageJsonSchema 是否显示页面的配置
  • loginTips 登录页面提交表单的提示文字
  • sso 企业微信和钉钉的登录配置
  • axios

组件

VForm 表单组件

props

options默认值, 其他配置参见 element-plus/form

{
  inline: false, // 行模式
  labelPosition: 'right', 
  labelWidth: '100px',
  submitButton: { // false时则隐藏提交按钮
    show: true,
    type: 'primary',
    text: '提交'
  },
  cancelButton: { // false时则隐藏取消按钮
    show: true,
    type: 'info',
    text: '取消'
  }
}

formItems 表单控件配置

可查看 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

form event

表单布局

数据版本

VTable 表格组件

props

table event

VButton 按钮

props

event

VButtonGroup 按钮组

props

event

权限控制

/user/info 接口返回当前用户的resource,

/user/routes 接口返回系统可用资源

系统将在 src/store/modules/user.js line 174 行对可用资源做过滤, 仅保留当前用户有权限的资源列表.

接口协议

接口请求中会统一添加 header 头 Authorization, 值为当前用户 token

响应结构

// 正常情况
{
	code: 0
	payload: {}
}

// 错误情况
{
	code: 400, // 非零
	message: "错误信息"
}

响应码

类似项目

• 百度 amis
• 唯品会 ams