第12章 电商平台后台管理系统

第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