第12章電商平臺后臺管理系統本章使用SpringBoot+Vue+ElementPlus框架，講解一個前后端分離的綜合案例——電商平臺后臺管理系統的實現過程。第12章電商平臺后臺管理系統12.1

需求與系統分析12.2

數據庫設計12.3

環境搭建

12.3.1

后端程序目錄結構

12.3.2

編輯SpringBoot配置文件

12.3.3

創建Mybatis配置文件

12.3.4

集成JWT實現Token驗證

12.3.5

配置跨域12.4創建實體類212.5

創建Mapper接口及映射文件12.6創建Service接口及實現類12.7創建Controller控制器類12.8

前端程序目錄結構12.9

登錄與管理首頁面12.10

商品管理12.11

訂單管理12.12

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