《 Spring Boot從入門(mén)到實(shí)戰(zhàn)（第2版·微課視頻版）》 課件 第12章 名片系統(tǒng)的設(shè)計(jì)與實(shí)現(xiàn)（Spring Boot+Vue.js 3+MyBatis-Plus）

第12章名片系統(tǒng)的設(shè)計(jì)與實(shí)現(xiàn)（SpringBoot+Vue.js3+MyBatis-Plus）學(xué)習(xí)目的與要求本章以名片管理系統(tǒng)的設(shè)計(jì)與實(shí)現(xiàn)為綜合案例，講述如何使用SpringBoot+Vue.js3+MyBatis-Plus開(kāi)發(fā)一個(gè)前后端分離的應(yīng)用程序。通過(guò)本章的學(xué)習(xí)，掌握基于SpringBoot+Vue.js3+MyBatis-Plus的前后端分離的應(yīng)用程序的開(kāi)發(fā)流程、方法以及技術(shù)?！禨pringBoot從入門(mén)到實(shí)戰(zhàn)（第2版·微課視頻版）》陳恒

主編，清華大學(xué)出版社，2024

目錄12.1系統(tǒng)設(shè)計(jì)12.2數(shù)據(jù)庫(kù)設(shè)計(jì)12.3使用IntelliJIDEA構(gòu)建后端系統(tǒng)12.4使用VueCLI構(gòu)建前端系統(tǒng)12.5測(cè)試運(yùn)行《SpringBoot從入門(mén)到實(shí)戰(zhàn)（第2版·微課視頻版）》陳恒

主編，清華大學(xué)出版社，2024

12.1.1系統(tǒng)功能需求名片管理系統(tǒng)是針對(duì)注冊(cè)用戶(hù)使用的系統(tǒng)。系統(tǒng)提供的功能如下：1．非注冊(cè)用戶(hù)可以注冊(cè)為注冊(cè)用戶(hù)。2．成功注冊(cè)的用戶(hù)，可以登錄系統(tǒng)。3．成功登錄的用戶(hù)，可以添加、修改、刪除以及瀏覽自己客戶(hù)的名片信息。4．成功登錄的用戶(hù)，可以修改密碼?！禨pringBoot從入門(mén)到實(shí)戰(zhàn)（第2版·微課視頻版）》陳恒

主編，清華大學(xué)出版社，2024

12.1.2系統(tǒng)模塊劃分《SpringBoot從入門(mén)到實(shí)戰(zhàn)（第2版·微課視頻版）》陳恒

主編，清華大學(xué)出版社，2024

名片管理系統(tǒng)名片管理安全退出添加名片刪除名片修改名片查詢(xún)名片修改密碼目錄12.1系統(tǒng)設(shè)計(jì)12.2數(shù)據(jù)庫(kù)設(shè)計(jì)12.3使用IntelliJIDEA構(gòu)建后端系統(tǒng)12.4使用VueCLI構(gòu)建前端系統(tǒng)12.5測(cè)試運(yùn)行《SpringBoot從入門(mén)到實(shí)戰(zhàn)（第2版·微課視頻版）》陳恒

主編，清華大學(xué)出版社，2024

12.2.1數(shù)據(jù)庫(kù)概念結(jié)構(gòu)設(shè)計(jì)《SpringBoot從入門(mén)到實(shí)戰(zhàn)（第2版·微課視頻版）》陳恒

主編，清華大學(xué)出版社，2024

12.2.2數(shù)據(jù)庫(kù)邏輯結(jié)構(gòu)設(shè)計(jì)《SpringBoot從入門(mén)到實(shí)戰(zhàn)（第2版·微課視頻版）》陳恒

主編，清華大學(xué)出版社，2024

字

段含義類(lèi)

型長(zhǎng)

度是否為空id編號(hào)（PK）int0nouname用戶(hù)名varchar50noupwd密碼varchar32no字

段含義類(lèi)

型長(zhǎng)

