【计算机毕设】后台登录功能实现

计算机毕设系列文章目录

第一章 毕设题分析及设计
第二章 项目数据库设计
第三章 maven项目搭建
第四章 前端文件结构
第五章 后台登录功能实现
第六章 后台登出功能实现
第七章 项目功能实现
第八章 项目功能实现
第九章 项目功能实现
第十章 项目功能实现

---

---

前言

本系列以黑马项目：瑞吉外卖作为例子，详细描述 毕设项目设计与实现 的流程~
给初学者的小建议：上至项目，下至代码，能从网上copy的尽量从网上copy，再在他们的基础上修改、拓展，不断深入底层，这样循环往复才会获得更多的正反馈，更有学习的成就感~
gitee源项目链接：黑马-瑞吉外卖

---

一、后台登录功能实现流程

1.后端公共通用文件

1. 把源项目的这三个文件夹复制到demo里com.itheima.reggie目录下即可，common --公共通用的代码块/常用常量定义封装等等（就是公用的代码），config --各种项目配置类 ， utils --多功能、基于工具的包（通用工具类）。基本你看见参考项目有这三你都得先复制过来用！（具体请看注释和后续的使用~）
   
2. config/WebMvcConfig.java 文件中 addResourceHandlers()方法的作用就是静态资源映射路径，就是让系统能访问我们上一篇文章中提到的前端页面、资源

2.后台登录功能-前端实现学习

1. 前端样式代码可看源项目注释，在这里就不多赘述了，这部分主要写 前端是如何发送登录请求的 。
2. backend/page/login.html → ctrl+F搜索定位登录（登录按钮会绑定方法发送登录请求，找它准没错）→ 可知绑定的方法handleLogin（vue单击绑定事件用@click...）
   
3. 搜索定位handleLogin → 得知调用loginApi发送请求
   
4. ctrl+鼠标左键点loginApi → 跳到login.js
   
5. 修改application.yml → port:8080改为8081，防止跟源项目同时启动时端口冲突 → 启动服务
   
6. 浏览器访问系统登录页面 → http://localhost:8081/backend/page/login/login.html
7. 按F12 → 打开调试工具，切换到Network → 点击登录 → 下方界面出现前端发送的登录请求login
   

3.后台登录功能-后端实现学习

1. 前端发送请求，后端自然是接收请求并处理业务逻辑了，首先把目录结构创建完整
   controller --控制层：接收前端发送过来的请求
   dto --接收前端发送请求携带的数据的封装类
   entity --与数据库表对应的实体类
   filter --过滤器：过滤不同角色、权限访问不同的页面、数据
   mapper --服务层：与数据库进行交互，增删改查
   service --业务层：功能对应的业务逻辑细节的各种处理
   
2. 首先entity目录下创建Employee类 → 其中implements Serializable（实现Serializable接口，用于序列化）

package com.itheima.reggie.entity;

import com.baomidou.mybatisplus.annotation.FieldFill;
import com.baomidou.mybatisplus.annotation.TableField;
import lombok.Data;
import java.io.Serializable;
import java.time.LocalDateTime;

/**
 * 员工实体类
 */
//lombok插件提供的注解，封装了get/set等方法
@Data
public class Employee implements Serializable {

    /** 序列号*/
    private static final long serialVersionUID = 1L;

    /**唯一主键*/
    private Long id;

    /**用户名*/
    private String username;

    /**姓名*/
    private String name;

    /**密码*/
    private String password;

    /**电话*/
    private String phone;

    /**性别*/
    private String sex;

    /**身份证号码*/
    private String idNumber;

    /**状态*/
    private Integer status;

    /**创建时间
     * @TableField设置自动填充字段
     * */
    @TableField(fill = FieldFill.INSERT)
    private LocalDateTime createTime;

    /**更新时间*/
    @TableField(fill = FieldFill.INSERT_UPDATE)
    private LocalDateTime updateTime;

    /**添加用户时使用*/
    @TableField(fill = FieldFill.INSERT)
    private Long createUser;

    /**更新用户时使用*/
    @TableField(fill = FieldFill.INSERT_UPDATE)
    private Long updateUser;

}

3. controller目录下新建EmployeeController （这个是重点！！！）
   LambdaQueryWrapper详解链接

package com.itheima.reggie.controller;

import com.baomidou.mybatisplus.core.conditions.query.LambdaQueryWrapper;
import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
import com.itheima.reggie.common.CommonsConst;
import com.itheima.reggie.common.R;
import com.itheima.reggie.entity.Employee;
import com.itheima.reggie.service.EmployeeService;
import lombok.extern.slf4j.Slf4j;
import org.apache.commons.lang.StringUtils;
import org.springframework.util.DigestUtils;
import org.springframework.web.bind.annotation.*;

