基于 vue3.x + CompositionAPI setup 语法糖 + typescript + vite + element plus + vue-router-next + pinia 技术,内置支持一键生成微服务接口,适配手机、平板、pc 的后台权限管理框架,希望减少工作量,帮助大家实现快速开发。
项目地址
技术栈
特点
推荐环境
项目结构
bin
打包脚本gen
根据./templates生成api相关文件,接口更新后执行npm run gen:api
会生成接口的定义和接口模型public
不需要打包的资源src
源码,vue项目结构,具体文档参考vue-next-admin,element-plusnpm run dev
运行npm run build
打包npm run gen:api
生成api代码,添加了模块后加入到apis中git clone https://github.com/zhontai/admin.ui.plus.git
git clone https://github.com/zhontai/Admin.Core.git
安装好nodejs18+,vscode,执行 npm i
&& npm run dev
运行即可
默认会跳转到登录页,账号密码 admin 111111 会自动赋值
后台 ZhonTai.Host 接口运行起来,登录无阻碍
修改系统名称
更新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',
}
]
平台管理-系统管理-视图管理
平台管理-权限管理-权限管理(菜单)
平台管理-系统管理-接口管理-同步,将接口定义写入到数据库,用于指定页面权限及按钮权限的控制
新增一个模块页面的步骤
在项目中添加视图文件,如 /views/admin/test/index.vue
在视图管理中添加视图,配置为新增视图的信息 视图名称:admin/test 视图地址:admin/test/index
新增权限,分组(一级导航),菜单(下级导航),权限点 ,分组和菜单的路由地址不能一致,路由前缀也需要一致切换菜单时才能准确定位菜单
测试菜单:路由地址:/platform/test/index 视图地址:选择admin/test/index
代码生成的使用见下篇
手机扫一扫
移动阅读更方便
你可能感兴趣的文章