度是否為空id編號(hào)（PK）int0noname名稱(chēng)varchar50notelephone電話(huà)varchar20noemail郵箱varchar50

company單位varchar50

post職務(wù)varchar50

address地址varchar50

logo_name圖片varchar30

user_id所屬用戶(hù)int0no目錄12.1系統(tǒng)設(shè)計(jì)12.2數(shù)據(jù)庫(kù)設(shè)計(jì)12.3使用IntelliJIDEA構(gòu)建后端系統(tǒng)12.4使用VueCLI構(gòu)建前端系統(tǒng)12.5測(cè)試運(yùn)行《SpringBoot從入門(mén)到實(shí)戰(zhàn)（第2版·微課視頻版）》陳恒

主編，清華大學(xué)出版社，2024

12.3.1創(chuàng)建SpringBootWeb應(yīng)用使用IntelliJIDEA創(chuàng)建基于Lombok、SpringDataRedis、Springcacheabstraction以及SpringWeb依賴(lài)的SpringBootWeb應(yīng)用ch12。《SpringBoot從入門(mén)到實(shí)戰(zhàn)（第2版·微課視頻版）》陳恒

主編，清華大學(xué)出版社，2024

12.3.2修改pom.xml修改后端應(yīng)用ch12的pom.xml文件，添加MySQL連接器依賴(lài)、MyBatis-Plus依賴(lài)以及Java工具類(lèi)Hutool依賴(lài)《SpringBoot從入門(mén)到實(shí)戰(zhàn)（第2版·微課視頻版）》陳恒

主編，清華大學(xué)出版社，2024

12.3.3配置數(shù)據(jù)源等信息server.servlet.context-path=/cardmisspring.servlet.multipart.location=D:/data/apps/tempserver.port=8443#數(shù)據(jù)庫(kù)地址spring.datasource.url=jdbc:mysql://localhost:3306/ch12?useUnicode=true&characterEncoding=UTF-8&allowMultiQueries=true&serverTimezone=GMT%2B8#數(shù)據(jù)庫(kù)用戶(hù)名spring.datasource.username=root#數(shù)據(jù)庫(kù)密碼spring.datasource.password=root#數(shù)據(jù)庫(kù)驅(qū)動(dòng)spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver#設(shè)置包別名（在Mapper映射文件中直接使用實(shí)體類(lèi)名）mybatis-plus.type-aliases-package=com.ch.ch12.entity#在控制臺(tái)輸出SQL語(yǔ)句日志.ch.ch12.mapper=debug#讓控制器輸出的JSON字符串格式更美觀spring.jackson.serialization.indent-output=true《SpringBoot從入門(mén)到實(shí)戰(zhàn)（第2版·微課視頻版）》陳恒

主編，清華大學(xué)出版社，2024

12.3.4創(chuàng)建持久化實(shí)體類(lèi)根據(jù)名片管理系統(tǒng)功能可知，該系統(tǒng)共有兩個(gè)實(shí)體：用戶(hù)（User）和卡片（Card）。因此，需要在應(yīng)用ch12的src/main/java目錄下，創(chuàng)建com.ch.ch12.entity包，并在包中創(chuàng)建User和Card實(shí)體類(lèi)。《SpringBoot從入門(mén)到實(shí)戰(zhàn)（第2版·微課視頻版）》陳恒

主編，清華大學(xué)出版社，2024

12.3.5創(chuàng)建Mapper接口在后端應(yīng)用ch12中，使用MyBatis-Plus進(jìn)行數(shù)據(jù)訪問(wèn)。因此，在應(yīng)用ch12的src/main/java目錄下，創(chuàng)建com.ch.ch12.mapper包，在包中針對(duì)兩個(gè)實(shí)體類(lèi)創(chuàng)建數(shù)據(jù)訪問(wèn)接口UserMapper和CardMapper，并分別繼承BaseMapper接口。《SpringBoot從入門(mén)到實(shí)戰(zhàn)（第2版·微課視頻版）》陳恒

