Skip to content

U
uni-app

DCloud / uni-app
4 个月 前同步成功

通知 730
Star 38706
Fork 3642
U
uni-app
提交 c20fc3b9 编写于 作者: inkwalk's avatar inkwalk
浏览文件
操作

doc: add how to dev a admin plugin

上级 c229c31e
隐藏空白更改
内联 并排
Showing with 117 addition and 33 deletion
docs/uniCloud/admin.md
浏览文件 @ c20fc3b9
......@@ -44,15 +44,15 @@ PC 端如下图：
#### 运行
1. 进入 admin 项目
2. 在/cloudfunctions-aliyun/common/uni-id/config.json 文件中填写 `passwordSecret` 字段 (用于加密密码入库的密钥) 和 `tokenSecret` 字段 (为生成token需要的密钥)
2. 在/cloudfunctions-aliyun/common/uni-id/config.json 文件中填写 `passwordSecret` 字段 (用于加密密码入库的密钥) 和 `tokenSecret` 字段 (为生成 token 需要的密钥)
3. 右键 cloudfuntions 运行云服务空间初始化向导（如已创建并绑定云服务空间，则跳过此步）
4. 点击工具栏的运行 -> 运行到浏览器
5. 登录页面底部进入创建管理员页面（仅允许注册一次管理员账号）
__注意__：
**注意**：
- 在 HBuilderX 中运行需在插件市场在安装 [sass插件](https://ext.dcloud.net.cn/plugin?id=2046)
- 手机端报 ``request：fail``，需要去云服务空间的``跨域配置``配置跨域域名，需带端口
- 在 HBuilderX 中运行需在插件市场在安装 [sass 插件](https://ext.dcloud.net.cn/plugin?id=2046)
- 手机端报 `request：fail`，需要去云服务空间的`跨域配置`配置跨域域名，需带端口
### 目录结构
......@@ -83,7 +83,7 @@ __注意__：
### 登录页
首次使用，可以通过登录页面底部链接创建一个超级管理员（仅允许创建一次），该接口会判断系统里如果有admin角色的用户,就不再允许添加新的超级管理员。
首次使用，可以通过登录页面底部链接创建一个超级管理员（仅允许创建一次），该接口会判断系统里如果有 admin 角色的用户,就不再允许添加新的超级管理员。
> 注意：注册完毕后，建议从登录页面移除该链接
......@@ -97,7 +97,7 @@ __注意__：
#### 顶部窗口（导航栏）
顶部窗口默认在左侧展示系统Logo、右侧显示导航链接，效果如上图。展示内容可通过项目根目录下的`admin.config.js`文件进行配置，如下为示例：
顶部窗口默认在左侧展示系统 Logo、右侧显示导航链接，效果如上图。展示内容可通过项目根目录下的`admin.config.js`文件进行配置，如下为示例：
```js
# admin.config.js
......@@ -117,11 +117,11 @@ export default {
},
};
```
顶部导航栏的样式，可通过项目根目录下的`uni.scss`进行自定义，如下：
```css
# uni.scss
$top-window-bg-color: #fff; /* 背景色 */
#uni.scss $top-window-bg-color: #fff; /* 背景色 */
$top-window-text-color: #999; /* 文字颜色 */
```
......@@ -152,17 +152,17 @@ export default {
{
menu_id: "icons",
name: "图标",
url: "/pages/demo/icons/icons",
url: "/pages/demo/icons/icons"
},
{
menu_id: "table",
name: "表格",
url: "/pages/demo/table/table",
url: "/pages/demo/table/table"
}
]
},
],
},
}
]
}
};
```
......@@ -176,14 +176,14 @@ _菜单字段解释:_
| 字段 | 类型 | 必填 | 描述 |
| :---------- | :-------- | :--- | :--------------------------------------------------- |
| menu_id | Object ID | 是 | 菜单 Id |
| menu_id | Object ID | 是 | 菜单 Id |
| name | String | 是 | 菜单文字 |
| icon | String | 否 | 菜单图标 |
| url | String | 否 | 菜单对应的页面链接（只有没有子菜单的菜单项可以配置） |
| sort | Integer | 否 | 在同级菜单中的排序，数组越大越靠后 |
| parent_id | String | 否 | 父级菜单 Id |
| permission | Array | 否 | 菜单权限（只有没有子菜单的菜单项可以配置） |
| enable | Boolean | 是 | 菜单状态：false 禁用 true 启用 |
| enable | Boolean | 是 | 菜单状态：false 禁用 true 启用 |
| create_date | Timestamp | 是 | 创建时间 |
_添加菜单记录需要注意：_
......@@ -257,13 +257,13 @@ $menu-text-color-actived: #409eff; /* 菜单激活前景色 */
### icon 图标
admin 框架内置了一套icon图标，在静态功能演示-图标菜单中，点击图标即可复制图标的class定义，或者直接到`common/uni-icons.css`中查看定义，然后以如下方式使用：
admin 框架内置了一套 icon 图标，在静态功能演示-图标菜单中，点击图标即可复制图标的 class 定义，或者直接到`common/uni-icons.css`中查看定义，然后以如下方式使用：
```
<view class="uni-icons-gear"></view>
```
当然，你也可以使用三方icon库。以使用 `elementUI` 的图标为例，在 `app.vue` 中导入图标库的样式文件：
当然，你也可以使用三方 icon 库。以使用 `elementUI` 的图标为例，在 `app.vue` 中导入图标库的样式文件：
```javascript
<style>
......@@ -273,6 +273,7 @@ admin 框架内置了一套icon图标，在静态功能演示-图标菜单中，
```
在标签上使用图标的 class 名称，即：
```
<view class="el-icon-s-tools"></view>
```
......@@ -281,21 +282,21 @@ admin 框架内置了一套icon图标，在静态功能演示-图标菜单中，
uniCloud admin 框架基于 uni-id，复用 uni-id 的用户、角色、权限系统，详见[uni-id](https://uniapp.dcloud.io/uniCloud/uni-id)。
需要注意的是，admin框架的动态菜单同样依赖uni-id的权限表（uni-id-permissions）。
需要注意的是，admin 框架的动态菜单同样依赖 uni-id 的权限表（uni-id-permissions）。
菜单表(opendb-admin-menus)定义如下：
| 字段 | 类型 | 必填 | 描述 |
| :--------- | :-------- | :--- | :--------------------------------------------------- |
| menu_id | Object ID | 是 | 菜单 Id |
| name | String | 是 | 菜单文字 |
| icon | String | 否 | 菜单图标 |
| url | String | 否 | 菜单对应的页面链接（只有没有子菜单的菜单项可以配置） |
| sort | Integer | 否 | 在同级菜单中的排序，数组越大越靠后 |
| parent_id | String | 否 | 父级菜单 Id |
| permission | Array | 否 | 菜单权限（只有没有子菜单的菜单项可以配置） |
| enable | Boolean | 是 | 菜单状态：false 禁用 true 启用 |
| create_date | Timestamp | 是 | 创建时间 |
| 字段 | 类型 | 必填 | 描述 |
| :---------- | :-------- | :--- | :--------------------------------------------------- |
| menu_id | Object ID | 是 | 菜单 Id |
| name | String | 是 | 菜单文字 |
| icon | String | 否 | 菜单图标 |
| url | String | 否 | 菜单对应的页面链接（只有没有子菜单的菜单项可以配置） |
| sort | Integer | 否 | 在同级菜单中的排序，数组越大越靠后 |
| parent_id | String | 否 | 父级菜单 Id |
| permission | Array | 否 | 菜单权限（只有没有子菜单的菜单项可以配置） |
| enable | Boolean | 是 | 菜单状态：false 禁用 true 启用 |
| create_date | Timestamp | 是 | 创建时间 |
admin 提供了两个内置方法，方便在页面中鉴定登录用户权限和角色:
......@@ -333,21 +334,104 @@ admin 中开发页面，和 uni-app 开发 vue 页面是一致的。
#### 从插件市场下载插件，并注册到 admin 菜单
以[uniCloud admin 管理项目-权限管理插件](https://ext.dcloud.net.cn/plugin?id=3269)为例
_使用步骤:_
1. 从[插件市场](https://ext.dcloud.net.cn/)导入插件
2. 在 HBuilder X 2.9.5 中选择添加插件的项目
3. 覆盖项目的 db_init.json 文件, 点击“确定覆盖”
4. 在 db_init.json 文件上右键，点击“初始化云数据库”
5. 刷新 admin 即可在菜单栏看到新增的菜单
5. 在菜单管理中的添加【待添加菜单】
6. 刷新 admin 即可在菜单栏看到新增的菜单
---------------------------------- 分割线 ----------------------------------------
### 插件开发
我们不仅是插件的使用者，也可以是插件的开发者，那么如何开发一款插件呢？参考 [DCloud 插件开发指南汇总](https://ask.dcloud.net.cn/article/35408) 及其中的 `admin 插件`部分.
我们不仅是插件的使用者，也可以是插件的开发者，那么如何开发一款插件呢？
对于 admin 插件来说，可以项目中开发完成功能，再将这项功能剥离成一个插件。其他开发者使用插件的过程，就是将插件还原成项目中的一项功能。
admin 插件包含云函数、前端页面、pages.json，它必须基于 uni-id 的账户和权限体系，它不限制云函数的开发方式，可以自己写普通云函数、可以用任何三方单路由云函数框架、也可以用 clientDB。
_admin 插件的目录结构：_
```bash
├── cloudfunctions
│ └── db_init.json # 云函数
├── js_sdk # js sdk
├── pages # 页面
│ └── your-page # 你的页面
├── pages.json # 插件页面路由等
└── pulginId-menu.json # 插件菜单，pulginId 为你上传插件的 id
```
以开发一个【权限插件】为例：
**page.json 配置:**
插件里的 pages.json 内容，导入项目后，会与项目下的 pages.json 合并，只需保留和插件相关的配置，比如：将【权限插件】放置在【系统管理】下：
```json
{
"subPackages": [
{
"root": "pages/system",
"pages": [
{
"path": "permission/permission",
"style": {
"navigationBarTitleText": "权限管理"
}
},
{
"path": "permission/add",
"style": {
"navigationBarTitleText": "新增权限"
}
},
{
"path": "permission/edit",
"style": {
"navigationBarTitleText": "编辑权限"
}
}
]
}
]
}
```
**pulginId-menu.json 配置:**
插件里的 pulginId-menu.json 内容，导入项目后，菜单管理会读取菜单配置，生成【待添加菜单】，配置与 admin [添加动态菜单](管理动态菜单)同理，例如 ：
```json
[
{
"menu_id": "system_permission",
"name": "权限管理",
"icon": "",
"url": "/pages/system/permission/list",
"sort": 1030,
"parent_id": "system_management",
"permission": [],
"enable": true,
"create_date": 1602662469396
}
]
```
> 注：`system_management` 是【系统管理】的菜单 id
大多数的 admin 插件的表单页面是用自动工具生成的，所以在 uniCloud admin 中制作一个插件非常简单。
首先在数据库中配好[schema](https://uniapp.dcloud.io/uniCloud/schema)，然后使用 uniCloud web 控制台提供的自动生成代码工具，即可快速的生成数据的展示、新建、修改、删除的页面代码，并且自带表单校验。详见：[https://uniapp.dcloud.io/uniCloud/schema?id=autocode](https://uniapp.dcloud.io/uniCloud/schema?id=autocode)
为防止和用户工程的文件冲突，插件的页面应该有插件的前缀，比如 xxx-page。
这里有已存的 uniCloud admin 插件列表，可以参考它们：[https://ext.dcloud.net.cn/?cat1=7&cat2=74&orderBy=UpdatedDate](https://ext.dcloud.net.cn/?cat1=7&cat2=74&orderBy=UpdatedDate)
插件上传等更多信息，参考 [DCloud 插件开发指南汇总](https://ask.dcloud.net.cn/article/35408) 及其中的 `admin 插件`部分，插件作者可以按此文档提交插件，在插件市场的上传发布页面选择`uniCloud` 分类的 `Admin 插件` 。
### 使用三方组件库
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或