第12章 電商平臺(tái)后臺(tái)管理系統(tǒng)

第12章電商平臺(tái)后臺(tái)管理系統(tǒng)本章使用SpringBoot+Vue+ElementPlus框架，講解一個(gè)前后端分離的綜合案例——電商平臺(tái)后臺(tái)管理系統(tǒng)的實(shí)現(xiàn)過程。第12章電商平臺(tái)后臺(tái)管理系統(tǒng)12.1

需求與系統(tǒng)分析12.2

數(shù)據(jù)庫(kù)設(shè)計(jì)12.3

環(huán)境搭建

12.3.1

后端程序目錄結(jié)構(gòu)

12.3.2

編輯SpringBoot配置文件

12.3.3

創(chuàng)建Mybatis配置文件

12.3.4

集成JWT實(shí)現(xiàn)Token驗(yàn)證

12.3.5

配置跨域12.4創(chuàng)建實(shí)體類212.5

創(chuàng)建Mapper接口及映射文件12.6創(chuàng)建Service接口及實(shí)現(xiàn)類12.7創(chuàng)建Controller控制器類12.8

前端程序目錄結(jié)構(gòu)12.9

登錄與管理首頁(yè)面12.10

商品管理12.11

訂單管理12.12

用戶權(quán)限管理12.1需求與系統(tǒng)分析電商平臺(tái)后臺(tái)管理系統(tǒng)用于管理員登錄系統(tǒng)后，對(duì)商品信息、商品類別、訂單信息、用戶信息和權(quán)限進(jìn)行管理。在這個(gè)系統(tǒng)中，管理員用例圖如右圖所示。根據(jù)需求分析，管理員擁有如下功能權(quán)限。(1)商品管理，包括添加商品、修改商品、查詢商品。(2)商品類別管理，包括添加商品類別、修改商品類別、查詢商品類別。(3)訂單管理，包括創(chuàng)建訂單、查詢訂單、刪除訂單、查看訂單明細(xì)。(4)用戶權(quán)限管理，包括前臺(tái)用戶管理、后臺(tái)用戶管理、角色管理。其中，前臺(tái)用戶管理包括查詢前臺(tái)用戶、修改前臺(tái)用戶和刪除前臺(tái)用戶；后臺(tái)用戶管理包括查詢后臺(tái)用戶、修改后臺(tái)用戶、刪除后臺(tái)用戶和分配角色；角色管理包括添加角色、修改角色、刪除角色和設(shè)置權(quán)限。312.1需求與系統(tǒng)分析根據(jù)上述分析，可以得到系統(tǒng)的功能模塊結(jié)構(gòu)，如下圖所示。412.2數(shù)據(jù)庫(kù)設(shè)計(jì)根據(jù)系統(tǒng)需求，創(chuàng)建名稱為eshop的數(shù)據(jù)庫(kù)，創(chuàng)建10張數(shù)據(jù)表，如下所示。(1)客戶信息表user_info，用于記錄前臺(tái)客戶基本信息。(2)管理員信息表admin_info，用于記錄管理員基本信息。(3)商品類別表category，用于記錄商品類別。(4)商品信息表goods_info，用于記錄商品信息。(5)訂單信息表order_info，用于記錄訂單主要信息。(6)訂單明細(xì)表order_detail，用于記錄訂單詳細(xì)信息。(7)系統(tǒng)功能表functions，用于記錄系統(tǒng)功能信息。(8)角色表role，用于記錄系統(tǒng)角色信息。(9)角色功能表role_functions，用于記錄各個(gè)角色擁有的系統(tǒng)功能。(10)管理員角色表admin_role，用于記錄各個(gè)管理員對(duì)應(yīng)的角色。512.3環(huán)境搭建12.3.1后端程序目錄結(jié)構(gòu)后端程序eshop的目錄結(jié)構(gòu)如右圖所示。com.my.eshop.controller包用于存放控制器類，com.my.eshop.service包用于存放業(yè)務(wù)邏輯層接口，com.my.eshop.service.impl包用于存放業(yè)務(wù)邏輯層接口的實(shí)現(xiàn)類，com.my.eshop.dao包用于存放Mapper接口，com.my.eshop.pojo包用于存放實(shí)體類，com.my.eshop.config包用于存放配置類，erceptor包用于存放攔截器類，com.my.eshop.utils包用于存放工具類。在main/resources/mapper文件夾中，存放了Mapper接口的映射文件。在main\resources\config文件夾中，存放了Mybatis的配置文件mybatis-config.xml。612.3環(huán)境搭建12.3.2編輯SpringBoot配置文件在perties文件中，配置了端口號(hào)。server.port=8888在application.yml文件中，配置了對(duì)Mybatis映射文件和配置文件的引用，配置了MySQL數(shù)據(jù)源，配置了Redis。712.3環(huán)境搭建12.3.3創(chuàng)建Mybatis配置文件在Mybatis配置文件mybatis-config.xml中，通過<settings>和<setting>標(biāo)簽，將設(shè)置項(xiàng)mapUnderscoreToCamelCase的值指定為true，開啟駝峰命名規(guī)則映射；通過<typeAliases>和<package>標(biāo)簽，為SQL映射文件中的輸入和輸出參數(shù)設(shè)置類型別名，<package>標(biāo)簽配置了一個(gè)包名，Mybatis會(huì)掃描該包下的所有類，并注冊(cè)一個(gè)別名，別名是類名或者是類名第一個(gè)字母小名的類名。812.3環(huán)境搭建12.3.4集成JWT實(shí)現(xiàn)Token驗(yàn)證用戶登錄后，每個(gè)請(qǐng)求中都會(huì)包含JWT，用來驗(yàn)證用戶身份，并對(duì)路由、服務(wù)和資源的訪問權(quán)限進(jìn)行驗(yàn)證。SpringBoot集成JWT的主要步驟如下。(1)引入JWT依賴(2)自定義PassToken和UserLoginToken注解其中，PassToken用于跳過驗(yàn)證，UserLoginToken用于標(biāo)注Controller中需要登錄才能進(jìn)行操作。(3)創(chuàng)建Token的生成方法在com.my.eshop.service包中，創(chuàng)建接口TokenService，并添加getToken方法。在com.my.eshop.service.impl包中，創(chuàng)建接口TokenService的實(shí)現(xiàn)類TokenServiceImpl，實(shí)現(xiàn)getToken方法。912.3環(huán)境搭建12.3.4集成JWT實(shí)現(xiàn)Token驗(yàn)證(4)創(chuàng)建攔截器獲取并驗(yàn)證Token在erceptor包中，創(chuàng)建攔截器類AuthenticationInterceptor。(5)配置攔截器在com.my.eshop.config包中，創(chuàng)建配置類InterceptorConfig。1012.3環(huán)境搭建12.3.5配置跨域?yàn)榱私鉀Q跨域問題，在com.my.eshop.config包中，創(chuàng)建了MyWebMvcConfig類。1112.4創(chuàng)建實(shí)體類在com.my.eshop.pojo包中，依次創(chuàng)建實(shí)體類UserInfo、AdminInfo、Category、GoodsInfo、OrderInfo、OrderDetail、Functions、Role和RoleFunctions。創(chuàng)建輔助類Pager和TreeNode，Pager類用于封裝分頁(yè)信息，TreeNode類用于封裝樹形控件的節(jié)點(diǎn)信息。1212.5創(chuàng)建Mapper接口及映射文件在MyBatis框架中，使用Mapper接口和映射文件的方式需要滿足以下條件：(1)映射文件的namespace的值必須是Mapper接口的全路徑名稱。(2)Mapper接口中聲明的方法名在映射文件中必須有一個(gè)id值與之對(duì)應(yīng)。(3)映射文件的名稱必須和Mapper接口的名稱一致。1312.5創(chuàng)建Mapper接口及映射文件在com.my.eshop.dao包中，創(chuàng)建接口UserInfoMapper，聲明下列方法。在main/resources/mapper文件夾中，創(chuàng)建接口UserInfoMapper的映射文件UserInfoMapper.xml。1412.5創(chuàng)建Mapper接口及映射文件在com.my.eshop.dao包中，創(chuàng)建接口AdminInfoMapper，聲明下列方法。在main/resources/mapper文件夾中，創(chuàng)建接口AdminInfoMapper的映射文件AdminInfoMapper.xml。1512.5創(chuàng)建Mapper接口及映射文件在com.my.eshop.dao包中，創(chuàng)建接口CategoryMapper，聲明下列方法。在main/resources/mapper文件夾中，創(chuàng)建接口CategoryMapper的映射文件CategoryMapper.xml。1612.5創(chuàng)建Mapper接口及映射文件在com.my.eshop.dao包中，創(chuàng)建接口GoodsInfoMapper，聲明下列方法。在main/resources/mapper文件夾中，創(chuàng)建接口GoodsInfoMapper的映射文件GoodsInfoMapper.xml。1712.5創(chuàng)建Mapper接口及映射文件在com.my.eshop.dao包中，創(chuàng)建接口OrderInfoMapper，聲明下列方法。在main/resources/mapper文件夾中，創(chuàng)建接口OrderInfoMapper的映射文件OrderInfoMapper.xml。1812.5創(chuàng)建Mapper接口及映射文件在com.my.eshop.dao包中，創(chuàng)建接口FunctionsMapper，聲明下列方法。在main/resources/mapper文件夾中，創(chuàng)建接口FunctionsMapper的映射文件FunctionsMapper.xml。1912.5創(chuàng)建Mapper接口及映射文件在com.my.eshop.dao包中，創(chuàng)建接口RoleMapper，聲明下列方法。在main/resources/mapper文件夾中，創(chuàng)建接口RoleMapper的映射文件RoleMapper.xml。2012.6創(chuàng)建Service接口及實(shí)現(xiàn)類在com.my.eshop.service包中，創(chuàng)建接口UserInfoService，聲明下列方法。在com.my.eshop.service.impl包中，創(chuàng)建接口UserInfoService的實(shí)現(xiàn)類UserInfoServiceImpl，實(shí)現(xiàn)接口UserInfoService中聲明的方法。2112.6創(chuàng)建Service接口及實(shí)現(xiàn)類在com.my.eshop.service包中，創(chuàng)建接口AdminInfoService，聲明下列方法。在com.my.eshop.service.impl包中，創(chuàng)建接口AdminInfoService的實(shí)現(xiàn)類AdminInfoServiceImpl，實(shí)現(xiàn)接口AdminInfoService中聲明的方法。2212.6創(chuàng)建Service接口及實(shí)現(xiàn)類在com.my.eshop.service包中，創(chuàng)建接口CategoryService，聲明下列方法。在com.my.eshop.service.impl包中，創(chuàng)建接口CategoryService的實(shí)現(xiàn)類CategoryServiceImpl，實(shí)現(xiàn)接口CategoryService中聲明的方法。2312.6創(chuàng)建Service接口及實(shí)現(xiàn)類在com.my.eshop.service包中，創(chuàng)建接口FunctionsService，聲明下列方法。在com.my.eshop.service.impl包中，創(chuàng)建接口FunctionsService的實(shí)現(xiàn)類FunctionsServiceImpl，實(shí)現(xiàn)接口FunctionsService中聲明的方法。2412.6創(chuàng)建Service接口及實(shí)現(xiàn)類在com.my.eshop.service包中，創(chuàng)建接口GoodsInfoService，聲明下列方法。在com.my.eshop.service.impl包中，創(chuàng)建接口GoodsInfoService的實(shí)現(xiàn)類GoodsInfoServiceImpl，實(shí)現(xiàn)接口GoodsInfoService中聲明的方法。2512.6創(chuàng)建Service接口及實(shí)現(xiàn)類在com.my.eshop.service包中，創(chuàng)建接口OrderInfoService，聲明下列方法。在com.my.eshop.service.impl包中，創(chuàng)建接口OrderInfoService的實(shí)現(xiàn)類OrderInfoServiceImpl，實(shí)現(xiàn)接口OrderInfoService中聲明的方法。2612.6創(chuàng)建Service接口及實(shí)現(xiàn)類在com.my.eshop.service包中，創(chuàng)建接口RoleService，聲明下列方法。在com.my.eshop.service.impl包中，創(chuàng)建接口RoleService的實(shí)現(xiàn)類RoleServiceImpl，實(shí)現(xiàn)接口RoleService中聲明的方法。2712.7創(chuàng)建Controller控制器類在com.my.eshop.controller包中，創(chuàng)建控制器類AdminInfoController。在com.my.eshop.controller包中，創(chuàng)建控制器類UserInfoController。在com.my.eshop.controller包中，創(chuàng)建控制器類CategoryController。在com.my.eshop.controller包中，創(chuàng)建控制器類FunctionsController。在com.my.eshop.controller包中，創(chuàng)建控制器類RoleController。在com.my.eshop.controller包中，創(chuàng)建控制器類GoodsInfoController。在com.my.eshop.controller包中，創(chuàng)建控制器類OrderInfoController。在com.my.eshop.controller包中，創(chuàng)建控制器類SequenceController。2812.8前端程序目錄結(jié)構(gòu)在電商平臺(tái)后臺(tái)管理系統(tǒng)中，采用前后端分離的方式，前端使用了Vue+ElementPlus框架。通過Vue3的腳手架創(chuàng)建前端程序eshop-vue3，目錄結(jié)構(gòu)如下圖所示。2912.8前端程序目錄結(jié)構(gòu)main.js是項(xiàng)目的入口文件，用于初始化Vue實(shí)例，并引入需要的插件和各種公共組件。項(xiàng)目中所有的頁(yè)面都會(huì)加載main.js。在main.js文件中，依次導(dǎo)入了router文件夾下index.js、store文件夾下index.js、引入了ElementPlus組件庫(kù)、導(dǎo)入了全局樣式表、引入了axios，給axios組件設(shè)置全局api地址、設(shè)置了請(qǐng)求攔截器，axios通過headers傳參，設(shè)置請(qǐng)求頭token、掛載了axios。router文件夾下index.js是項(xiàng)目的路由文件，用于控制頁(yè)面跳轉(zhuǎn)。App.vue是項(xiàng)目的主組件或根組件，頁(yè)面入口文件，整個(gè)應(yīng)用只有一個(gè)，所有頁(yè)面都在App.vue下進(jìn)行切換。src/components是公共組件目錄，存放用戶創(chuàng)建的功能組件。3012.9登錄與管理首頁(yè)面實(shí)現(xiàn)系統(tǒng)登錄的組件為L(zhǎng)ogin.vue，登錄頁(yè)面效果如下圖所示。3112.9登錄與管理首頁(yè)面登錄成功后，進(jìn)入管理首頁(yè)面，如下圖所示。3212.10商品管理商品管理包括商品列表和商品類別兩部分，商品列表模塊包括商品列表分頁(yè)顯示與查詢、添加商品和修改商品功能。商品類別模塊包括商品類別分頁(yè)顯示與查詢、添加商品類別和修改商品類別功能。在管理首頁(yè)面中，單擊商品管理下的商品列表菜單，打開商品列表頁(yè)，如下圖所示。331