主編，清華大學(xué)出版社，2024

12.3.6創(chuàng)建業(yè)務(wù)層在Spring框架中，提倡使用接口。因此，在后端應(yīng)用ch12的業(yè)務(wù)層中，涉及Service接口和Service實(shí)現(xiàn)類(lèi)。Service接口繼承IService接口，Service實(shí)現(xiàn)類(lèi)繼承ServiceImpl類(lèi)。在應(yīng)用ch12的src/main/java目錄下，創(chuàng)建com.ch.ch12.service包，并在包中創(chuàng)建Service接口（CardService與UserService）和實(shí)現(xiàn)類(lèi)（CardServiceImpl和UserServiceImpl）。《SpringBoot從入門(mén)到實(shí)戰(zhàn)（第2版·微課視頻版）》陳恒

主編，清華大學(xué)出版社，2024

12.3.7創(chuàng)建控制器層在本章前后端系統(tǒng)中，使用Hutool的JWTUtil進(jìn)行Token簽名，并使用攔截器判斷是否簽名，在不需要簽名的控制器方法上標(biāo)注自定義注解@AuthIgrone。在應(yīng)用ch12的src/main/java目錄下，創(chuàng)建com.ch.ch12.controller包，并在包中創(chuàng)建UserController和CardController控制器?！禨pringBoot從入門(mén)到實(shí)戰(zhàn)（第2版·微課視頻版）》陳恒

主編，清華大學(xué)出版社，2024

12.3.8創(chuàng)建跨域響應(yīng)頭設(shè)置過(guò)濾器跨域訪問(wèn)涉及請(qǐng)求域名、請(qǐng)求方式、發(fā)送的內(nèi)容類(lèi)型以及攜帶證書(shū)式訪問(wèn)等問(wèn)題。在后端系統(tǒng)中，將這些設(shè)置放在應(yīng)用程序的主類(lèi)中完成。//跨域設(shè)置

privateCorsConfigurationcorsConfig(){CorsConfigurationcorsConfiguration=newCorsConfiguration();//允許跨域請(qǐng)求的域名

corsConfiguration.addAllowedOrigin("*");//允許發(fā)送的內(nèi)容類(lèi)型

corsConfiguration.addAllowedHeader("*");//跨域請(qǐng)求允許的請(qǐng)求方式

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

}《SpringBoot從入門(mén)到實(shí)戰(zhàn)（第2版·微課視頻版）》陳恒

主編，清華大學(xué)出版社，2024

12.3.9創(chuàng)建工具類(lèi)在后端系統(tǒng)ch12中，使用工具類(lèi)MyUtil的getNewFileName方法對(duì)文件進(jìn)行重命名，使用工具類(lèi)MD5Util的MD5方法對(duì)用戶(hù)密碼進(jìn)行加密。工具類(lèi)MyUtil和MD5Util的代碼略，請(qǐng)讀者參見(jiàn)本書(shū)提供的源程序ch12?！禨pringBoot從入門(mén)到實(shí)戰(zhàn)（第2版·微課視頻版）》陳恒

主編，清華大學(xué)出版社，2024

12.3.10MyBatis-Plus分頁(yè)插件、Redis以及Token簽名配置使用MyBatis-Plus訪問(wèn)數(shù)據(jù)庫(kù)時(shí)，需要配置分頁(yè)插件MybatisPlusInterceptor才能使用MyBatis-Plus的分頁(yè)功能。因此，在后端系統(tǒng)ch12中，需要配置分頁(yè)插件MybatisPlusInterceptor，見(jiàn)mon.config包中的MybatisPlusConfig配置類(lèi)。在后端系統(tǒng)ch12中，使用Redis及SpringCache緩存技術(shù)進(jìn)行簽名數(shù)據(jù)的存儲(chǔ)。Redis配置類(lèi)RedisConfig和Redis工具類(lèi)RedisUtil，分別位于mon.config和mon.sercurity.utils包中。在后端系統(tǒng)ch12中，使用Hutool的JWTUtil進(jìn)行Token簽名，并使用攔截器AuthInterceptor判斷是否簽名，在不需要簽名的控制器方法上標(biāo)注自定義注解@AuthIgrone。JWTUtil、AuthInterceptor以及AuthIgrone的相關(guān)類(lèi)位于mon.sercurity包中。《SpringBoot從入門(mén)到實(shí)戰(zhàn)（第2版·微課視頻版）》陳恒

