关于前端:02前后端分离中台框架前端-adminuiplus-学习介绍与简单使用

中台框架前台我的项目 admin.ui.plus 的初识

基于 vue3.x + CompositionAPI setup 语法糖 + typescript + vite + element plus + vue-router-next + pinia 技术，内置反对一键生成微服务接口，适配手机、平板、pc 的后盾权限治理框架，心愿缩小工作量，帮忙大家实现疾速开发。

• 框架一览

• 我的项目地址

  • https://github.com/zhontai/admin.ui.plus

• 技术栈

  • node 16+
  • vue 3.x
  • typescript
  • element plus

• 特点

  • 界面还能够，自定义度高，适配挪动端
  • 主动生成api接口定义文件
  • 没有适度封装
  • 零碎权限封装根本满足大部分我的项目

• 举荐环境

  • Node v18
  • VsCode

  • VsCode插件

    • TypeScript Vue Plugin (Volar)
    • Vue Language Features (Volar)
    • Vue 3 Snippets
    • ESLint
    • Prettier – Code formatter

• 我的项目构造

  • bin 打包脚本
  • gen 依据./templates生成api相干文件，接口更新后执行npm run gen:api会生成接口的定义和接口模型
  • public 不须要打包的资源
  • src 源码，vue我的项目构造，具体文档参考vue-next-admin，element-plus

  • package.json script

    • npm run dev 运行
    • npm run build 打包
    • npm run gen:api 生成api代码，增加了模块后退出到apis中

默认实现性能

1. 用户治理：配置用户，查看部门用户列表，反对禁用/启用、重置明码、设置主管、用户可配置多角色、多部门和下级主管。
2. 角色治理：配置角色，反对角色分组、设置角色菜单和数据权限、批量增加和移除角色员工。
3. 部门治理：配置部门，反对树形列表展现。
4. 权限治理：配置分组、菜单、操作、权限点、权限标识，反对树形列表展现。
5. 租户套餐：配置租户套餐，反对新增/移除套餐企业。
6. 租户治理：配置租户，新增租户时初始化部门、角色和管理员数据，反对租户配置套餐、禁用/启用性能。
7. 字典治理：配置字典，查看字典类型和字典数据列表，反对字典类型和字典数据保护。
8. 任务调度：查看工作和工作日志列表，反对工作启动、执行、暂停等性能。
9. 缓存治理：缓存列表查问，反对依据缓存键革除缓存
10. 接口治理：配置接口，反对接口同步性能，用于新增权限点抉择接口，反对树形列表展现。
11. 视图治理：配置视图，反对视图保护性能，用于新增菜单抉择视图，反对树形列表展现。
12. 文件治理：反对文件列表查问、文件上传/下载、查看大图、复制文件地址、删除文件性能。
13. 登录日志：登录日志列表查问，记录用户登录胜利和失败日志。
14. 操作日志：操作日志列表查问，记录用户操作失常和异样日志。

框架的应用

1. 从GitHub 克隆/下载我的项目

• 前端：git clone https://github.com/zhontai/admin.ui.plus.git
• 后端：git clone https://github.com/zhontai/Admin.Core.git

2. 启动运行

装置好nodejs18+,vscode，执行 npm i && npm run dev 运行即可
启动地址：http://localhost:8100
默认会跳转到登录页，账号密码 admin 111111 会主动赋值
后盾 ZhonTai.Host 接口运行起来，登录无妨碍

3. 批改事项

• 批改零碎名称

  • 须要批改的文件
  • index.html
  • src/layout/footer/index.vue
  • src/layout/stores/themeConfig.ts

• 更新logo

  • 能够从iconfont字体网站找个字体文件当logo,而后再返回图标工场生成须要的图片

• 更新api接口

  • 应用 npm run gen:api 生成，将会依据接口文档生成对应的模型，接口ts文件

  • 如果加了新的模块，配置 /gen/gen-api.js 中的apis即可

    const apis =[
        {
            output: path.resolve(__dirname, '../src/api/admin'),
            url: 'http://localhost:8000/admin/swagger/admin/swagger.json',
        },
        //增加模块 dev
        {
            output: path.resolve(__dirname, '../src/api/dev'),
            url: 'http://localhost:8000/admin/swagger/dev/swagger.json',
        }
    ]

• 平台治理-系统管理-视图治理

  • 视图配置对应vue视图文件地址，权限菜单配置路由，路由对应跳转到视图
  • views模块失常增加文件copy其余的页面即可

• 平台治理-权限治理-权限治理(菜单)

  • 对应vue的路由配置，后盾返回，前台动静加载
• 平台治理-系统管理-接口治理-同步，将接口定义写入到数据库，用于指定页面权限及按钮权限的管制

• 新增一个模块页面的步骤

  • 在我的项目中增加视图文件，如 /views/admin/test/index.vue
  • 在视图治理中增加视图，配置为新增视图的信息 视图名称：admin/test 视图地址：admin/test/index
  • 新增权限，分组(一级导航)，菜单(上级导航)，权限点 ，分组和菜单的路由地址不能统一，路由前缀也须要统一切换菜单时能力精确定位菜单
  • 测试菜单：路由地址：/platform/test/index 视图地址：抉择admin/test/index

4. 代码生成

• 后端：https://github.com/share36/Admin.Core.Dev
• 前端：https://github.com/share36/admin.ui.plus.dev

代码生成的应用见下篇