《 Spring Boot从入门到实战（第2版·微课视频版）》 课件 第12章 名片系统的设计与实现（Spring Boot+Vue.js 3+MyBatis-Plus）

第12章名片系统的设计与实现（SpringBoot+Vue.js3+MyBatis-Plus）学习目的与要求本章以名片管理系统的设计与实现为综合案例，讲述如何使用SpringBoot+Vue.js3+MyBatis-Plus开发一个前后端分离的应用程序。通过本章的学习，掌握基于SpringBoot+Vue.js3+MyBatis-Plus的前后端分离的应用程序的开发流程、方法以及技术。《SpringBoot从入门到实战（第2版·微课视频版）》陈恒

主编，清华大学出版社，2024

目录12.1系统设计12.2数据库设计12.3使用IntelliJIDEA构建后端系统12.4使用VueCLI构建前端系统12.5测试运行《SpringBoot从入门到实战（第2版·微课视频版）》陈恒

主编，清华大学出版社，2024

12.1.1系统功能需求名片管理系统是针对注册用户使用的系统。系统提供的功能如下：1．非注册用户可以注册为注册用户。2．成功注册的用户，可以登录系统。3．成功登录的用户，可以添加、修改、删除以及浏览自己客户的名片信息。4．成功登录的用户，可以修改密码。《SpringBoot从入门到实战（第2版·微课视频版）》陈恒

主编，清华大学出版社，2024

12.1.2系统模块划分《SpringBoot从入门到实战（第2版·微课视频版）》陈恒

主编，清华大学出版社，2024

名片管理系统名片管理安全退出添加名片删除名片修改名片查询名片修改密码目录12.1系统设计12.2数据库设计12.3使用IntelliJIDEA构建后端系统12.4使用VueCLI构建前端系统12.5测试运行《SpringBoot从入门到实战（第2版·微课视频版）》陈恒

主编，清华大学出版社，2024

12.2.1数据库概念结构设计《SpringBoot从入门到实战（第2版·微课视频版）》陈恒

主编，清华大学出版社，2024

12.2.2数据库逻辑结构设计《SpringBoot从入门到实战（第2版·微课视频版）》陈恒

主编，清华大学出版社，2024

字

段含义类

型长

度是否为空id编号（PK）int0nouname用户名varchar50noupwd密码varchar32no字

段含义类

型长

度是否为空id编号（PK）int0noname名称varchar50notelephone电话varchar20noemail邮箱varchar50

company单位varchar50

post职务varchar50

address地址varchar50

logo_name图片varchar30

user_id所属用户int0no目录12.1系统设计12.2数据库设计12.3使用IntelliJIDEA构建后端系统12.4使用VueCLI构建前端系统12.5测试运行《SpringBoot从入门到实战（第2版·微课视频版）》陈恒

主编，清华大学出版社，2024

12.3.1创建SpringBootWeb应用使用IntelliJIDEA创建基于Lombok、SpringDataRedis、Springcacheabstraction以及SpringWeb依赖的SpringBootWeb应用ch12。《SpringBoot从入门到实战（第2版·微课视频版）》陈恒

主编，清华大学出版社，2024

12.3.2修改pom.xml修改后端应用ch12的pom.xml文件，添加MySQL连接器依赖、MyBatis-Plus依赖以及Java工具类Hutool依赖《SpringBoot从入门到实战（第2版·微课视频版）》陈恒

主编，清华大学出版社，2024

12.3.3配置数据源等信息server.servlet.context-path=/cardmisspring.servlet.multipart.location=D:/data/apps/tempserver.port=8443#数据库地址spring.datasource.url=jdbc:mysql://localhost:3306/ch12?useUnicode=true&characterEncoding=UTF-8&allowMultiQueries=true&serverTimezone=GMT%2B8#数据库用户名spring.datasource.username=root#数据库密码spring.datasource.password=root#数据库驱动spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver#设置包别名（在Mapper映射文件中直接使用实体类名）mybatis-plus.type-aliases-package=com.ch.ch12.entity#在控制台输出SQL语句日志.ch.ch12.mapper=debug#让控制器输出的JSON字符串格式更美观spring.jackson.serialization.indent-output=true《SpringBoot从入门到实战（第2版·微课视频版）》陈恒

主编，清华大学出版社，2024