主編，清華大學(xué)出版社，2024

目錄12.1系統(tǒng)設(shè)計(jì)12.2數(shù)據(jù)庫(kù)設(shè)計(jì)12.3使用IntelliJIDEA構(gòu)建后端系統(tǒng)12.4使用VueCLI構(gòu)建前端系統(tǒng)12.5測(cè)試運(yùn)行《SpringBoot從入門(mén)到實(shí)戰(zhàn)（第2版·微課視頻版）》陳恒

主編，清華大學(xué)出版社，2024

12.4.1安裝Node.js利用VueCLI（Vue腳手架）搭建名片管理的前端系統(tǒng)cardmis-vue。因?yàn)樾枰褂胣pm安裝VueCLI，而npm是集成在Node.js中的，所以需要首先安裝Node.js。通過(guò)訪問(wèn)官網(wǎng)/en/即可下載對(duì)應(yīng)版本的Node.js，本書(shū)下載的是“16.15.1LTS”。下載完成后運(yùn)行安裝包node-v16.15.1-x64.msi，一直下一步即可完成安裝。然后在命令行窗口中輸入命令node-v，檢查是否安裝成功。出現(xiàn)了Node.js的版本號(hào)，說(shuō)明Node.js已安裝成功。同時(shí)，npm包管理器也已經(jīng)安裝成功，可以輸入npm-v查看版本號(hào)。最后，輸入npm-ginstallnpm命令，可將npm更新至最新版本?！禨pringBoot從入門(mén)到實(shí)戰(zhàn)（第2版·微課視頻版）》陳恒

主編，清華大學(xué)出版社，2024

12.4.2安裝VueCLI并構(gòu)建前端項(xiàng)目cardmis-vue1．全局安裝VueCLI打開(kāi)cmd命令行窗口，輸入命令npminstall-g@vue/cli全局安裝Vue腳手架，輸入命令vue--version查看版本（測(cè)試是否安裝成功）。如果需要升級(jí)全局的VueCLI，在cmd命令行窗口運(yùn)行npmupdate-g@vue/cli命令即可。2．打開(kāi)圖形化界面安裝成功后，在命令行窗口，繼續(xù)輸入命令vueui打開(kāi)一個(gè)瀏覽器窗口，并以圖形化界面引導(dǎo)至項(xiàng)目創(chuàng)建的流程?！禨pringBoot從入門(mén)到實(shí)戰(zhàn)（第2版·微課視頻版）》陳恒

主編，清華大學(xué)出版社，2024

3．創(chuàng)建項(xiàng)目《SpringBoot從入門(mén)到實(shí)戰(zhàn)（第2版·微課視頻版）》陳恒

主編，清華大學(xué)出版社，2024

3．創(chuàng)建項(xiàng)目《SpringBoot從入門(mén)到實(shí)戰(zhàn)（第2版·微課視頻版）》陳恒

主編，清華大學(xué)出版社，2024

12.4.3使用VSCode打開(kāi)項(xiàng)目可通過(guò)“”地址下載VSCode，本書(shū)使用的安裝文件是VSCodeUserSetup-x64-1.52.1.exe（雙擊即可安裝）。VSCode中許多插件需要我們安裝，例如，我們安裝Vue.js的插件Vetur。打開(kāi)VSCode，點(diǎn)擊左側(cè)最下面一個(gè)圖標(biāo)，按照?qǐng)D12.9所示的步驟安裝即可?！禨pringBoot從入門(mén)到實(shí)戰(zhàn)（第2版·微課視頻版）》陳恒

