本书理论内容翔实、实践步骤细致。完成本书的学习，可以拓展开发任意一款基于微服务架构的管理系统。本书共16个任务，主要内容包括前端开发环境搭建，应用Element组件设计用户管理页面，后端开发环境搭建，基于MyBatis的后端数据操作，以XML配置方式动态实现数据操作，CorsConfig前、后端跨域连接，前、后端传参对话，应用MyBatisPlus框架，Axios前、后端跨域数据交互，主界面设计，定义规范统一的返回接口Result和异常处理，JWT+ Spring Security实现基于Token的登录，菜单管理，角色管理与权限管理，创建动态菜单与动态路由及应用Echarts图表的主页看板设计。

本书适用于应用型本科及职业本科计算机类学生项目开发实战学习，同时也可以作为从事系统架构的应届毕业生和社会在职人员自学参考用书。

本书配有电子课件，使用本书作为教材的教师可登录机械工业出版社教育服务网www.cmpedu.com注册后下载。咨询电话：01088379534，微信号：jjj88379534，公众号：CMPDGJN。

前言

二维码索引

任务1前端开发环境搭建1

【任务描述】1

【任务目标】1

【素养目标】1

【关联知识】1

一、基础技术储备1

二、项目开发工具1

三、前端开发工具2

【任务实施】2

一、安装Vue基础工具2

二、构建Vue2项目并运行7

三、安装Element UI并引用组件14

【任务评价】16

【任务总结】16

【任务拓展】17

任务2应用Element组件设计用户

管理页面18

【任务描述】18

【任务目标】18

【素养目标】18

【关联知识】18

一、Container布局容器组件18

二、NavMenu导航菜单19

三、Table表格19

【任务实施】19

一、引用Element 的Container 为页面

布局19

二、引用Element的NavMenu设计左侧

导航栏21

三、引用Element 的Dropdown设计Header

顶部23

四、引用Element 的Table表格设计Main

主体内容25

五、运行项目37

【任务评价】38

【任务总结】38

【任务拓展】38

任务3后端开发环境搭建39

【任务描述】39

【任务目标】39

【素养目标】39

【关联知识】39

一、版本兼容39

二、@Controller和@RestController41

【任务实施】42

一、初始化项目42

二、添加控制器及基于thymeleaf的前端

配置并运行45

三、配置热部署50

四、同域内前、后端传值50

【任务评价】54

【任务总结】54

任务4基于MyBatis的后端数据

操作55

【任务描述】55

【任务目标】55

【素养目标】55

【关联知识】55

一、Spring Web MVC的概念55

二、后端开发三层架构的基本概念56

三、MVC和三层架构的区别和联系57

四、MyBatis概述57

五、@Mapper简介58

【任务实施】59

一、查询数据59

二、新增数据64

三、Postman的安装与使用66

四、更新数据67

五、删除数据68

【任务评价】69

【任务总结】69

任务5以XML配置方式动态实现

数据操作70

【任务描述】70

【任务目标】70

【素养目标】70

【关联知识】70

一、XML配置方式的基本概念70

二、XML配置的基本结构70

【任务实施】73

一、新建Userxml文件73

二、安装MyBatisX插件74三、完善Userxml文件75

四、修改UserMapper接口76

五、运行测试Postman77

六、applicationyml配置MyBatis78

【任务评价】79

【任务总结】79

任务6CorsConfig前、后端跨域

连接80

【任务描述】80

【任务目标】80

【素养目标】80

【关联知识】80

一、分页查询80

二、记录统计81

三、跨域概念81

【任务实施】81

一、后端实现分页查询81

二、后端获取总记录数82

三、前、后端数据跨域连接84

【任务评价】94

【任务总结】94

任务7前、后端传参对话95

【任务描述】95

【任务目标】95

【素养目标】95

【关联知识】95

一、后端添加模糊查询95

二、查询结果分页95

三、@RequestBody和@RequestParam95

【任务实施】96

一、修改后端相关类96

二、前端home页面传递姓名参数98

【任务评价】100

【任务总结】100

任务8应用MyBatisPlus框架101

【任务描述】101

【任务目标】101

【素养目标】101

【关联知识】101

一、MyBatisPlus概述101

二、BaseMapper接口102

三、ServiceImpl接口102

四、@MapperScan注解102

【任务实施】103

一、Spring Boot 配置 MyBatisPlus

框架103

二、MyBatisPlus框架实现表单数据

操作106

【任务评价】111

【任务总结】112

任务9Axios前、后端跨域数据

交互113

【任务描述】113

【任务目标】113

【素养目标】113

【关联知识】113

【任务实施】114

一、基础Axios配置并查询数据114

二、新增数据119

三、更新数据123

四、删除数据124

五、批量删除数据126

六、设置baseURL129

【任务评价】130

【任务总结】130

任务10主界面设计131

【任务描述】131

【任务目标】131

【素养目标】131

【关联知识】131

一、Vue组件131

二、Vue路由132

【任务实施】135

一、侧边导航栏优化为Asidevue

组件135

二、头部优化为Headervue组件138

三、页面main区域升级为Uservue

组件139

四、优化菜单栏142

【任务评价】146

【任务总结】147

任务11定义规范统一的返回接口

Result和异常处理148

【任务描述】148【任务目标】148

【素养目标】148

【关联知识】148

一、接口统一返回规范的定义148

二、接口的统一返回规范的重要性149

三、接口统一返回规范的必要性149

【任务实施】150

一、新建统一返回类150

二、定义Constants接口151

三、定义Result类151

四、自定义异常152

【任务评价】153

【任务总结】153

任务12JWT+Spring Security实现

基于Token的登录154

【任务描述】154

【任务目标】154

【素养目标】154

【关联知识】154

一、JWT简介154

二、JWT的构成154

三、基于Token的鉴权机制155

【任务实施】156

一、设计Login页面156

二、后端登录接口160

三、前端接口调用实现登录163

四、集成JWT并实现Token认证165

【任务评价】174

【任务总结】174

【任务拓展】175

任务13菜单管理178

【任务描述】178

【任务目标】178

【素养目标】178

【关联知识】178

一、权限菜单的概念178

二、菜单数据表的设计178

【任务实施】179

一、数据表的设计179

二、后端数据操作接口设计180

三、前端Menuvue页面设计184

四、菜单图标设计191

【任务评价】195

【任务总结】196

任务14角色管理与权限管理197

【任务描述】197

【任务目标】197

【素养目标】197

【关联知识】197

一、角色设计197

二、角色分配流程197

三、角色与权限的关系197

【任务实施】198

一、数据表设计198

二、后端数据操作接口设计201

三、前端Rolevue页面设计204

四、分配菜单209

五、用户角色设置214

六、运行项目214

【任务评价】216

【任务总结】216

任务15创建动态菜单与动态路由218

【任务描述】218

【任务目标】218

【素养目标】218

【关联知识】218

一、用户登录流程218

二、动态菜单218

三、动态路由219

四、Vue状态管理219

【任务实施】219

一、修改后端登录接口219

二、修改前端登录的login方法222

三、实现动态路由及动态菜单223

四、Vue全局状态管理226

五、运行项目228

【任务评价】231

【任务总结】231

任务16应用Echarts图表的主页

看板设计232

【任务描述】232

【任务目标】232

【素养目标】232

【关联知识】232一、Echarts简介232

二、Echarts示例233

【任务实施】237

一、后端获取数据237

二、前端呈现数据238

【任务评价】244

【任务总结】244

参考文献245