王得燕——江苏省在线精品课程负责人、国家在线精品课程主讲教师、江苏省职业教育教师教学创新团队主要成员、江苏省智能车间5G应用工程研究中心主要成员。荣获国家和江苏省省级教学成果奖2项、其他教学教育类奖项6项。主持和参与国家级和江苏省省级教科研课题11项。近5年发表高水平论文6篇，申获发明专利2项、实用新型专利5项、软件著作权1项，带领学生3次获得江苏省优秀毕业设计。所在团队与华云数据技术服务有限公司合作攻关“云计算网络基础设施融合关键技术”，研究成果获2019年度江苏省机械行业协会科技进步奖一等奖（排名3）。

前言
二维码索引
任务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