Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
你丑我先上
unidocs-zh
提交
8b5cb3dd
U
unidocs-zh
项目概览
你丑我先上
/
unidocs-zh
与 Fork 源项目一致
Fork自
DCloud / unidocs-zh
通知
1
Star
0
Fork
0
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
DevOps
流水线
流水线任务
计划
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
U
unidocs-zh
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
DevOps
DevOps
流水线
流水线任务
计划
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
流水线任务
提交
Issue看板
体验新版 GitCode,发现更多精彩内容 >>
提交
8b5cb3dd
编写于
7月 19, 2022
作者:
hbcui1984
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
Update admin.md
上级
6636027e
变更
1
隐藏空白更改
内联
并排
Showing
1 changed file
with
113 addition
and
119 deletion
+113
-119
docs/uniCloud/admin.md
docs/uniCloud/admin.md
+113
-119
未找到文件。
docs/uniCloud/admin.md
浏览文件 @
8b5cb3dd
...
...
@@ -73,7 +73,7 @@ PC 端如下图:
uni-admin是完整开源的一个uni-app项目,任何熟悉uni-app的工程师都可以自行开发扩展功能。
### 使用
### 使用
说明
#### 创建
...
...
@@ -101,7 +101,7 @@ uni-admin是完整开源的一个uni-app项目,任何熟悉uni-app的工程师
-
浏览器联网失败,报
`request:fail`
,需要去云服务空间的
`跨域配置`
配置跨域域名,需带端口。
[
详见
](
https://uniapp.dcloud.net.cn/uniCloud/quickstart?id=useinh5
)
-
如从未接触过uniCloud,是无法直接上手uni-admin的,建议先通读下uniCloud文档的概念介绍和快速上手章节。
[
详见
](
https://uniapp.dcloud.net.cn/uniCloud/README
)
### 目录结构
###
#
目录结构
```
bash
├── cloudfunctions
# 云函数
...
...
@@ -383,125 +383,11 @@ uni统计深入uni-app和uniCloud框架底层,提供了众多其他统计平
**7. 开放生态**
uni统计
的
开源且基于
[
uni-admin
](
/uniCloud/admin
)
的插件规范提供了插件机制,会有更多插件作者提供各种丰富的统计插件(如电商统计、内容统计等)。见
[
插件市场
](
https://ext.dcloud.net.cn/?cat1=7&cat2=74&type=HotList
)
uni统计开源且基于
[
uni-admin
](
/uniCloud/admin
)
的插件规范提供了插件机制,会有更多插件作者提供各种丰富的统计插件(如电商统计、内容统计等)。见
[
插件市场
](
https://ext.dcloud.net.cn/?cat1=7&cat2=74&type=HotList
)
### 用户-角色-权限
uni-admin 框架基于 uni-id,复用 uni-id 的用户、角色、权限系统,详见
[
uni-id
](
https://uniapp.dcloud.io/uniCloud/uni-id
)
。
需要注意的是,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 | 是 | 创建时间 |
admin 提供了两个内置方法,方便在页面中鉴定登录用户权限和角色:
| 方法 | 作用 | 入参 | 返回值 |
| :--------------- | :------------------------- | :----- | :------ |
|
`$hasPermission`
| 鉴定登录用户是否具有某权限 | String | Boolean |
|
`$hasRole`
| 鉴定登录用户是否具有某角色 | String | Boolean |
```
html
<template>
<view>
<!-- 包含 user/add 权限的用户可以看到新增按钮 -->
<button
v-if=
"$hasPermission('USER_ADD')"
>
新增
</button>
<!-- 包含 admin 角色的用户可以看到删除按钮 -->
<button
v-if=
"$hasRole('admin')"
>
删除
</button>
</view>
</template>
```
#### 给系统创建多个登录账户并设置不同的权限@mutiladmin
下面以增加一个普通成员的角色为例,该角色的用户登录admin系统后只能看用户表数据,不能改动数据。
##### 1. 先用admin账户登录admin系统。
-
admin示例项目地址:
[
https://unicloudadmindemo.dcloud.net.cn/#/pages/login/login
](
https://unicloudadmindemo.dcloud.net.cn/#/pages/login/login
)
-
体验账号:admin 密码:123456
##### 2. 创建权限。在uni-admin左侧菜单的权限管理,新增权限“查询信息”,标识为“read”
![](
https://vkceyugu.cdn.bspapp.com/VKCEYUGU-f184e7c3-1912-41b2-b81f-435d1b37c7b4/ab997406-d36e-4d42-87ab-339bd5a8a50a.jpg
)
##### 3. 创建角色。在左侧菜单的角色管理里,新增角色“普通成员”,标识为“member”,绑定上面的“查询信息”权限
![](
https://vkceyugu.cdn.bspapp.com/VKCEYUGU-f184e7c3-1912-41b2-b81f-435d1b37c7b4/f3b563b3-3e86-4823-9373-64c9bebdd51c.jpg
)
##### 4. 创建账户并赋予角色。在左侧菜单的用户管理里,添加用户“张三”,然后给用户赋予角色“普通成员”
![](
https://vkceyugu.cdn.bspapp.com/VKCEYUGU-f184e7c3-1912-41b2-b81f-435d1b37c7b4/18676740-4be8-419b-8c12-40559ded1413.jpg
)
##### 5.如果你退出账户,登录刚刚创建的账户张三。我们发现会提示:该账户没有被赋予登录admin系统的权限, 请联系系统管理员绑定角色赋权限。因为:你登录的账户没有访问任何admin系统菜单的权限,所以不能访问admin系统。
![](
https://vkceyugu.cdn.bspapp.com/VKCEYUGU-f184e7c3-1912-41b2-b81f-435d1b37c7b4/0b627d45-da68-435b-995b-a191e7330624.jpg
)
##### 6.设置有查询信息权限的人,拥有访问admin系统菜单"用户管理"的权限。在左侧菜单的菜单管理里,找到菜单“用户管理”,点修改,在权限列表里勾选“查询信息”,也就是有查询信息权限的人,可以看到本菜单
![](
https://vkceyugu.cdn.bspapp.com/VKCEYUGU-f184e7c3-1912-41b2-b81f-435d1b37c7b4/74c48248-d8ae-4427-9abb-8a6c5d54c53d.jpg
)
##### 7.这时你用账户“张三”登录,就能进入到admin系统。但你会看到如下图提示“权限校验未通过”。因为刚刚仅为该用户赋予了访问菜单的权限。还未赋予访问uni-id-users表的阅读权限
![](
https://vkceyugu.cdn.bspapp.com/VKCEYUGU-f184e7c3-1912-41b2-b81f-435d1b37c7b4/37d1604e-bcb1-4096-a373-90397b9a96c0.jpg
)
##### 8. 需要在hbuilderx中将表uni-id-users的schema文件中设置新角色的权限,将permission下的read节点配置为`"read": "'read' in auth.permission"`,并上传到云端。当然这在示例项目不能实现,需要你自己搭建admin系统,重复以上步骤,[点此下载uni-admin](https://ext.dcloud.net.cn/plugin?id=3268)
![](
https://vkceyugu.cdn.bspapp.com/VKCEYUGU-f184e7c3-1912-41b2-b81f-435d1b37c7b4/81e38081-9507-4e00-bafd-7dab26e9a119.png
)
##### 9.此时你再刷新页面即可访问用户管理的数据列表
### icon 图标
admin 框架内置了一套 icon 图标,在
`静态功能演示-图标`
菜单中,点击图标即可复制图标的 class 定义。
选中样式后,在新建菜单页面的表单中输入样式名称。没有样式的菜单项将没有图标。
当然,你也可以使用三方 icon 库。以使用
`elementUI`
的图标为例,在
`app.vue`
中导入图标库的样式文件:
```
javascript
<
style
>
/* 注意此处仅为 icon 使用示例,建议引入纯净图标库,避免增加不必要的 css */
@
import
'
https://unpkg.com/element-ui/lib/theme-chalk/index.css
'
;
<
/style>
```
在标签上使用图标的 class 名称即可:
``el-icon-s-tools``
### 新增页面
新增页面可以自己开发页面,也可以从插件市场下载插件。页面如需添加菜单,参见上文的
[
菜单管理
](
#静态菜单和动态菜单
)
。
开发页面不局限开发方式:
-
可以新增普通的页面,在前端 callfunction,后台搭配云函数操作
-
可以使用云函数单文件路由,在项目中默认包含了一个
[
uni-cloud-router
](
https://uniapp.dcloud.io/uniCloud/uni-cloud-router
)
的单文件路由,也可以使用插件市场的其他单文件路由
-
可以使用 clientdb,在前端直接操作数据库,后台配置 db schema 进行权限和格式校验
-
可以使用schema2code生成uni-admin页面。这是最为常用、最高效的页面开发模式。
[
详见
](
https://uniapp.dcloud.net.cn/uniCloud/schema?id=autocode
)
> 注意:在使用 uni-cloud-router 时,controller 下的文件夹和文件,不要命名相同,例如:app/room 这个写法目前分辨不了 `app` 是文件 `app.js`,还是文件夹 `app`
#### 自己开发页面
admin 中开发页面,和 uni-app 开发 vue 页面是一致的。
#### 从插件市场下载插件,并注册到 admin 的左侧动态菜单中
_使用步骤:_
1.
从
[
插件市场
](
https://ext.dcloud.net.cn/
)
导入插件
2.
在 HBuilder X 3.1+ 中选择添加插件的项目
3.
在插件的 db_init.json 文件上右键,点击“初始化云数据库”
4.
在菜单管理中的添加【待添加菜单】
5.
刷新 admin 即可在菜单栏看到新增的菜单
---------------------------------- 分割线 ----------------------------------------
### 应用管理 <Badge text="uni-admin 1.9.3+" />@app-manager
新版的应用管理有以下变化:
-
新增应用内置 uni-portal 插件。支持填写更多信息,可一键生成统一发布页。
-
内置升级中心。现在你不再需要去插件市场下载升级中心插件,然后配置上传云函数等,可直接使用。
#### 新增应用
> 现在应用管理列表页每一行新增了 `发布页管理` 和 `版本管理`
在进入应用管理后可看到如下界面,点击有上角
`新增`
按钮可新增一个应用
![
新增应用
](
https://vkceyugu.cdn.bspapp.com/VKCEYUGU-f184e7c3-1912-41b2-b81f-435d1b37c7b4/12b0eb73-f791-4cc4-998c-0c95ec97b3fd.png
)
...
...
@@ -548,7 +434,7 @@ _使用步骤:_
}
```
###
# uni-portal 发布页管理
@uni-portal
###
统一发布页<Badge text="uni-admin 1.9.3+" />
@uni-portal
> 点击应用管理列表中的 `发布页管理` 可一键生成统一发布页
...
...
@@ -579,7 +465,7 @@ _使用步骤:_
<img
src=
"https://vkceyugu.cdn.bspapp.com/VKCEYUGU-8ed92fab-502d-4290-af3c-1d65c4dbfc4d/f4b41d5f-861b-4bef-b670-9a2597643e3c.jpg"
height=
"600"
></img>
###
# uni-upgrade-center App升级中心
@uni-upgrade-center
###
App升级中心<Badge text="uni-admin 1.9.3+" />
@uni-upgrade-center
> 在应用管理新增一个应用之后,即可在 `App升级中心` 发布该应用的版本
...
...
@@ -658,6 +544,114 @@ _使用步骤:_
>
> 将 `data` 中的 `enableiOSWgt: false` 中 改为 `enableiOSWgt: true`
### 用户-角色-权限
uni-admin 框架基于 uni-id,复用 uni-id 的用户、角色、权限系统,详见
[
uni-id
](
https://uniapp.dcloud.io/uniCloud/uni-id
)
。
需要注意的是,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 | 是 | 创建时间 |
admin 提供了两个内置方法,方便在页面中鉴定登录用户权限和角色:
| 方法 | 作用 | 入参 | 返回值 |
| :--------------- | :------------------------- | :----- | :------ |
|
`$hasPermission`
| 鉴定登录用户是否具有某权限 | String | Boolean |
|
`$hasRole`
| 鉴定登录用户是否具有某角色 | String | Boolean |
```
html
<template>
<view>
<!-- 包含 user/add 权限的用户可以看到新增按钮 -->
<button
v-if=
"$hasPermission('USER_ADD')"
>
新增
</button>
<!-- 包含 admin 角色的用户可以看到删除按钮 -->
<button
v-if=
"$hasRole('admin')"
>
删除
</button>
</view>
</template>
```
#### 给系统创建多个登录账户并设置不同的权限@mutiladmin
下面以增加一个普通成员的角色为例,该角色的用户登录admin系统后只能看用户表数据,不能改动数据。
##### 1. 先用admin账户登录admin系统。
-
admin示例项目地址:
[
https://unicloudadmindemo.dcloud.net.cn/#/pages/login/login
](
https://unicloudadmindemo.dcloud.net.cn/#/pages/login/login
)
-
体验账号:admin 密码:123456
##### 2. 创建权限。在uni-admin左侧菜单的权限管理,新增权限“查询信息”,标识为“read”
![](
https://vkceyugu.cdn.bspapp.com/VKCEYUGU-f184e7c3-1912-41b2-b81f-435d1b37c7b4/ab997406-d36e-4d42-87ab-339bd5a8a50a.jpg
)
##### 3. 创建角色。在左侧菜单的角色管理里,新增角色“普通成员”,标识为“member”,绑定上面的“查询信息”权限
![](
https://vkceyugu.cdn.bspapp.com/VKCEYUGU-f184e7c3-1912-41b2-b81f-435d1b37c7b4/f3b563b3-3e86-4823-9373-64c9bebdd51c.jpg
)
##### 4. 创建账户并赋予角色。在左侧菜单的用户管理里,添加用户“张三”,然后给用户赋予角色“普通成员”
![](
https://vkceyugu.cdn.bspapp.com/VKCEYUGU-f184e7c3-1912-41b2-b81f-435d1b37c7b4/18676740-4be8-419b-8c12-40559ded1413.jpg
)
##### 5.如果你退出账户,登录刚刚创建的账户张三。我们发现会提示:该账户没有被赋予登录admin系统的权限, 请联系系统管理员绑定角色赋权限。因为:你登录的账户没有访问任何admin系统菜单的权限,所以不能访问admin系统。
![](
https://vkceyugu.cdn.bspapp.com/VKCEYUGU-f184e7c3-1912-41b2-b81f-435d1b37c7b4/0b627d45-da68-435b-995b-a191e7330624.jpg
)
##### 6.设置有查询信息权限的人,拥有访问admin系统菜单"用户管理"的权限。在左侧菜单的菜单管理里,找到菜单“用户管理”,点修改,在权限列表里勾选“查询信息”,也就是有查询信息权限的人,可以看到本菜单
![](
https://vkceyugu.cdn.bspapp.com/VKCEYUGU-f184e7c3-1912-41b2-b81f-435d1b37c7b4/74c48248-d8ae-4427-9abb-8a6c5d54c53d.jpg
)
##### 7.这时你用账户“张三”登录,就能进入到admin系统。但你会看到如下图提示“权限校验未通过”。因为刚刚仅为该用户赋予了访问菜单的权限。还未赋予访问uni-id-users表的阅读权限
![](
https://vkceyugu.cdn.bspapp.com/VKCEYUGU-f184e7c3-1912-41b2-b81f-435d1b37c7b4/37d1604e-bcb1-4096-a373-90397b9a96c0.jpg
)
##### 8. 需要在hbuilderx中将表uni-id-users的schema文件中设置新角色的权限,将permission下的read节点配置为`"read": "'read' in auth.permission"`,并上传到云端。当然这在示例项目不能实现,需要你自己搭建admin系统,重复以上步骤,[点此下载uni-admin](https://ext.dcloud.net.cn/plugin?id=3268)
![](
https://vkceyugu.cdn.bspapp.com/VKCEYUGU-f184e7c3-1912-41b2-b81f-435d1b37c7b4/81e38081-9507-4e00-bafd-7dab26e9a119.png
)
##### 9.此时你再刷新页面即可访问用户管理的数据列表
### icon 图标
admin 框架内置了一套 icon 图标,在
`静态功能演示-图标`
菜单中,点击图标即可复制图标的 class 定义。
选中样式后,在新建菜单页面的表单中输入样式名称。没有样式的菜单项将没有图标。
当然,你也可以使用三方 icon 库。以使用
`elementUI`
的图标为例,在
`app.vue`
中导入图标库的样式文件:
```
javascript
<
style
>
/* 注意此处仅为 icon 使用示例,建议引入纯净图标库,避免增加不必要的 css */
@
import
'
https://unpkg.com/element-ui/lib/theme-chalk/index.css
'
;
<
/style>
```
在标签上使用图标的 class 名称即可:
``el-icon-s-tools``
### 新增页面
新增页面可以自己开发页面,也可以从插件市场下载插件。页面如需添加菜单,参见上文的
[
菜单管理
](
#静态菜单和动态菜单
)
。
开发页面不局限开发方式:
-
可以新增普通的页面,在前端 callfunction,后台搭配云函数操作
-
可以使用云函数单文件路由,在项目中默认包含了一个
[
uni-cloud-router
](
https://uniapp.dcloud.io/uniCloud/uni-cloud-router
)
的单文件路由,也可以使用插件市场的其他单文件路由
-
可以使用 clientdb,在前端直接操作数据库,后台配置 db schema 进行权限和格式校验
-
可以使用schema2code生成uni-admin页面。这是最为常用、最高效的页面开发模式。
[
详见
](
https://uniapp.dcloud.net.cn/uniCloud/schema?id=autocode
)
> 注意:在使用 uni-cloud-router 时,controller 下的文件夹和文件,不要命名相同,例如:app/room 这个写法目前分辨不了 `app` 是文件 `app.js`,还是文件夹 `app`
#### 自己开发页面
admin 中开发页面,和 uni-app 开发 vue 页面是一致的。
#### 从插件市场下载插件,并注册到 admin 的左侧动态菜单中
_使用步骤:_
1.
从
[
插件市场
](
https://ext.dcloud.net.cn/
)
导入插件
2.
在 HBuilder X 3.1+ 中选择添加插件的项目
3.
在插件的 db_init.json 文件上右键,点击“初始化云数据库”
4.
在菜单管理中的添加【待添加菜单】
5.
刷新 admin 即可在菜单栏看到新增的菜单
---------------------------------- 分割线 ----------------------------------------
### admin 插件开发
我们不仅是插件的使用者,也可以是插件的开发者,那么如何开发一款 uni-admin 插件呢?
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录