uniapp-admin开发

766 阅读1分钟

「这是我参与11月更文挑战的第1天,活动详情查看:2021最后一次更文挑战

uniapp-admin 云开发

前言

什么是 uniCloud admin

uniCloud admin 框架,是基于 uni-app 和 uniCloud 的应用后台管理的开源框架。

对于uniCloud的开发者而言,其后台管理系统应该使用本框架。

文档:uniapp.dcloud.net.cn/uniCloud/ad…

目录结构

├── cloudfunctions              # 云函数
├── common
│   │── uni.css                 # 公共样式
│   └── uni-icons.css           # icon样式
├── components                  # 自定义组件
├── js_sdk                      # js sdk
├── pages                       # 页面
│   │── index                   # 首页
│   └── login                   # 登录页
├── static
├── store                       # vuex
├── windows
│   │── component               # 项目中使用的组件
│   │── leftWindow.vue          # 左侧窗口(菜单栏)
│   └── topWindow.vue           # 顶部窗口(导航栏)
├── admin.config.js             # 系统配置(配置导航,菜单等)
├── App.vue
├── main.js
├── mainfest.json
├── pages.json
├── postcss.config.js           # postcss 配置(浏览器兼容性)
└── uni.scss

使用

1,导入 ext.dcloud.net.cn/plugin?id=3…

image.png 2,关联云空间

image.png

3,上传

image.png

运行

运行到浏览器你会得到 (如果第一次登陆,没有账号,点击创建账号即创建了一个管理员账号)

image.png

image.png

1,如何创建左侧菜单

/admin.config.js

image.png

添加菜单配置

image.png 效果如下

image.png

/pages/目录下创建 新的页面

image.png

pages.json 添加路由配置

image.png

2,如何创建动态左侧菜单

/pages/目录下创建 新的页面

image.png

先创建一个权限

image.png

创建一个角色,选中刚才创建的权限

image.png

创建一个菜单,选中刚才创建的权限

image.png

创建一个用户,选中刚才创建的权限

image.png

image.png

PS:注意点

  • 1,这里实现的只是左侧菜单的不显示,直接访问当前路由依然是可以访问的
  • 2,rbac 权限管理,核心是权限