import javax.annotation.Resource;
import javax.servlet.http.HttpServletRequest;

/**
 * 员工控制类
 */
//Java日志框架
@Slf4j
//标注为controller（json格式数据的）
@RestController
//映射前端发来的请求
@RequestMapping("/employee")
public class EmployeeController {

    //实现依赖注入
    @Resource
    private EmployeeService employeeService = null;

    /**
     * 登录请求处理
     * TODO 后续改进将业务处理的代码放入业务层，这里只做数据请求与返回
     *
     * @param request
     * @param employee
     * @return
     */
    @PostMapping("/login")
    public R<Employee> login(HttpServletRequest request,
                             @RequestBody Employee employee) {
        // 将页面提交的密码进行MD5加密
        String password = employee.getPassword();
        password = DigestUtils.md5DigestAsHex(password.getBytes());
        // 根据用户名查数据库（LambdaQueryWrapper是mybatis-plus的查询条件构造器），首先实例化得到queryWrapper
        LambdaQueryWrapper<Employee> queryWrapper = new LambdaQueryWrapper<Employee>();
        // 调用查询条件构造器中eq方法
        //（遍历Employee :: 调用getUsername方法 , 调用传入的employee中的getUsername方法）比较逗号两边的username是否相等
        queryWrapper.eq(Employee::getUsername, employee.getUsername());
        // 返回查询到的结果，用emp封装
        Employee emp = employeeService.getOne(queryWrapper);
        // 查不到返回登录失败结果
        if (emp == null) {
            return R.error(CommonsConst.LOGIN_FAIL);
        }
        // 比对密码
        if (!emp.getPassword().equals(password)) {
            return R.error(CommonsConst.LOGIN_FAIL);
        }
        // 查看员工状态
        if (emp.getStatus() == CommonsConst.EMPLOYEE_STATUS_NO) {
            return R.error(CommonsConst.LOGIN_ACCOUNT_STOP);
        }
        // 登录成功将员工的ID放入session中
        request.getSession().setAttribute("employee", emp.getId());
        return R.success(emp);
    }
}

4. service目录下新建EmployeeService(是接口！新建时选绿色的Interface！不是Class)

package com.itheima.reggie.service;

import com.baomidou.mybatisplus.extension.service.IService;
import com.itheima.reggie.entity.Employee;

public interface EmployeeService extends IService<Employee> {}

5. service/impl目录下新建EmployeeServiceImpl （@Service --把该类自动注册到Spring容器）

package com.itheima.reggie.service.impl;

import com.baomidou.mybatisplus.extension.service.impl.ServiceImpl;
import com.itheima.reggie.entity.Employee;
import com.itheima.reggie.mapper.EmployeeMapper;
import com.itheima.reggie.service.EmployeeService;
import org.springframework.stereotype.Service;

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

6. mapper目录下新建EmployeeMapper(是接口！新建时选绿色的Interface！不是Class)（@Mapper --不用写Mapper映射文件.xml）

package com.itheima.reggie.mapper;

import com.baomidou.mybatisplus.core.mapper.BaseMapper;
import com.itheima.reggie.entity.Employee;
import org.apache.ibatis.annotations.Mapper;

@Mapper
public interface EmployeeMapper extends BaseMapper<Employee> {}

7. 上面的写完其实就已经完成登录功能了，这里补充下 把源项目filter目录下的LoginCheckFilter复制过来，他的作用是 判断发过来的请求是否需要登录才能通过 ，也算是公共文件了，具体请看源项目注释~
8. 最后我们的项目结构如图：
   
9. 启动服务 → 浏览器访问系统登录页面 http://localhost:8081/backend/page/login/login.html → 成功登录进后台管理端首页（因为其他功能还没写所以页面会有报错）
   
   至此，完成整个后台登录功能实现流程学习~ 后续我会先更新gitee上源项目的注释，大家可以先按照这个流程来一点一点复刻出所有功能。

---

总结

大家务必动手操作一遍，反正毕设的时候也得做的，熟练点可以避很多坑~

第一章 毕设题分析及设计
第二章 项目数据库设计
第三章 maven项目搭建
第四章 前端文件结构
第五章 后台登录功能实现
第六章 后台登出功能实现
第七章 项目功能实现
第八章 项目功能实现
第九章 项目功能实现
第十章 项目功能实现