前端的全栈之路:基于 Vue3 + Nest.js 全栈开发的后台应用

☘️ 项目简介

Vue3 Admin 是一个前端基于 Soybean Admin 二次开发,后端基于 Nest.js 的全栈后台应用,适合学习全栈开发的同学参考学习。

🌿 系统功能设计

  1. 动态国际化语言配置
  2. 记录登录用户的 CURD 操作日志
  3. 用户和角色权限的一对一映射,根据角色关联的菜单权限生成动态路由菜单
  4. 登录用户发布消息公告,后端使用 SSE 推送,可登录多个用户查看效果
  5. 前端常见的一些实用的业务功能或者一些有趣的效果

🌳 环境和依赖

推荐本项目使用 pnpm 包管理工具

  • Git (你需要git来克隆和管理项目版本)
  • Node.js (Node.js 版本要求 >= 18.12.0,推荐 18.19.0 或更高)
  • Pnpm (>= 8.7.0,推荐最新版本)
  • PostgreSQL (推荐最新版本)

🌴 项目运行

  1. 拉取项目代码
bash 复制代码
git clone https://github.com/baiwumm/Vue3-Admin.git
cd Vue3-Admin
// 进入前端
cd web
// 进入后端
cd server
  1. 安装依赖

    npm install -g pnpm
    pnpm install

  2. 开发模式运行

    // 前端启动
    pnpm dev
    // 后端启动:开发模式
    pnpm start:dev

  3. 编译项目

    pnpm build

🌵 新增路由菜单

  1. web/src/views 目录下新建 文件夹/index.vue 文件
  2. 在菜单 系统管理-国际化-route 中添加路由配置
  3. 在菜单 系统管理-菜单管理 中按照规则添加菜单,可打开多个标签页参考,路由配置参考:系统路由
  4. 在菜单 系统管理-角色管理 中编辑状态中勾选相应的菜单,保存刷新页面,即可看到路由菜单生效

🌱 功能模块

复制代码
- 登录 / 注销

- 首页

- 智能行政
  - 消息公告
  - 组织管理
  - 岗位管理
  - 组织架构

- 个人中心

- 功能页
  - 验证码
  - 打印
  - 拾色器
  - 甘特图
  - 图片预览
  - 自定义 Vue 指令
  - 懒加载
  - 图片取色盘
  - 系统级取色器
  - 文件预览
  - 流程图
  - 瀑布流
  - Swiper

- 技术文档
  - Soybean(内链)
  - Vue3
  - Nest.js
  - Ant Design Vue
  - UnoCSS

- 系统设置
  - 用户管理
  - 菜单管理
  - 角色管理
  - 国际化
  - 操作日志

- 关于

🪴 演示图















🍄 总结

  1. 本项目没有经过严格的测试,有可能存在一定的 Bug
  2. 本项目仅供学习交流使用,请勿用于商业用途。
  3. 欢迎提交 IssuesPR,一起完善本项目。
相关推荐
今禾12 小时前
前端开发中的Mock技术:深入理解vite-plugin-mock
前端·react.js·vite
你这个年龄怎么睡得着的12 小时前
Babel AST 魔法:Vite 插件如何让你的 try...catch 不再“裸奔”?
前端·javascript·vite
····懂···2 天前
关于PGCE专家技术认证解决方案
数据库·postgresql
我命由我123452 天前
PostgreSQL 保留关键字冲突问题:语法错误 在 “user“ 或附近的 LINE 1: CREATE TABLE user
数据库·后端·sql·mysql·postgresql·问题·数据库系统
FliPPeDround3 天前
@uni-helper 社区:让 uni-app 拥抱 ESM 时代
前端·uni-app·vite
hans7748829683 天前
通过为前端项目接入GeoGebra,初步研究AI时代数学教案的生成方案
前端·vite·babel
Mr_兔子先生3 天前
2025盛夏版:基于electron37+vite7的React桌面客户端保姆教程
react.js·electron·vite
布兰妮甜4 天前
Vite:下一代前端构建工具的革命
前端·javascript·vite·构建工具
清岚_lxn4 天前
vue3 antd modal对话框里的前端html导出成pdf并下载
pdf·vue3·html2canvas·jspdf
卜锦元4 天前
华为高斯Gauss数据库版本与兼容协议--详解(附带Gorm连接示例代码)
数据库·mysql·华为·postgresql