12.3.4创建持久化实体类根据名片管理系统功能可知，该系统共有两个实体：用户（User）和卡片（Card）。因此，需要在应用ch12的src/main/java目录下，创建com.ch.ch12.entity包，并在包中创建User和Card实体类。《SpringBoot从入门到实战（第2版·微课视频版）》陈恒

主编，清华大学出版社，2024

12.3.5创建Mapper接口在后端应用ch12中，使用MyBatis-Plus进行数据访问。因此，在应用ch12的src/main/java目录下，创建com.ch.ch12.mapper包，在包中针对两个实体类创建数据访问接口UserMapper和CardMapper，并分别继承BaseMapper接口。《SpringBoot从入门到实战（第2版·微课视频版）》陈恒

主编，清华大学出版社，2024

12.3.6创建业务层在Spring框架中，提倡使用接口。因此，在后端应用ch12的业务层中，涉及Service接口和Service实现类。Service接口继承IService接口，Service实现类继承ServiceImpl类。在应用ch12的src/main/java目录下，创建com.ch.ch12.service包，并在包中创建Service接口（CardService与UserService）和实现类（CardServiceImpl和UserServiceImpl）。《SpringBoot从入门到实战（第2版·微课视频版）》陈恒

主编，清华大学出版社，2024

12.3.7创建控制器层在本章前后端系统中，使用Hutool的JWTUtil进行Token签名，并使用拦截器判断是否签名，在不需要签名的控制器方法上标注自定义注解@AuthIgrone。在应用ch12的src/main/java目录下，创建com.ch.ch12.controller包，并在包中创建UserController和CardController控制器。《SpringBoot从入门到实战（第2版·微课视频版）》陈恒

主编，清华大学出版社，2024

12.3.8创建跨域响应头设置过滤器跨域访问涉及请求域名、请求方式、发送的内容类型以及携带证书式访问等问题。在后端系统中，将这些设置放在应用程序的主类中完成。//跨域设置

privateCorsConfigurationcorsConfig(){CorsConfigurationcorsConfiguration=newCorsConfiguration();//允许跨域请求的域名

corsConfiguration.addAllowedOrigin("*");//允许发送的内容类型

corsConfiguration.addAllowedHeader("*");//跨域请求允许的请求方式

corsConfiguration.addAllowedMethod("*");corsConfiguration.setMaxAge(3600L);returncorsConfiguration;

}《SpringBoot从入门到实战（第2版·微课视频版）》陈恒

主编，清华大学出版社，2024

12.3.9创建工具类在后端系统ch12中，使用工具类MyUtil的getNewFileName方法对文件进行重命名，使用工具类MD5Util的MD5方法对用户密码进行加密。工具类MyUtil和MD5Util的代码略，请读者参见本书提供的源程序ch12。《SpringBoot从入门到实战（第2版·微课视频版）》陈恒

主编，清华大学出版社，2024

12.3.10MyBatis-Plus分页插件、Redis以及Token签名配置使用MyBatis-Plus访问数据库时，需要配置分页插件MybatisPlusInterceptor才能使用MyBatis-Plus的分页功能。因此，在后端系统ch12中，需要配置分页插件MybatisPlusInterceptor，见mon.config包中的MybatisPlusConfig配置类。在后端系统ch12中，使用Redis及SpringCache缓存技术进行签名数据的存储。Redis配置类RedisConfig和Redis工具类RedisUtil，分别位于mon.config和mon.sercurity.utils包中。在后端系统ch12中，使用Hutool的JWTUtil进行Token签名，并使用拦截器AuthInterceptor判断是否签名，在不需要签名的控制器方法上标注自定义注解@AuthIgrone。JWTUtil、AuthInterceptor以及AuthIgrone的相关类位于mon.sercurity包中。《SpringBoot从入门到实战（第2版·微课视频版）》陈恒

主编，清华大学出版社，2024

目录12.1系统设计12.2数据库设计12.3使用IntelliJIDEA构建后端系统12.4使用VueCLI构建前端系统12.5测试运行《SpringBoot从入门到实战（第2版·微课视频版）》陈恒

主编，清华大学出版社，2024

