首先实现用账户密码登陆后台的功能。
目录
3、Mapper层（接口EmployeeMapper.java）
4、Service层（接口EmployeeService.java以及对应实现类EmployeeServiceImpl.java）
5、Controller层（类EmployeeController.java）
一、建立各个组件的文件夹以及文件
结构及文件如下：
1、通用结果返回类：R.java
这是通用返回结果类，服务端响应的数据最终都会封装成此对象
package com.itheima.reggie.common;
import lombok.Data;
import java.util.HashMap;
import java.util.Map;
/***
* 通用返回结果类，服务端响应的数据最终都会封装成此对象
* @param <T>
*/
@Data
public class R<T> {
private Integer code; //编码：1成功，0和其它数字为失败
private String msg; //错误信息
private T data; //数据
private Map map = new HashMap(); //动态数据
public static <T> R<T> success(T object) {
R<T> r = new R<T>();
r.data = object;
r.code = 1;
return r;
}
public static <T> R<T> error(String msg) {
R r = new R();
r.msg = msg;
r.code = 0;
return r;
}
public R<T> add(String key, Object value) {
this.map.put(key, value);
return this;
}
}
2、Model层（实体类:Employee.java）
要与数据库中对应表的属性一致，由于开启了驼峰表示法，因此数据库中的’id_number‘就对应实体类中的'idNumber'。此外，为了使该类能被序列化，需要实现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;
@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;
private LocalDateTime createTime;
private LocalDateTime updateTime;
@TableField(fill = FieldFill.INSERT)
private Long createUser;
@TableField(fill = FieldFill.INSERT_UPDATE)
private Long updateUser;
}
3、Mapper层（接口EmployeeMapper.java）
在mybatis-plus中，mapper层的接口直接继承BaseMapper<T>即可，BaseMapper<T>中有很多的数据库操作,例如增删改查等。
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> {
}
4、Service层（接口EmployeeService.java以及对应实现类EmployeeServiceImpl.java）
IService<T>中有着非常多的方法，比如按Id进行查找，添加新对象等，因此我们直接继承即可。
package com.itheima.reggie.service;
import com.baomidou.mybatisplus.extension.service.IService;
import com.itheima.reggie.entity.Employee;
public interface EmployeeService extends IService<Employee> {
}
ServiceImpl<M extends BaseMapper<T>, T>本身就是实现IService<T>的，因此我们的实现类继承它即可。
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 {
}
5、Controller层（类EmployeeController.java）
根据需求分析，用户登录需要完成以下功能：
1、将页面提交的密码password进行md5加密处理
2、根据页面提交的用户名username查询数据库
3、如果没有查询到则返回登录失败结果
4、密码比对，如果不一致则返回登录失败结果
5、查看员工状态，如果为已禁用状态，则返回员工已禁用结果
6、登录成功，将员工id存入Session并返回登录成功结果 7、访问结束，退出系统
Controller层负责具体的业务模块流程的控制，因此代码如下：
package com.itheima.reggie.controller;
import com.baomidou.mybatisplus.core.conditions.query.LambdaQueryWrapper;
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.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import org.springframework.util.DigestUtils;
import org.springframework.web.bind.annotation.*;
import javax.servlet.http.HttpServletRequest;
@Slf4j
@RestController
@RequestMapping("employee")
public class EmployeeController {
@Autowired
private EmployeeService employeeService;
@PostMapping("/login")
private R<Employee> login(HttpServletRequest request, @RequestBody Employee employee){
//1、将页面提交的密码password进行md5加密处理
String password=employee.getPassword();
password=DigestUtils.md5DigestAsHex(password.getBytes());
//2、根据页面提交的用户名username查询数据库
LambdaQueryWrapper<Employee> queryWrapper = new LambdaQueryWrapper<>();
queryWrapper.eq(Employee::getUsername,employee.getUsername());
Employee emp = employeeService.getOne(queryWrapper);
//3、如果没有查询到则返回登录失败结果
if(emp==null){
return R.error("登陆失败");
}
//4、密码比对，如果不一致则返回登录失败结果
if(!emp.getPassword().equals(password)){
return R.error("登陆失败");
}
//5、查看员工状态，如果为已禁用状态，则返回员工已禁用结果
if(emp.getStatus()==0){
return R.error("账号已禁用");
}
//6、登录成功，将员工id存入Session并返回登录成功结果
request.getSession().setAttribute("employee",emp.getId());
return R.success(emp);
}
/***
* 7、员工退出
* @param request
* @return
*/
@PostMapping("logout")
public R<String> logout(HttpServletRequest request){
request.getSession().removeAttribute("employee");
return R.success("退出成功");
}
}
首先，HttpServletRequest对象代表客户端的请求，当客户端通过HTTP协议访问服务器时，HTTP请求头中的所有信息都封装在这个对象中，通过这个对象提供的方法，可以获得客户端请求的所有信息。 登陆成功后，我们需要从请求中获取员工的id，并且把这个id存到session中，这样我们想要获取登陆对象的时候就可以随时获取。
LambdaQueryWrapper是mybatis plus中的一个条件构造器对象，只是是需要使用Lambda 语法使用 Wrapper。LambdaQueryWrapper中常用方法如下：
“::”是Java 8 引入的新特性之一，常常被称作为方法引用，提供了一种不执行方法的方法。使用“::”可以进一步简化一些使用了lambda表达式的代码，让代码更加简洁。
假如employee.getUsername()的值为“老王”，这里就相当于拼接了一个sql字段：username='老王'，然后再调用Service的getOne方法，就可以返回得到一个username为老王的实体对象（有的话）。
下面简单分析一下这个页面效果怎么实现的（前端部分）
二、左侧菜单栏如何实现
在index.html中创建了一个Vue对象，在data()内创建了menuList 数组，他其中放的是各种各样的json数据，分别对应左侧菜单的不同按钮。但这部分是数据准备，并非展示。
我们通过ElementUI(由饿了么团队开源的UI框架，并于Vue完美契合)提供的el-menu组件将菜单内容展现出来。里面的v-for表示遍历，遍历内容为上面所说的menuList数组。
由于 我们的菜单选项没有子选项，因此上面的v-if不满足，会进入到下面的v-else，然后在这里会将菜单选项的内容设置为item.name。
三、点击左侧不同的菜单选项，右侧页面也会随之更改的原理
由上图可以看出我们定义了一个@click。即点击事件，我们在点击不同的菜单按钮时，会将item传过来，menuHandle的内容如下：
可以看出，点击过后我们会将点击菜单对应的url传给iframeUrl，而iframeUrl被iframe使用。iframe简单来说就是在页面中挖了个坑放其他页面，因此我们点击不同的菜单选项，就会切换不同的url地址，将对应的html文件展示出来。
由上图可以发现，url中对应的正是不同的html文件
四、完善登陆功能
1、实现必须登录
现在的系统无需登录直接输入管理系统的url也能直接进入系统，这不合理，所以我们要使用拦截器或者过滤器来判断用户是否已经完成登录，如果没有登录则跳转到登陆页面。
1）代码实现
过滤器具体的处理逻辑如下：
LoginCheckFilter.java内容如下：
package com.itheima.reggie.filter;
import com.alibaba.fastjson.JSON;
import com.itheima.reggie.common.R;
import lombok.extern.slf4j.Slf4j;
import org.springframework.util.AntPathMatcher;
import javax.servlet.*;
import javax.servlet.annotation.WebFilter;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
/**
* 检查用户是否已经登录
*/
@WebFilter(filterName = "LoginCheckFilter",urlPatterns = "/*")
@Slf4j
public class LoginCheckFilter implements Filter {
//路径匹配器，支持通配符
public static final AntPathMatcher PATH_MATCHER=new AntPathMatcher();
@Override
public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain) throws IOException, ServletException {
HttpServletRequest request=(HttpServletRequest) servletRequest;
HttpServletResponse response=(HttpServletResponse) servletResponse;
//1、获取本次请求的URI
String requestURI=request.getRequestURI();
log.info("拦截到请求：{}",requestURI);
//定义不需要处理的请求路径
String[] urls=new String[]{
"/employee/login",
"/employee/logout",
"/backend/**",
"/front/**"
};
//2、判断本次请求是否需要处理
boolean check=check(urls,requestURI);
//3、如果不需要处理，则直接放行
log.info("本次请求{}不需要处理",requestURI);
if(check){
filterChain.doFilter(request,response);
return;
}
//4、判断登陆状态，如果已登录，则直接放行
if (request.getSession().getAttribute("employee")!=null){
log.info("用户已登录，用户id为：{}",request.getSession().getAttribute("employee"));
filterChain.doFilter(request,response);
return;
}
//5、如果未登录则放回未登录结果，通过输出流方式向客户端页面相应数据
response.getWriter().write(JSON.toJSONString(R.error("NOTLOGIN")));
return;
}
/**
* 路径匹配，检查本次请求是否需要放行
*/
public boolean check(String[] urls,String requestURI){
for(String url:urls){
boolean match=PATH_MATCHER.match(url,requestURI);
if (match){
return true;
}
}
return false;
}
}
2）代码中相关知识
1）其中注解@WebFilter(filterName = "LoginCheckFilter",urlPatterns = "/*")配置过滤器的名称以及设置过滤器过滤的url。
filterChain.doFilter(request,response)方法表示放行，执行后面的过滤器或者接口
2）URI是一个大集合，里面包含了URL和URN。
URL可以理解为。在万维网【www】上，每一信息资源都有统一的且在网上唯一的地址，该地址就叫URL（Uniform Resource Locator,统一资源定位符），它是WWW的统一资源定位标志，就是指网络地址。互联网中我们获取彼此数据，通过一个准确的地址可以获取到数据。但弊端也显而易见。当服务器宕机，或者资源改变了存储路径。那么访问的文件就无从获取了。
URN则是对应URL问题所在。它提供了唯一的字符串去标识了这个资源。这时资源的位置能做到准确的定位。但看似完美的资源定位，但却是不太可行的。 第一，唯一的字符串需要解析器去解析的，这个解析器构建是比较麻烦的。第二，资源量的巨大也限制了它的使用，资源任何变动都会对应新的地址。无疑工作量是巨大的。
3）PathMatcher是Spring的一个概念模型接口，该接口抽象建模了概念"路径匹配器"，一个"路径匹配器"是一个用于路径匹配的工具。AntPathMatcher是PathMatcher的实现类。AntPathMatcher使用例子如下：
AntPathMatcher antPathMatcher = new AntPathMatcher();
antPathMatcher.isPattern("/user/001");// 返回 false
antPathMatcher.isPattern("/user/*"); // 返回 true
antPathMatcher.match("/user/001","/user/001");// 返回 true
antPathMatcher.match("/user/*","/user/001");// 返回 true
antPathMatcher.matchStart("/user/*","/user/001"); // 返回 true
antPathMatcher.matchStart("/user/*","/user"); // 返回 true
antPathMatcher.matchStart("/user/*","/user001"); // 返回 false
antPathMatcher.extractPathWithinPattern("uc/profile*","uc/profile.html"); // 返回 profile.html
antPathMatcher.combine("uc/*.html","uc/profile.html"); // uc/profile.html
4）在登陆失败时，我们不是直接跳转页面，而是要结合页面中的js代码来分析。首先，我们在页面文件中引入了一个request.js这个js文件，
再看request.js这个文件，其中有如下这段代码：
可以发现，当传过来的消息显示是未登陆的时候，会在浏览器的Console中打印日志，并跳转至login.html。
767
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
