目录
一 创建项目
1:使用代码生成器创建
2:创建需要的包和类
import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;
@Data
@AllArgsConstructor
@NoArgsConstructor
public class HttpResult {
private Object data;//储存查到的数据
private int pageTotle;//统计查到的数量
private int code;//200成功,500失败
private String msg;//提示
}
3:配置数据库等连接
spring:
# 配置数据源信息
datasource:
# 配置数据源类型
type: com.zaxxer.hikari.HikariDataSource
# 配置连接数据库信息
driver-class-name: com.mysql.cj.jdbc.Driver
url: jdbc:mysql://localhost:3306/study?characterEncoding=utf-8&useSSL=false&allowPublicKeyRetrieval=true
username: root
password: 123456
mybatis-plus:
mapper-locations: classpath:mappers/*.xml
type-aliases-package: com.woniu.paper.entity
configuration:
# 配置MyBatis日志
log-impl: org.apache.ibatis.logging.stdout.StdOutImpl
二 后端开发
1:创建IUserService接口并写登录方法
@author lei
* @since 2022-11-18
*/
public interface IUserService {
public HttpResult login(String userCode, String pwd);
}
2:在UserServiceImp中实现登录方法
登录成功是将用户信息存于redis数据中
package com.woniu.paper.service.impl;
import com.baomidou.mybatisplus.core.conditions.Wrapper;
import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
import com.baomidou.mybatisplus.core.mapper.BaseMapper;
import com.sun.corba.se.impl.resolver.SplitLocalResolverImpl;
import com.woniu.paper.entity.HttpResult;
import com.woniu.paper.entity.User;
import com.woniu.paper.service.IUserService;
import com.woniu.paper.mapper.UserMapper;
import com.baomidou.mybatisplus.extension.service.impl.ServiceImpl;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import redis.clients.jedis.Jedis;
import java.util.Collection;
import java.util.Map;
import java.util.function.Function;
/**
* <p>
* 服务实现类
* </p>
*
* @author lei
* @since 2022-11-18
*/
@Service
public class UserServiceImpl implements IUserService{
@Autowired(required = false)
private UserMapper userMapper;
public HttpResult login(String userCode, String pwd) {
QueryWrapper<User> queryWrapper = new QueryWrapper<>();
queryWrapper.eq("user_code",userCode);
queryWrapper.eq("user_password",pwd);
User user = userMapper.selectOne(queryWrapper);
HttpResult result=null;
if(user!=null){
//登录成功后,将用户的id保存到redis中
Jedis jedis = new Jedis("127.0.0.1",6379);
jedis.set(user.getId()+"",user.getId()+"");//将id保存到redis中
jedis.close();
result=new HttpResult(user,0,200,"登录成功");
}else{
result=new HttpResult(null,0,500,"登录失败");
}
return result;
}
}
3:在拦截器中实现登录放行的方法
用户登录时以及通过登录是储存的用户id,如果用户传入的id在redis中有储存即放行
3.1 获取用户的登录路径,并判断为登录路径时放行
3.2 判断用户传入的id是否与redis中的id匹配
package com.woniu.paper.interception;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.HandlerInterceptor;
import org.springframework.web.servlet.ModelAndView;
import org.springframework.web.servlet.config.annotation.InterceptorRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurerAdapter;
import redis.clients.jedis.Jedis;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
@Configuration
public class AuthInterceptor extends WebMvcConfigurerAdapter {
@Override
public void addInterceptors(InterceptorRegistry registry) {
HandlerInterceptor handlerInterceptor=new HandlerInterceptor() {
@Override
public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception {
boolean isGo=false;
String url=request.getRequestURI();//获取当前请求的接口路径
System.out.println("当前请求的路径"+url);
//获取用户请求时传递的uid
String uid=request.getParameter("uid");
//获取uid查询redis中是否有对应的数据
Jedis jedis = new Jedis("127.0.0.1",6379);
// String str = jedis.get(uid);
if(url.contains("/paper/user/login")){
isGo=true;
}else if(jedis.get(uid)!=null){//如果redis中储存的uid不为空放行
isGo=true;
}
jedis.close();
return isGo;
}
@Override
public void postHandle(HttpServletRequest request, HttpServletResponse response, Object handler, ModelAndView modelAndView) throws Exception {
}
@Override
public void afterCompletion(HttpServletRequest request, HttpServletResponse response, Object handler, Exception ex) throws Exception {
}
};
registry.addInterceptor(handlerInterceptor).addPathPatterns("/**");
}
}
4:在controller类中掉方法
package com.woniu.paper.controller;
import com.woniu.paper.entity.HttpResult;
import com.woniu.paper.service.IUserService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RestController;
/**
* <p>
* 前端控制器
* </p>
*
* @author lei
* @since 2022-11-18
*/
@RestController
@RequestMapping("/paper/user")
public class UserController {
@Autowired
private IUserService iUserService;
@CrossOrigin(origins="*")
@RequestMapping("/login")
public HttpResult login(String userCode,String pwd){
return iUserService.login(userCode, pwd);
}
@RequestMapping("/list")
public String List(){
return "jhh";
}
}
三 前端代码
登录成功后将用户id保存在前端
localStorage.setItem("uid",response.data.data.id);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link href="assets/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
<script src="assets/jquery-3.5.1.min.js"></script>
<script src="assets/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<script src="assets/vue.min-v2.5.16.js"></script>
<script src="assets/vue-router.min-2.7.0.js"></script>
<script src="assets/axios.min.js"></script>
</head>
<body>
<div class="container" id="app">
<div class="row">
<div class="col-md-4 col-md-offset-4">
<lable>用户名</lable>
<input type="text" size="12" class="form-control " v-model="userCode">
<lable>密码</lable>
<input type="password" size="12" class="form-control" v-model="pwd">
<button class="btn btn-primary" @click="doLogin">登录</button>
</div>
</div>
</div>
<script>
new Vue({
el:'#app',
data:{
userCode:null,
pwd:null
},
methods:{
doLogin(){
var url="http://127.0.0.1:8080/paper/user/login?userCode="+this.userCode+"&pwd="+this.pwd;
axios.get(url).then(response=>{
console.log(response.data)
if(response.data.color==200){
//将用户的id保存起来(localStorage)
localStorage.setItem("uid",response.data.data.id);
window.location.href="index.html";
//进入首页
console.log("进入首页")
}else{
alert(response.data.msg);
}
});
}
}
});
</script>
</body>
</html>