From a3828b2d1456ab60e1dc197c6229a0bc324b697a Mon Sep 17 00:00:00 2001 From: tianjiaxing Date: Thu, 22 Oct 2020 23:40:15 +0800 Subject: [PATCH] doc: admin.md 1.0.2 update --- docs/uniCloud/admin.md | 128 ++++++++++++++++++++++++++++++----------- 1 file changed, 95 insertions(+), 33 deletions(-) diff --git a/docs/uniCloud/admin.md b/docs/uniCloud/admin.md index 9d16012d3..2942e96ea 100644 --- a/docs/uniCloud/admin.md +++ b/docs/uniCloud/admin.md @@ -1,19 +1,19 @@ -# uniCloud Admin +# uniCloud admin 基础框架 ### 什么是uniCloud Admin -uniCloud Admin，是基于uni-app和uniCloud的应用后台管理框架。 +uniCloud admin 基础框架，是基于uni-app和uniCloud的应用后台管理框架。HBuilder X 2.9.5+ 支持，请更新到最新版本使用。 - 它使用uni-app的宽屏适配，可自动适配PC宽屏和手机各端。了解[宽屏适配](https://uniapp.dcloud.io/adapt) - 它基于uniCloud，是serverless的云开发。了解[uniCloud](https://uniapp.dcloud.io/uniCloud/README) -- 它基于uni-id，是uniCloud之上的用户账户、权限系统。了解[uni-id](https://uniapp.dcloud.io/uniCloud/uni-id) +- 它基于uni-id，admin 框架使用的是 uni-id 的用户账户、权限系统。了解[uni-id](https://uniapp.dcloud.io/uniCloud/uni-id) > 它只是一个框架，具体业务需要开发者自己开发或从插件市场导入相关插件 ### uniCloud Admin内置的功能包括： - 管理员账户初始化、登录、修改密码 -- 顶部topWindow的设置：比如logo更换、右上角部分连接更换。详见项目根目录的`admin.config.js`文件 +- 顶部topWindow的设置：比如logo更换、右上角部分链接更换。详见项目根目录的`admin.config.js`文件 - 左侧leftWindow的菜单设置：菜单包括两类，一类是动态菜单，具备业务和权限功能，在数据库的`opendb-admin-menu`表中增加删除菜单；另一类是静态菜单，不会根据登录用户角色变化，在项目根目录的`admin.config.js`文件中配置 - 开发模式下的 debug 功能，帮助开发者及时发现报错和搜索错误信息，可在`admin.config.js`文件中配置 @@ -24,7 +24,7 @@ uniCloud Admin，是基于uni-app和uniCloud的应用后台管理框架。
-

PC端

+

PC端

