• 瑞吉外卖（1）—

    目录

    一、开发环境的搭建

    1.1 数据库环境的搭建

    1.2 Maven项目搭建

    1.3 导入前端文件

    二、后台登录功能开发

    2.1 需求分析

    2.2 代码开发

    2.3 功能测试

    三、后台系统退出功能

    一、开发环境的搭建

    1.1 数据库环境的搭建

    1. 创建数据库

     2. 导入表结构，直接运行外部SQL文件

    数据表的说明

    序号表名

    说明

    1employee员工表
    2category菜品和套餐分类表
    3dish菜品表
    4setmeal套餐表
    5setmeal_dish套餐菜品关系表
    6dish_flavor菜品口味关系表
    7user用表(c端)
    8address_book地址薄表
    9shopping_cart购物车表
    10orders订单表
    11orders_detail订单明细表

    1.2 Maven项目搭建

    1. 创建一个maven项目

    注意：创建maven项目后，一定要检查项目的编码， maven仓库的配置，jdk的配置等

     2. 导入pom文件

    1. "1.0" encoding="UTF-8"?>
    2. <project xmlns="http://maven.apache.org/POM/4.0.0"
    3.          xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    4.          xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
    5.     <modelVersion>4.0.0modelVersion>
    6.  
    7.     <parent>
    8.         <groupId>org.springframework.bootgroupId>
    9.         <artifactId>spring-boot-starter-parentartifactId>
    10.         <version>2.4.5version>
    11.         <relativePath/> 
    12.     parent>
    13.  
    14.     <groupId>com.learngroupId>
    15.     <artifactId>reggie_take_outartifactId>
    16.     <version>1.0-SNAPSHOTversion>
    17.  
    18.     <properties>
    19.         <maven.compiler.source>8maven.compiler.source>
    20.         <maven.compiler.target>8maven.compiler.target>
    21.         <java.version>1.8java.version>
    22.     properties>
    23.  
    24.     <dependencies>
    25.  
    26.         <dependency>
    27.             <groupId>org.springframework.bootgroupId>
    28.             <artifactId>spring-boot-starterartifactId>
    29.         dependency>
    30.  
    31.         <dependency>
    32.             <groupId>org.springframework.bootgroupId>
    33.             <artifactId>spring-boot-starter-testartifactId>
    34.             <scope>testscope>
    35.         dependency>
    36.  
    37.         <dependency>
    38.             <groupId>org.springframework.bootgroupId>
    39.             <artifactId>spring-boot-starter-webartifactId>
    40.             <scope>compilescope>
    41.         dependency>
    42.  
    43.         <dependency>
    44.             <groupId>com.baomidougroupId>
    45.             <artifactId>mybatis-plus-boot-starterartifactId>
    46.             <version>3.4.2version>
    47.         dependency>
    48.  
    49.         <dependency>
    50.             <groupId>org.projectlombokgroupId>
    51.             <artifactId>lombokartifactId>
    52.             <version>1.18.20version>
    53.         dependency>
    54.  
    55.         <dependency>
    56.             <groupId>com.alibabagroupId>
    57.             <artifactId>fastjsonartifactId>
    58.             <version>1.2.76version>
    59.         dependency>
    60.  
    61.         <dependency>
    62.             <groupId>commons-langgroupId>
    63.             <artifactId>commons-langartifactId>
    64.             <version>2.6version>
    65.         dependency>
    66.  
    67.         <dependency>
    68.             <groupId>mysqlgroupId>
    69.             <artifactId>mysql-connector-javaartifactId>
    70.             <scope>runtimescope>
    71.         dependency>
    72.  
    73.         <dependency>
    74.             <groupId>com.alibabagroupId>
    75.             <artifactId>druid-spring-boot-starterartifactId>
    76.             <version>1.1.23version>
    77.         dependency>
    78.  
    79.     dependencies>
    80.  
    81.     <build>
    82.         <plugins>
    83.             <plugin>
    84.                 <groupId>org.springframework.bootgroupId>
    85.                 <artifactId>spring-boot-maven-pluginartifactId>
    86.                 <version>2.4.5version>
    87.             plugin>
    88.         plugins>
    89.     build>
    90.  
    91.  
    92.  
    93.  
    94. project>

    3. 创建 application.yml 文件

    1. server:
    2.   port: 8080
    3. spring:
    4.   application:
    5.     #应用的名称，可选
    6.     name: reggie_take_out
    7.   datasource:
    8.     druid:
    9.       driver-class-name: com.mysql.cj.jdbc.Driver
    10.       url: jdbc:mysql://localhost:3306/reggie?serverTimezone=Asia/Shanghai&useUnicode=true&characterEncoding=utf-8&zeroDateTimeBehavior=convertToNull&useSSL=false&allowPublicKeyRetrieval=true
    11.       username: root
    12.       password: ggm
    13. mybatis-plus:
    14.   configuration:
    15.     #在映射实体或者属性时，将数据库中表名和字段名中的下划线去掉，按照驼峰命名法映射
    16.     map-underscore-to-camel-case: true
    17.     log-impl: org.apache.ibatis.logging.stdout.StdOutImpl
    18.   global-config:
    19.     db-config:
    20.       id-type: ASSIGN_ID

    4. 创建Boot程序入口

    1. package com.learn.reggie;
    2.  
    3. import lombok.extern.slf4j.Slf4j;
    4. import org.springframework.boot.SpringApplication;
    5. import org.springframework.boot.autoconfigure.SpringBootApplication;
    6.  
    7. /**
    8.  * @author 咕咕猫
    9.  * @version 1.0
    10.  */
    11. @Slf4j
    12. @SpringBootApplication
    13. public class ReggieApplication {
    14.  
    15.     public static void main(String[] args) {
    16.         SpringApplication.run(ReggieApplication.class,args);
    17.         log.info("项目启动成功");
    18.     }
    19.  
    20. }

    1.3 导入前端文件

    注意前端文件的位置，在Boot项目中，前台默认只能访问resource目录下的static和template文件夹下的文件；所以如果要使用这种方式，直接创建一个static目录就行，然后把这些前端资源放在这个static目录下就行；

    如果不想把前端文件放在这两个默认的文件夹下，那么就可以自定义mvc的支持，如下(多学习一种定义的方法，以后自定义映射的时候可以使用)

    1. package com.learn.reggie.config;
    2.  
    3. import lombok.extern.slf4j.Slf4j;
    4. import org.springframework.context.annotation.Configuration;
    5. import org.springframework.web.servlet.config.annotation.ResourceHandlerRegistry;
    6. import org.springframework.web.servlet.config.annotation.WebMvcConfigurationSupport;
    7.  
    8. /**
    9.  * @author 咕咕猫
    10.  * @version 1.0
    11.  */
    12. //此注解用于记录日志，方便调试
    13. @Slf4j
    14. //Configuration注解说明了这是一个配置类
    15. @Configuration
    16. public class WebMvcConfig extends WebMvcConfigurationSupport {
    17.     /**
    18.      * 设置静态资源映射
    19.      * @param registry
    20.      */
    21.     @Override
    22.     protected void addResourceHandlers(ResourceHandlerRegistry registry) {
    23.         log.info("开始静态资源映射");
    24.         registry.addResourceHandler("/backend/**").addResourceLocations("classpath:/backend/");
    25.         registry.addResourceHandler("/front/**").addResourceLocations("classpath:/front/");
    26.     }
    27. }

    二、后台登录功能开发

    2.1 需求分析

    2.2 代码开发

    前端页面访问地址：http://localhost:8080/backend/page/login/login.html

     查看登陆请求信息：点击登录会发送登录请求：http://localhost:8080/employee/login

    1. 创建相关的包：

    2. 实体类和mapper的开发

    在entity导入实体类employee类；

    1. package com.learn.reggie.mapper;
    2.  
    3. import com.baomidou.mybatisplus.core.mapper.BaseMapper;
    4. import com.learn.reggie.entity.Employee;
    5. import org.apache.ibatis.annotations.Mapper;
    6.  
    7. /**
    8.  * @author 咕咕猫
    9.  * @version 1.0
    10.  */
    11. //@Mapper在编译之后会生成相应的接口实现类
    12. @Mapper
    13. public interface EmployeeMapper extends BaseMapper {
    14. }

     使用快捷键 Ctrl + f3 就可以看见mybatis-plus 帮我们定义的mapper接口：

    3. Service

    1. package com.learn.reggie.service;
    2.  
    3. import com.baomidou.mybatisplus.extension.service.IService;
    4. import com.learn.reggie.entity.Employee;
    5.  
    6. /**
    7.  * @author 咕咕猫
    8.  * @version 1.0
    9.  */
    10. //这两个泛型一个是实体类对应的mapper,一个是实体类
    11. public interface EmployeeService extends IService {
    12. }
    1. package com.learn.reggie.service.impl;
    2.  
    3. import com.baomidou.mybatisplus.extension.service.impl.ServiceImpl;
    4. import com.learn.reggie.entity.Employee;
    5. import com.learn.reggie.mapper.EmployeeMapper;
    6. import com.learn.reggie.service.EmployeeService;
    7. import org.springframework.stereotype.Service;
    8.  
    9. /**
    10.  * @author 咕咕猫
    11.  * @version 1.0
    12.  */
    13. @Service
    14. public class EmployeeServiceImpl extends ServiceImpl implements EmployeeService {
    15. }
    查看帮我们实现的方法：

    4. 封装返回结果类R(result)

    创建一个新的包common，用来存放共同使用的类，把这个返回结果类放入这个公共包

    1. package com.learn.reggie.common;
    2.  
    3. import lombok.Data;
    4. import java.util.HashMap;
    5. import java.util.Map;
    6.  
    7. /**
    8.  * 通用的返回结果，服务端响应的数据最终都会封装成此对象
    9.  * @param 
    10.  */
    11. @Data
    12. public class R {
    13.  
    14.     private Integer code; //编码：1成功，0和其它数字为失败
    15.  
    16.     private String msg; //错误信息
    17.  
    18.     private T data; //数据
    19.  
    20.     private Map map = new HashMap(); //动态数据
    21.  
    22.     public static  R success(T object) {
    23.         R r = new R();
    24.         r.data = object;
    25.         r.code = 1;
    26.         return r;
    27.     }
    28.  
    29.     public static  R error(String msg) {
    30.         R r = new R();
    31.         r.msg = msg;
    32.         r.code = 0;
    33.         return r;
    34.     }
    35.  
    36.     public R add(String key, Object value) {
    37.         this.map.put(key, value);
    38.         return this;
    39.     }
    40.  
    41. }

    5. Controller

    先处理业务逻辑，再编写代码

    1. 1、将页面提交的密码password进行md5加密处理
    2. 2、根据页面提交的用户名username查询数据库
    3. 3、如果没有查询到则返回登录失败结果
    4. 4、密码比对，如果不一致则返回登录失败结果
    5. 5、查看员工状态，如果为已禁用状态，则返回员工已禁用结果
    6. 6、登录成功，将员工id存入Session并返回登录成功结果
    1. package com.learn.reggie.controller;
    2.  
    3. import com.baomidou.mybatisplus.core.conditions.query.LambdaQueryWrapper;
    4. import com.baomidou.mybatisplus.extension.conditions.query.LambdaQueryChainWrapper;
    5. import com.learn.reggie.common.R;
    6. import com.learn.reggie.entity.Employee;
    7. import com.learn.reggie.service.EmployeeService;
    8. import lombok.extern.slf4j.Slf4j;
    9. import org.springframework.beans.factory.annotation.Autowired;
    10. import org.springframework.util.DigestUtils;
    11. import org.springframework.web.bind.annotation.PostMapping;
    12. import org.springframework.web.bind.annotation.RequestBody;
    13. import org.springframework.web.bind.annotation.RequestMapping;
    14. import org.springframework.web.bind.annotation.RestController;
    15.  
    16. import javax.servlet.http.HttpServletRequest;
    17.  
    18. /**
    19.  * @author 咕咕猫
    20.  * @version 1.0
    21.  */
    22. @Slf4j
    23. @RestController
    24. @RequestMapping("/employee")
    25. public class EmployeeController {
    26.  
    27.     @Autowired
    28.     private EmployeeService employeeService;
    29.  
    30.     /**
    31.      * 员工登录
    32.      * @param request
    33.      * @param employee
    34.      * @return
    35.      */
    36.     
    37.     @PostMapping("/login") //这里前端是Post请求，所以是PostMapping，并且是restful风格开发
    38.     //因为返回结果统一用json格式，所以用了RequestBody注解
    39.     //登录成功后HttpServletRequest接收session数据，方便getSession对象，获取当前登录用户
    40.     public R login(HttpServletRequest request, @RequestBody Employee employee){
    41.         //这里为什么还有接收一个request对象的数据?
    42.         //登陆成功后，我们需要从请求中获取员工的id，并且把这个id存到session中，这样我们想要获取登陆对象的时候就可以随时获取
    43.  
    44.  
    45.         //1、将页面提交的密码password进行md5加密处理, 得到加密后的字符串
    46.         String password = employee.getPassword();
    47.         password = DigestUtils.md5DigestAsHex(password.getBytes());//对用户密码进行加密
    48.  
    49.         //2、根据页面提交的用户名username查询数据库中员工数据信息
    50.         LambdaQueryWrapper queryWrapper = new LambdaQueryWrapper<>();
    51.         queryWrapper.eq(Employee::getUsername,employee.getUsername());
    52.         //在设计数据库的时候我们对username使用了唯一索引,所以这里可以使用getOne方法
    53.         Employee emp = employeeService.getOne(queryWrapper);
    54.  
    55.         //3、如果没有查询到, 则返回登录失败结果
    56.         if (emp == null){
    57.             return R.error("登录失败");
    58.         }
    59.  
    60.         //4、密码比对，如果不一致, 则返回登录失败结果
    61.         if (!emp.getPassword().equals(password)){
    62.         //emp.getPassword()用户存在后从数据库查询到的密码(加密状态的)  password是前端用户自己输入的密码(已经加密处理)
    63.             return R.error("登录失败");
    64.         }
    65.  
    66.         //5、查看员工状态，如果为已禁用状态，则返回员工已禁用结果
    67.         if(emp.getStatus() == 0){
    68.             return R.error("账号已禁用");
    69.         }
    70.  
    71.         //6、登录成功，将员工id存入Session, 并返回登录成功结果
    72.         request.getSession().setAttribute("employee",emp.getId());
    73.         //把从数据库中查询到的用户返回出去
    74.         return R.success(emp);
    75.     }
    76. }

    2.3 功能测试

    使用debug形式启动项目，在浏览器访问http://localhost:8080/backend/page/login/login.html

    然后打开浏览器的f12,查看具体的请求情况：

     在后台查看debug的状态：

     运行成功后：(这个密码是123456)，数据存在了浏览器中：这个代码是把返回的数据保持在浏览器中：

    localStorage.setItem('userInfo',JSON.stringify(res.data))

    在浏览器我们可以看见，key为userInfo，value为我们返回的数据

    三、后台系统退出功能

    点击退出按钮，发送退出的请求：http://localhost:8080/employee/logout

    后端代码处理：

    ①在controller中创建对应的处理方法来接受前端的请求，请求方式为post；

    ②清理session中的用户id

    ③返回结果（前端页面会进行跳转到登录页面）

    前端代码，也要把浏览器中的数据给清除；

    1.     /**
    2.      * 退出功能
    3.      *  ①在controller中创建对应的处理方法来接受前端的请求，请求方式为post；
    4.      *  ②清理session中的用户id
    5.      *  ③返回结果（前端页面会进行跳转到登录页面）
    6.      * @param request
    7.      * @return
    8.      */
    9.     @PostMapping("/logout")
    10.     public R logout(HttpServletRequest request){
    11.         //1、清理Session中保存的当前的员工id
    12.         request.getSession().removeAttribute("employee");
    13.         return R.success("退出成功");
    14.     }

    功能测试：先登陆，然后退出即可；看浏览器中的数据是否会被清除；

  • 相关阅读:
    三数之和（python）
    计算几何求线段与交点
    Java静态变量在静态方法内部无法改变值
    CDH6下线DataNode节点
    酷开科技丨大屏购物买买买，酷开系统助力网购模式再升级
    U-BOOT小全（二）
    element中el-switch用法汇总（拓展：el-switch开关点击弹出确认框时，状态先改变，点击确认/取消失效，怎么解决?）
    现代 React Web 开发实战——kanban实现卡片拖拽
    Android studio常用的快捷键和基础使用（非常实用）
    MongoDB 索引和常用命令
  • 原文地址：https://blog.csdn.net/weixin_61843013/article/details/127041925