黑马程序员——瑞吉外卖项目解析（1）

AAA码农烧烤

已于 2024-02-03 13:15:24 修改

阅读量181

点赞数 2

分类专栏： Java后端文章标签： intellij-idea java spring boot

于 2024-01-28 23:46:19 首次发布

本文链接：https://blog.csdn.net/wn030416/article/details/135902903

版权

Java后端专栏收录该内容

6 篇文章 0 订阅

订阅专栏

本文介绍了如何在SpringBoot项目中配置WebMvcConfig类，处理静态资源映射，以及前端表单验证、后端登录接口实现（包括MD5加密、数据库查询及用户状态验证）和退出登录功能的处理。涉及到了前端表单提交、axios请求、MyBatisPlus的LambdaQueryWrapper和数据库操作等技术细节。

摘要由CSDN通过智能技术生成

后台登录

前端分析

静态资源映射

package com.cc.config; WebMvcConfig类

@Override
    protected void addResourceHandlers(ResourceHandlerRegistry registry) {
        //添加映射
        log.info("映射资源开始");
        registry.addResourceHandler("doc.html").addResourceLocations("classpath:/META-INF/resources/");
        registry.addResourceHandler("/webjars/**").addResourceLocations("classpath:/META-INF/resources/webjars/");
        registry.addResourceHandler("/backend/**").addResourceLocations("classpath:/backend/");
        registry.addResourceHandler("/front/**").addResourceLocations("classpath:/front/");
    }

点击按钮调用handleLogin方法登录

