Vue2 Admin
☘️ 项目简介
Vue2 Admin 是一个前端基于 Ant Design Pro 二次开发,后端基于 Nest.js 的全栈后台应用,适合学习全栈开发的同学参考学习。
- 🍁 前端技术栈: Vue2、Ant Design Vue、Vuex
- 🍁 后端技术栈: Nest.js、PostgreSQL、Prisma
- 🍂 线上预览: https://vue2.baiwumm.com/
- 🍃 用户名:Admin,密码:abc123456
- 🪹 github 仓库地址
- 🪺 码云仓库地址
- 🍀 Swagger 接口文档
- ❤️ star:如果可以的话,请顺手给个star,表示对作者的鼓励,万分感谢!
🌿 系统功能设计
- 动态国际化语言配置
- 记录登录用户的 CURD 操作日志
- 用户和角色权限的一对一映射,根据角色关联的菜单权限生成动态路由菜单
- 登录用户发布消息公告,后端使用 SSE 推送,可登录多个用户查看效果
- 前端常见的一些实用的业务功能或者一些有趣的效果
🌳 环境和依赖
推荐本项目使用 pnpm 包管理工具
- Git (你需要git来克隆和管理项目版本)
- Node.js (Node.js 版本要求 >= 18.12.0,推荐 18.19.0 或更高)
- Pnpm (>= 8.7.0,推荐最新版本)
- PostgreSQL (推荐最新版本)
🌴 项目运行
安装 PostgreSQL 数据库,并导入 /postgreSQL 中的文件,修改 /server/env 文件中的数据库配置,这一步要保证成功,不然后端服务起不来
powershell 代码:DATABASE_URL="postgresql://postgres:123456@localhost:5432/vue2-admin?schema=public"
拉取项目代码
powershell 代码:git clone https://github.com/baiwumm/vue2-admin.git cd vue2-admin // 进入前端 cd web // 进入后端 cd server
安装依赖
powershell 代码:npm install -g pnpm pnpm install
开发模式运行
powershell 代码:// 前端启动 pnpm dev // 后端启动:开发模式 pnpm start:dev
编译项目
powershell 代码:pnpm build
🌵 新增路由菜单
- 在 web/src/views 目录下新建 文件夹/index.vue 文件
- 在菜单 系统管理-国际化-menu 中添加路由配置
- 在菜单 系统管理-菜单管理 中按照规则添加菜单,可打开多个标签页参考,路由配置参考:路由和菜单
- 在菜单 系统管理-角色管理 中编辑状态中勾选相应的菜单,保存刷新页面,即可看到路由菜单生效
🌱 功能模块
text 代码:- 登录 / 注销
- 工作台
- 智能行政
- 消息公告
- 组织管理
- 岗位管理
- 组织架构
- 个人中心
- 功能页
- 验证码
- 自定义 Vue 指令
- 懒加载
- 瀑布流
- 图片预览
- 拾色器
- 图片取色盘
- 系统级取色器
- Swiper
- 打印
- 文件预览
- 拖拽
- 技术文档
- Vue2
- Nest.js
- Ant Design Vue
- Ant Design Pro
- 系统设置
- 用户管理
- 菜单管理
- 角色管理
- 国际化
- 操作日志
- 关于
学习中,数据库发一下,谢谢
恩,放在文章底部了,自己去下载一下
暂无点赞
暂无点赞