手把手教你实现一个vue3+ts+nodeJS后台管理系统

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第1天，点击查看活动详情 前言 本系列将通过前端vue + ts加后端nodeJS的技术框架从零实现一个后台管理系统，作者主业是we

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第2天，点击查看活动详情 前言 在上文中我们完成了对前后端项目的初始化，本文我们将先完成后端项目的所需准备（安装模块、创建数据库、连

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第3天，点击查看活动详情 前言 在上文中我们完成了后端项目的数据库的创建和映射。接下来我们将编写用户路由（接口）。但首先要先有tok

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第4天点击查看活动详情 前言 本文将继续上文来实现登录接口。前端的图形验证码图片是由后端返回，并可进行刷新等操作。由于存在多用户操作

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第5天，点击查看活动详情 前言 上文我们完成了添加用户的接口，本文我们继续来完成登录接口。要完成登录接口，首先还要三个步骤。 前端获

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第6天，点击查看活动详情 前言 我们继续上文来完成登录接口。我们已经完成了验证入参、验证码的验证。接下来还要完成 判断用户名是否存在

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第7天，点击查看活动详情 前言 前面已经实现了登录所需的接口，接下来主要针对获取用户分页列表和修改用户接口进行说明，其它大同小异，实

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第8天，点击查看活动详情 前言 前面我们几乎实现了用户模块的所有路由接口，剩下的几个接口大同小异，都是获取id后对数据库进行对应的操

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第9天，点击查看活动详情 前言 前面已经将用户模型与角色模型做了关联。但是用户接口添加及返回的信息还不包含角色，所以接下来我们将对用

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第10天，点击查看活动详情 前言 改造完用户接口后，我们继续来进行角色模块的接口编写。大体上需要的接口有增删改查角色、获取角色列表等

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第11天，[点击查看活动详情](https://juejin.cn/post/7167294154827890702 "https:

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第12天，点击查看活动详情 前言 前面我们已经能够得到权限的树状结构，接下来我们就能够实现权限模块的接口。我们同样来实现一下获取菜单

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第13天，点击查看活动详情 前言 现在完成了基本的角色和权限结构。但为了让它们二者之间有“关系”，还得让它们在角色菜单表中通过rol

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第14天，点击查看活动详情 前言 上文实现了对于角色资源（权限）的获取和分配。但是还有一个功能是提供给前端所有的权限选项以便它们能够

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第15天，点击查看活动详情 前言 本系统后端的用户、角色、菜单模块已经基本完成了。但用户登录后还应获得此用户的基本信息、角色信息、菜

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第16天，点击查看活动详情 前言 至此我们后端的用户、角色、权限模块就已经都完成了，感兴趣的小伙伴还可以去扩展实现更多的模块。那么现

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第17天，点击查看活动详情 前言 接口文档有了，代理跨域、封装axios请求库的工作也做完了，接下来我们就可以对接口文档所提供的接口

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第17天，点击查看活动详情 前言 封装完了接口方法、ts类型和axios，我们接下来就要编写前端路由了。前端路由主要是编写一些静态路

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第19天，点击查看活动详情 前言 上文用前端写的路由实现了侧边栏的展示，但是除了首页、登录页及错误页面（404页面等），其它页面在后

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第20天，点击查看 前言 已经实现了router、vuex模块，并能够显示对应角色的权限菜单，接下来我们就完成登录模块看看实现的效果