Vue3+NestJS实现权限管理系统:开篇介绍

前言

这是Vue3+NestJS实现权限管理系统系列文章第一篇文章,这个系列我曾经写过多篇文章,但是写完之后回过头来再看里面有很多遗漏以及不足之处,所以决定重新梳理这个系列,并从头开始开发一个完整的Vue3+NestJS全栈工程项目,旨在为大家提供更详尽的开发过程以及更好的阅读体验。

为什么要写权限管理系统?

目前github上已经有很多非常成熟的权限管理系统了,为什么还要从头再开发一个呢?

虽然有很多开源的项目,但是对于一些初学者来说是很难看明白的,没办法从0到1取学习这个项目是如何完成的

同时很多权限管理系统项目后端部分都是用的springboot等框架来写的,对于前端来说是看不懂的,而本项目则使用NestJS作为后端语言来开发这个项目,对于前端来说有着得天独厚的优势。

文章中也会对NestJS进行详细的介绍,即使你没有了解过NestJS,看完这个系列的文章也能掌握NestJS的使用

包含哪些内容?

本系列文章内容分为三大部分,分别是前端篇,后端篇,部署篇。 当然如果你不想学习后端部分也是可以的,后续会提供线上接口供前端篇内容学习

前端篇主要包括如下内容:

  1. 前端: 项目搭建及集成项目的编程规范工具链(ESlint+Prettier+Stylelint)

  2. 前端: axios接口封装及请求规范

  3. 前端: 实现通用上传文件组件

  4. 前端: 定义全局CSS变量及tailwindcss的使用

  5. 前端: 实现登录页面

  6. 前端: 动态处理菜单路由

  7. 前端: 实现自定义权限指令

  8. 前端: 使用keepAlive控制页面缓存与否

  9. 前端: 实现导航栏标签及面包屑导航

  10. 前端: 菜单管理页面

  11. 前端: 角色管理页面

  12. 前端: 用户管理页面

  13. 前端: 部门管理页面

  14. 前端: 个人中心页面

  15. 前端: 字典管理页面

  16. 前端: 通用代码生成页面

  17. 前端: 国际化(引入I18n语言配置)

  18. 前端: 暗黑模式切换

  19. 前端:多主题切换配置

后端部分包含

  1. 后端:快速了解NestJS及项目基本配置

  2. 后端:Docker简介及数据库的使用

  3. 后端:使用Swagger生成在线接口文档

  4. 后端:集成winston进行日志管理

  5. 后端:使用 JWT 实现注册与登录

  6. 后端:如何实现登录token自动续期

  7. 后端:接入微信公众号自动回复实现注册登录

  8. 后端:基于RBAC 菜单权限控制实现

  9. 后端:文件导入导出接口实现

  10. 后端:实现菜单管理接口

  11. 后端:字典管理接口

  12. 后端:实现角色管理接口

  13. 后端:实现用户管理接口

  14. 后端:实现部门管理接口

  15. 后端:实现个人中心接口

  16. 后端:实现通用代码生成模块接口

  17. 后端:如何做定时任务

  18. 后端:使用pm2管理项目进程

最后还会教大家如何部署我们的项目

  1. 部署: 学习docker使用

  2. 部署: 使用dockerfile及docker-compose完成后端项目本地部署

  3. 部署: 使用docker完成前端端项目本地部署

  4. 部署: 使用docker将前后端项目部署到阿里云

最后希望我的文章能够帮助大家学到更多的东西,一起学习共同进步,早日成为全栈工程师,加油!

相关推荐
wkj0012 小时前
vue中 js-cookie 用法
前端·javascript·vue.js
义薄云天us4 小时前
028_分布式部署架构
人工智能·分布式·架构·claude code
GoldKey6 小时前
gcc 源码阅读---语法树
linux·前端·windows
熟悉的新风景6 小时前
springboot项目或其他项目使用@Test测试项目接口配置-spring-boot-starter-test
java·spring boot·后端
Xf3n1an7 小时前
html语法
前端·html
张拭心7 小时前
亚马逊 AI IDE Kiro “狙击”Cursor?实测心得
前端·ai编程
烛阴7 小时前
为什么你的Python项目总是混乱?层级包构建全解析
前端·python
晴空月明7 小时前
分布式系统高可用性设计 - 监控与日志系统
后端
@大迁世界8 小时前
React 及其生态新闻 — 2025年6月
前端·javascript·react.js·前端框架·ecmascript
songroom8 小时前
【转】Rust: PhantomData,#may_dangle和Drop Check 真真假假
开发语言·后端·rust