12.4.1安装Node.js利用VueCLI（Vue脚手架）搭建名片管理的前端系统cardmis-vue。因为需要使用npm安装VueCLI，而npm是集成在Node.js中的，所以需要首先安装Node.js。通过访问官网/en/即可下载对应版本的Node.js，本书下载的是“16.15.1LTS”。下载完成后运行安装包node-v16.15.1-x64.msi，一直下一步即可完成安装。然后在命令行窗口中输入命令node-v，检查是否安装成功。出现了Node.js的版本号，说明Node.js已安装成功。同时，npm包管理器也已经安装成功，可以输入npm-v查看版本号。最后，输入npm-ginstallnpm命令，可将npm更新至最新版本。《SpringBoot从入门到实战（第2版·微课视频版）》陈恒

主编，清华大学出版社，2024

12.4.2安装VueCLI并构建前端项目cardmis-vue1．全局安装VueCLI打开cmd命令行窗口，输入命令npminstall-g@vue/cli全局安装Vue脚手架，输入命令vue--version查看版本（测试是否安装成功）。如果需要升级全局的VueCLI，在cmd命令行窗口运行npmupdate-g@vue/cli命令即可。2．打开图形化界面安装成功后，在命令行窗口，继续输入命令vueui打开一个浏览器窗口，并以图形化界面引导至项目创建的流程。《SpringBoot从入门到实战（第2版·微课视频版）》陈恒

主编，清华大学出版社，2024

3．创建项目《SpringBoot从入门到实战（第2版·微课视频版）》陈恒

主编，清华大学出版社，2024

3．创建项目《SpringBoot从入门到实战（第2版·微课视频版）》陈恒

主编，清华大学出版社，2024

12.4.3使用VSCode打开项目可通过“”地址下载VSCode，本书使用的安装文件是VSCodeUserSetup-x64-1.52.1.exe（双击即可安装）。VSCode中许多插件需要我们安装，例如，我们安装Vue.js的插件Vetur。打开VSCode，点击左侧最下面一个图标，按照图12.9所示的步骤安装即可。《SpringBoot从入门到实战（第2版·微课视频版）》陈恒

主编，清华大学出版社，2024

12.4.3使用VSCode打开项目使用VSCode打开（File—>OpenFolder，选择项目目录）第12.4.2节创建的前端项目cardmis-vue。打开后，在Terminal终端输入npmrunserve命令启动服务。在浏览器地址栏中，访问http://localhost:8080/即可运行项目cardmis-vue。《SpringBoot从入门到实战（第2版·微课视频版）》陈恒

主编，清华大学出版社，2024

12.4.4安装ElementPlus和@element-plus/icons-vue首先，使用VSCode打开项目cardmis-vue，并进入Terminal终端，依次执行“npminstallelement-plus--save”和“npminstall@element-plus/icons-vue”命令，进行ElementPlus和@element-plus/icons-vue的安装。然后，在cardmis-vue的main.js文件中，完整引入ElementPlus，并注册图标组件ElementPlusIconsVue。《SpringBoot从入门到实战（第2版·微课视频版）》陈恒

主编，清华大学出版社，2024

12.4.5安装Axios模块并设置跨域访问要求Axios是一个基于promise

的网络请求库，可以用于浏览器和node.js。Axios相比于原生的XMLHttpRequest对象来说简单易用，相比于jQuery，Axios包尺寸小且提供了易于扩展的接口，是专注于网络请求的库。在cardmis-vue前端应用中，使用Axios与后端程序进行Web数据交互。因此，需要使用VSCode打开项目cardmis-vue，并进入Terminal终端，执行“npminstall--saveaxios”命令安装该模块。安装成功后，在main.js文件中，全局注册Axios实现跨域访问。《SpringBoot从入门到实战（第2版·微课视频版）》陈恒

主编，清华大学出版社，2024

12.4.6开发前端页面《SpringBoot从入门到实战（第2版·微课视频版）》陈恒

主编，清华大学出版社，2024

3．主界面组件成功注册的用户，可通过登录组件登录名片管理系统。登录成功后，进入HomeView.vue主界面组件。右键src/views文件夹，新建一个HomeView.vue，即主界面组件。在主界面组件中，使用两个子组件HeaderCom.vue和SidebarCom.vue实现导航功能。《SpringBoot从入门到实战（第2版·微课视频版）》陈恒

主编，清华大学出版社，2024

4．名片管理组件成功登录的用户，进入主界面，在主界面右侧中央位置显示名片管理组件，包括新增、修改、查询、删除名片等功能。右键src/views文件夹，新建一个CardManageView.vue，即名片管理组件。本章前后端系统使用Token签名进行权限认证，也就是说只有成功登录的用户，才可以管理自己的名片。因此，在名片