前后端分离实现登录功能 springMVC+Rides

.吸吸欧气

已于 2022-11-25 17:20:48 修改

阅读量557

点赞数 2

文章标签： java 开发语言 javascript html5

于 2022-11-21 01:39:00 首次发布

本文链接：https://blog.csdn.net/weixin_52837547/article/details/127956954

版权

后端:

连接数据库

spring:
  # 配置数据源信息
  datasource:
    # 配置数据源类型
    type: com.zaxxer.hikari.HikariDataSource
    # 配置连接数据库信息
    driver-class-name: com.mysql.cj.jdbc.Driver
    url: jdbc:mysql://localhost:3306/paper?characterEncoding=utf-8&useSSL=false
    username: root
    password: 123456
mybatis-plus:
  mapper-locations: classpath:mappers/*.xml
  type-aliases-package: com.woniu.paper.entity

添加依赖

<dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
        </dependency>

        <!-- mybatis-plus -->
        <dependency>
            <groupId>com.baomidou</groupId>
            <artifactId>mybatis-plus-boot-starter</artifactId>
            <version>3.5.1</version>
        </dependency>
        <!-- lombok -->
        <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId> <optional>true</optional>
        </dependency>
        <!-- mysql-connector -->
        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <scope>runtime</scope>
        </dependency>

        <!-- mybatis-plus代码生成器 -->
        <dependency>
            <groupId>com.baomidou</groupId>
            <artifactId>mybatis-plus-generator</artifactId>
            <version>3.5.1</version>
        </dependency>
        <dependency>
            <groupId>org.freemarker</groupId>
            <artifactId>freemarker</artifactId>
            <version>2.3.31</version>
        </dependency>

        <!-- jedis依赖，访问redis数据库-->
        <dependency>
            <groupId>redis.clients</groupId>
            <artifactId>jedis</artifactId>
            <version>2.9.0</version>
        </dependency>
    </dependencies>

一.创建Mapper登录接口

public interface UserMapper extends BaseMapper<User> {

}

二.

2.1在service中进行管理

public interface IUserService  {
    HttpResult login(String userCode, String pwd);
}

2.2实现IuserService

@Service
public class UserServiceImpl implements IUserService {
    @Autowired(required = false)
    private UserMapper userMapper;
    
    public HttpResult login(String userCode, String pwd){
        //条件构造器
        QueryWrapper<User> queryWrapper = new QueryWrapper<User>();
        //构造查询条件
        queryWrapper.eq("user_code",userCode);
        queryWrapper.eq("user_password",pwd);

        User user = userMapper.selectOne(queryWrapper);
        HttpResult result = null;
        Jedis jedis = new Jedis("42.192.37.216", 6379);
        if (user != null){
            //登录成功, 将用户的id保存到redis中
            jedis.set(user.getId()+"",user.getId()+""); //将用户id保存到redis
            result = new HttpResult(user,0,200,"登陆成功");
        }else {
            result = new HttpResult(null,0,500,"登陆失败");
        }
        jedis.close();
        return result;
    }
}

三.设置拦截器

@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);
                //获取用户请求时传递的id
                String uid=request.getParameter("uid");//接受用户登录的参数

                //获取根据uid查询redis中是否哦呦对应的数据
                Jedis jedis=new Jedis("42.192.37.216",6379);

                if(url.contains("/paper/user/login")){
                    isGo=true;
                }else if (jedis.get(uid)!=null){//如果用户登录传递的值与redis中一致,则方形
                 isGo=true;
                }
                jedis.close();
                return isGo;
            }

        registry.addInterceptor(handlerInterceptor).addPathPatterns("/**");

    }
}

四,创建管理类controller

@RestController
@RequestMapping("/paper/user")
public class UserController {
    @Autowired(required = false)
    private IUserService userService;
    @CrossOrigin(origins = "*")//跨域访问
    @RequestMapping("/login")
    public HttpResult login(String userCode,String pwd){

        return userService.login(userCode,pwd);
    }

前端:

一.导入vue与bootstrap样式

<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 id="app" class="container">
            <div class="row">
                <div class="col-md-4 col-md-offset-4">
                    <label>用户名</label>
                    <input type="text"  class="form-control" v-model="userCode">
                    <label>密码</label>
                    <input type="passwd"  class="form-control" v-model="pwd">
                    <button class="btn btn-primary" @click="doLogin">登录</button>
                </div>
            </div>
        </div>

三引入Vue进行数据传输与绑定

 <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.code==200){
                                //将用户id缓存到本地 保存起来(licalStorage)
                                localStorage.setItem("uid",response.data.data.id);
                                //进入首页
                                console.log("进入首页")
                                alert("yser")
                               // window.location.href="index.html"
                            }else{
                                alert(response.data.msg);
                            }
                        });
                    }
                }
            });
        </script>