<el-form-item prop="username">
            <el-input v-model="loginForm.username" type="text" auto-complete="off" placeholder="账号" maxlength="20"
              prefix-icon="iconfont icon-user" />
          </el-form-item>
          <el-form-item prop="password">
            <el-input v-model="loginForm.password" type="password" placeholder="密码" prefix-icon="iconfont icon-lock" maxlength="20"
              @keyup.enter.native="handleLogin" />
          </el-form-item>
          <el-form-item style="width:100%;">
            <el-button :loading="loading" class="login-btn" size="medium" type="primary" style="width:100%;"
              @click.native.prevent="handleLogin">
              <span v-if="!loading">登录</span>
              <span v-else>登录中...</span>
            </el-button>
          </el-form-item>

 methods: {
        async handleLogin() {
          this.$refs.loginForm.validate(async (valid) => {
            if (valid) {
              this.loading = true
              let res = await loginApi(this.loginForm)
              if (String(res.code) === '1') {//1表示登录成功
                localStorage.setItem('userInfo',JSON.stringify(res.data))
                window.location.href= '/backend/index.html'
              } else {
                this.$message.error(res.msg)
                this.loading = false
              }
            }

api

function loginApi(data) {
  return $axios({
    'url': '/employee/login',
    'method': 'post',
    data
  })
}

后端实现

创建employee实体类和数据库里面字段映射

private Long id;

    private String username;

    private String name;

    private String password;

    private String phone;

    private String sex;

    private String idNumber;

    private Integer status;

开启驼峰命名

idNumber对应数据库中的id_number

mybatis-plus:
  configuration:
    #在映射实体或者属性时，将数据库中表名和字段名中的下划线去掉，开启按照驼峰命名法映射
    map-underscore-to-camel-case: true
    log-impl: org.apache.ibatis.logging.stdout.StdOutImpl
  global-config:
    db-config:
      id-type: ASSIGN_ID

employee映射xml

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.cc.mapper.EmployeeMapper">

    <!-- 通用查询映射结果 -->
    <resultMap id="BaseResultMap" type="com.cc.pojo.Employee">
        <id column="id" property="id" />
        <result column="name" property="name" />
        <result column="username" property="username" />
        <result column="password" property="password" />
        <result column="phone" property="phone" />
        <result column="sex" property="sex" />
        <result column="id_number" property="idNumber" />
        <result column="status" property="status" />
        <result column="create_time" property="createTime" />
        <result column="update_time" property="updateTime" />
        <result column="create_user" property="createUser" />
        <result column="update_user" property="updateUser" />
    </resultMap>

    <!-- 通用查询结果列 -->
    <sql id="Base_Column_List">
        id, name, username, password, phone, sex, id_number, status, create_time, update_time, create_user, update_user
    </sql>

</mapper>

employeemapper

package com.cc.mapper;

import com.cc.pojo.Employee;
import com.baomidou.mybatisplus.core.mapper.BaseMapper;

/**
 * <p>
 * 员工信息 Mapper 接口
 * </p>
 *
 * @author cc
 * @since 2022-05-30
 */
public interface EmployeeMapper extends BaseMapper<Employee> {

}

MyBatis-Plus 中的 IService 和 BaseMapper - 知乎 (zhihu.com)employeeserviceimpl

@Service
@Slf4j
public class EmployeeServiceImpl extends ServiceImpl<EmployeeMapper, Employee> implements EmployeeService {

}

MyBatis-Plus 中的 IService 和 BaseMapper - 知乎 (zhihu.com)

服务端所有的响应结果都会返回结果类R

@Slf4j
@RestController
@RequestMapping("/employee")
public class EmployeeController {

    ThreadLocal threadLocal = new ThreadLocal();

    @Autowired
    private EmployeeService employeeService;

    /**
     * @param request 如果登陆成功把对象放入Session中，方便后续拿取
     * @param employee 利用@RequestBody注解来解析前端传来的Json，同时用对象来封装
     * @return
     */
    @PostMapping("/login")
    public Result login(HttpServletRequest request, @RequestBody Employee employee) {
        String password=employee.getPassword();
        String username = employee.getUsername();
        log.info("登陆");
        //MD5加密
        MD5Util md5Util = new MD5Util();
        password=MD5Util.getMD5(password);
        //通过账户查这个员工对象，这里就不走Service层了
        LambdaQueryWrapper<Employee> lambdaQueryWrapper = new LambdaQueryWrapper();
        lambdaQueryWrapper.eq(Employee::getUsername, username);
        Employee empResult=employeeService.getOne(lambdaQueryWrapper);
            //判断用户是否存在
        if (!empResult.getUsername().equals(username)){
            return Result.error("账户不存在");
            //密码是否正确
        }else if (!empResult.getPassword().equals(password)){
            return Result.error("账户密码错误");
            //员工账户状态是否正常，1状态正常，0封禁
        }else if (empResult.getStatus()!=1){
            return Result.error("当前账户正在封禁");
            //状态正常允许登陆
        }else {
            log.info("登陆成功，账户存入session");
            //员工id存入session，
            request.getSession().setAttribute("employee",empResult.getId());
            //引入BaseContext的工具类，将存入session的员工信息拿出来，保存到ThreadLocal下，方便拿不到Request的类获取用户Id
            BaseContext.setCurrentId(empResult.getId());
            //把员工对象存入localStorage作用域
            return Result.success(employee);
        }
    }

MyBatis-Plus LambdaQueryWrapper使用说明_mybatisplus lambdaquerywrapper-CSDN博客

登录成功把结果传到session

后台退出

前端分析

{{ userInfo.name }}当前登录的用户名字

outlogin调用的方法

 <div class="right-menu">
              <div class="avatar-wrapper">{{ userInfo.name }}</div>
              <!-- <div class="logout" @click="logout">退出</div> -->
              <img src="images/icons/btn_close@2x.png" class="outLogin" alt="退出" @click="logout" />
            </div>

function logoutApi(){
  return $axios({
    'url': '/employee/logout',
    'method': 'post',
  })
}

后端实现

@PostMapping("/logout")
    public Result login(HttpServletRequest request) {
        //尝试删除
        try {
            request.getSession().removeAttribute("employee");
        }catch (Exception e){
            //删除失败
            return Result.error("登出失败");
        }
        return Result.success("登出成功");
    }

HttpServletRequest详解_httprequestservlet-CSDN博客