主編，清華大學(xué)出版社，2024

12.4.3使用VSCode打開(kāi)項(xiàng)目使用VSCode打開(kāi)（File—>OpenFolder，選擇項(xiàng)目目錄）第12.4.2節(jié)創(chuàng)建的前端項(xiàng)目cardmis-vue。打開(kāi)后，在Terminal終端輸入npmrunserve命令啟動(dòng)服務(wù)。在瀏覽器地址欄中，訪問(wèn)http://localhost:8080/即可運(yùn)行項(xiàng)目cardmis-vue?！禨pringBoot從入門(mén)到實(shí)戰(zhàn)（第2版·微課視頻版）》陳恒

主編，清華大學(xué)出版社，2024

12.4.4安裝ElementPlus和@element-plus/icons-vue首先，使用VSCode打開(kāi)項(xiàng)目cardmis-vue，并進(jìn)入Terminal終端，依次執(zhí)行“npminstallelement-plus--save”和“npminstall@element-plus/icons-vue”命令，進(jìn)行ElementPlus和@element-plus/icons-vue的安裝。然后，在cardmis-vue的main.js文件中，完整引入ElementPlus，并注冊(cè)圖標(biāo)組件ElementPlusIconsVue?！禨pringBoot從入門(mén)到實(shí)戰(zhàn)（第2版·微課視頻版）》陳恒

主編，清華大學(xué)出版社，2024

12.4.5安裝Axios模塊并設(shè)置跨域訪問(wèn)要求Axios是一個(gè)基于promise

的網(wǎng)絡(luò)請(qǐng)求庫(kù)，可以用于瀏覽器和node.js。Axios相比于原生的XMLHttpRequest對(duì)象來(lái)說(shuō)簡(jiǎn)單易用，相比于jQuery，Axios包尺寸小且提供了易于擴(kuò)展的接口，是專(zhuān)注于網(wǎng)絡(luò)請(qǐng)求的庫(kù)。在cardmis-vue前端應(yīng)用中，使用Axios與后端程序進(jìn)行Web數(shù)據(jù)交互。因此，需要使用VSCode打開(kāi)項(xiàng)目cardmis-vue，并進(jìn)入Terminal終端，執(zhí)行“npminstall--saveaxios”命令安裝該模塊。安裝成功后，在main.js文件中，全局注冊(cè)Axios實(shí)現(xiàn)跨域訪問(wèn)?！禨pringBoot從入門(mén)到實(shí)戰(zhàn)（第2版·微課視頻版）》陳恒

主編，清華大學(xué)出版社，2024

12.4.6開(kāi)發(fā)前端頁(yè)面《SpringBoot從入門(mén)到實(shí)戰(zhàn)（第2版·微課視頻版）》陳恒

主編，清華大學(xué)出版社，2024

3．主界面組件成功注冊(cè)的用戶(hù)，可通過(guò)登錄組件登錄名片管理系統(tǒng)。登錄成功后，進(jìn)入HomeView.vue主界面組件。右鍵src/views文件夾，新建一個(gè)HomeView.vue，即主界面組件。在主界面組件中，使用兩個(gè)子組件HeaderCom.vue和SidebarCom.vue實(shí)現(xiàn)導(dǎo)航功能?！禨pringBoot從入門(mén)到實(shí)戰(zhàn)（第2版·微課視頻版）》陳恒

主編，清華大學(xué)出版社，2024

4．名片管理組件成功登錄的用戶(hù)，進(jìn)入主界面，在主界面右側(cè)中央位置顯示名片管理組件，包括新增、修改、查詢(xún)、刪除名片等功能。右鍵src/views文件夾，新建一個(gè)CardManageView.vue，即名片管理組件。本章前后端系統(tǒng)使用Token簽名進(jìn)行權(quán)限認(rèn)證，也就是說(shuō)只有成功登錄的用戶(hù)，才可以管理自己的名片。因此，在名片