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将前后端项目部署到阿里云

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

相关推荐
写不来代码的草莓熊7 分钟前
vue前端面试题——记录一次面试当中遇到的题(10)
前端·vue.js·面试
aiopencode8 分钟前
API时代的调试革命,为什么未来的开发者都离不开Charles
后端
tiantian_cool13 分钟前
正确的 .gitignore 配置
前端·github
三小河15 分钟前
封装 classNames:让 Tailwindcss 类名处理更优雅
前端·javascript
蒙奇D索大15 分钟前
【操作系统】408操作系统核心考点精讲:宏内核、微内核与外核架构全解析
笔记·考研·架构·改行学it
起这个名字17 分钟前
ESLint 导入语句的分组排序
前端·javascript
踩着两条虫18 分钟前
VTJ.PRO低代码快速入门指南
前端·低代码
Lazy_zheng18 分钟前
一场“数据海啸”,让我重新认识了 requestAnimationFrame
前端·javascript·vue.js
crary,记忆19 分钟前
MFE: React + Angular 混合demo
前端·javascript·学习·react.js·angular·angular.js
Asort21 分钟前
JavaScript设计模式(十七)——中介者模式 (Mediator):解耦复杂交互的艺术与实践
前端·javascript·设计模式