@@ -38,7 +38,7 @@ uniCloud Admin，是基于uni-app和uniCloud的应用后台管理框架。 #### 创建 -[HBuilderX](https://www.dcloud.io/hbuilderx.html) 2.9.5+版本新建 uni-app 项目，选择 uniCloud admin 项目模板，如下图，HBuilderX 2.9+可以从插件市场的[uniCloud admin 链接]()获取 +[HBuilderX](https://www.dcloud.io/hbuilderx.html) 2.9.5+版本新建 uni-app 项目，选择 uniCloud admin 项目模板，如下图 ![download-admin](https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/d5fdccf0-11f2-11eb-b244-a9f5e5565f30.png) @@ -60,10 +60,6 @@ uniCloud Admin，是基于uni-app和uniCloud的应用后台管理框架。 ├── common │ └── uni.css # 公共样式 ├── components # 自定义组件 -│ └── common # 自定义组件共用逻辑 -│ └── sidebar-item # 侧边栏菜单组成元素， -│ └── password # 修改密码组件 -│ └── error # 开发模式下的 debug 错误列表组件 ├── js_sdk # js sdk ├── pages # 页面 │ │── index # 首页 @@ -82,6 +78,15 @@ uniCloud Admin，是基于uni-app和uniCloud的应用后台管理框架。 └── uni.scss ``` +### 登录后跳转配置 + +1. 通过 [admin.config.js](https://github.com/dcloudio/uni-template-admin/blob/master/admin.config.js) 登录后跳转地址的配置 + +```js +export default { + launch_path: '/pages/index/index', // 登录后跳转至的页面地址（若配置为空，则自动跳转至左侧菜单第一个页面） +}; + ### 顶部窗口（导航栏） 1. 通过 [admin.config.js](https://github.com/dcloudio/uni-template-admin/blob/master/admin.config.js) 配置导航栏内容 @@ -113,26 +118,23 @@ $top-window-text-color: #999; /* 文字颜色 */ ### 左侧窗口（菜单栏） -1. 通过 [admin.config.js](https://github.com/dcloudio/uni-template-admin/blob/master/admin.config.js) 配置侧边栏内容，侧边栏的菜单包括根据用户角色动态显示的动态菜单，和所有用户都能看到静态菜单。 +#### 静态菜单和动态菜单 + +- 菜单包括两类，一类是动态菜单，具备业务和权限功能 + > 动态菜单的逻辑: 用户登录时，会根据用户的*角色*去查找其拥有的*权限*，在根据*权限*去查找对应的*菜单* +- 另一类是静态菜单，不会根据登录用户角色变化 -*菜单的属性* +#### 管理静态菜单 -| 字段 | 类型 | 必填 | 描述 | -|:-|:-|:-|:-| -| \_id | Object ID | 是 | Id保持唯一 | -| name | String | 是 | 菜单文字 | -| icon | String | 否 | 菜单图标 | -| url | String | 否 | 菜单对应的页面链接（只有没有子菜单的菜单项可以配置） | -| children | Array | 否 | 子菜单，重复它的父菜单的数据结构 | +通过 [admin.config.js](https://github.com/dcloudio/uni-template-admin/blob/master/admin.config.js) 配置侧边栏内容，所有用户都能看到静态菜单。 -静态菜单 secondaryMenus 配置如下： ```js export default { // 侧边栏 sideBar: { // 配置静态菜单列表（放置在用户被授权的菜单列表下边） - secondaryMenus: [{ + staticMenu: [{ _id: 'demo', name: '系统设置', icon: 'el-icon-menu', @@ -140,14 +142,6 @@ export default { _id: 'table', name: '用户', url: '/pages/demo/table/table' - },{ - _id: 'table', - name: '角色', - url: '/pages/demo/table/table' - },{ - _id: 'table', - name: '权限', - url: '/pages/demo/table/table' }] }, { _id: 'app', @@ -163,7 +157,61 @@ export default { }; ``` -2. 通过 [uni.scss](https://github.com/dcloudio/uni-template-admin/blob/master/uni.scss) 配置侧边栏样式 +#### 管理动态菜单 + +在云后台数据库的 `opendb-admin-menu` 表中管理菜单， 对菜单增删改查。如下图： + +![add-menu](https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/85da1640-147a-11eb-899d-733ae62bed2f.png) + +增加如下菜单：例如 + +```bash +订单管理 （_id: order） # 父菜单 +└── 食物 （_id: food） # 子菜单 +``` + +1. 添加父菜单 + +菜单的 `parent_id` 字段为空, 即为一级菜单 + +> tips: 如无子菜单，或子菜单`url` 字段为空，则不能在页面显示 + + +```json +{ + "_id": "order", + "name": "订单管理", + "icon": "", + "url": "", + "sort": 1000, + "parent_id": "", + "permission": [], + "status": 1 +} +``` + +2. 添加子菜单 + +将子菜单的 `parent_id` 指向父菜单的 `_id`即可，孙菜单就是将子菜单的 `_id` 当做父菜单 + +> tips: 子菜单下没有子孙菜单，必须配置 `url` 字段，否则不能在页面显示 + +```json +{ + "_id": "phone", + "name": "手机", + "icon": "", + "url": "/phone", + "sort": 1001, + "parent_id": "order", + "permission": [], + "status": 1 +} +``` + +#### 侧边栏样式管理 + +通过 [uni.scss](https://github.com/dcloudio/uni-template-admin/blob/master/uni.scss) 配置侧边栏样式 > 调整菜单颜色时，只需设置菜单背景色 ``$menu-bg-color``，自行搭配文字前景色即可 @@ -208,9 +256,7 @@ $menu-text-color-actived: #409eff; /* 菜单激活前景色 */ > [详情](https://uniapp.dcloud.io/uniCloud/uni-id?id=%e7%94%a8%e6%88%b7%e8%a1%a8) 5. 验证码表 `uni-verify` > [详情](https://uniapp.dcloud.io/uniCloud/uni-id?id=%e7%94%a8%e6%88%b7%e8%a1%a8) -6. 存储表（系统使用，开发不需要修改） `opendb-admin-storage` - -7. 权限验证 +6. 权限验证 ```html