计算机毕设系列文章目录

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

文章目录

计算机毕设系列文章目录
前言
一、后台登录功能实现流程
- 1.后端公共通用文件
- 2.后台登录功能-前端实现学习
- 3.后台登录功能-后端实现学习
总结

前言

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

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

1.后端公共通用文件

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

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

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

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

前端发送请求，后端自然是接收请求并处理业务逻辑了，首先把目录结构创建完整
controller --控制层：接收前端发送过来的请求
dto --接收前端发送请求携带的数据的封装类
entity --与数据库表对应的实体类
filter --过滤器：过滤不同角色、权限访问不同的页面、数据
mapper --服务层：与数据库进行交互，增删改查
service --业务层：功能对应的业务逻辑细节的各种处理
首先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;}

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 {//实现依赖注入@Resourceprivate 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的查询条件构造器），首先实例化得到queryWrapperLambdaQueryWrapper<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);}
}

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> {}

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 {}

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> {}

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

至此，完成整个后台登录功能实现流程学习~ 后续我会先更新gitee上源项目的注释，大家可以先按照这个流程来一点一点复刻出所有功能。

总结

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

【计算机毕设】后台登录功能实现相关推荐

tp6实现商城后台登录功能
后台登录逻辑 1.没有登录状态,访问后台页面都应该跳转到登录页已经登录状态: 1.访问登录页面,应该跳转到后台首页解决方案: 后台登录拦截: 1.传统common/base.php控制器,后台控制 ...
vue rule鼠标移走校验_Vue-cli+Element-ui实现后台管理系统（二）实现后台登录功能...
前言接上文,本文主要讲解vue+element-ui后台管理系统的登录功能的实现,api接口这块如果对后端技术以及node的实现不太了解的情况下,可以写出假数据进行模拟操作~ 一.创建登录文件并配置 ...
androidstudio做登录界面_Vue-cli+Element-ui实现后台管理系统（二）实现后台登录功能...
前言接上文,本文主要讲解vue+element-ui后台管理系统的登录功能的实现,api接口这块如果对后端技术以及node的实现不太了解的情况下,可以写出假数据进行模拟操作~ 一.创建登录文件并配置 ...
【计算机毕设】项目数据库设计
计算机毕设系列文章目录第一章毕设题分析及设计第二章项目数据库设计第三章 maven项目搭建第四章前端文件结构第五章后台登录功能实现第六章后台登出功能实现第七章项目功能实现第 ...
【计算机毕设】前端文件结构
计算机毕设系列文章目录第一章毕设题分析及设计第二章项目数据库设计第三章 maven项目搭建第四章前端文件结构第五章后台登录功能实现第六章后台登出功能实现第七章项目功能实现第 ...
【计算机毕设】毕设题分析及设计
计算机毕设系列文章目录第一章毕设题分析及设计第二章项目数据库设计第三章 maven项目搭建第四章前端文件结构第五章后台登录功能实现第六章后台登出功能实现第七章项目功能实现第 ...
一个前端写的php博客系统2--前台展示+后台登录
前台首页展示首页的侧边预留的位置是给后面的统计,热门之类的版块预留位置... 控制器文章列表展示要考虑到文章数量增多后分页展示,那么我们要统计文章数量,使用 count() 计算文章总数,然后使用 ...
Django框架项目——BBS项目介绍、表设计、表创建同步、注册、登录功能、登录功能、首页搭建、admin、头像、图片防盗、个人站点、侧边栏筛选、文章的详情页、点赞点踩、评论、后台管理、添加文章、头像
文章目录 1 BBS项目介绍.表设计项目开发流程表设计 2 表创建同步.注册.登录功能数据库表创建及同步注册功能登陆功能 3 登录功能.首页搭建.admin.头像.图片防盗.个人站点.侧边栏 ...
一步步带你做vue后台管理框架(三)——登录功能
系列教程<一步步带你做vue后台管理框架>第三课 github地址:vue-framework-wz 线上体验地址:立即体验 <一步步带你做vue后台管理框架>第一课:介绍框架 ...

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