Sprint Boot登录案例

简介

把之前的增删改查项目改一改，添加一个登录界面（login），如果直接从URL中访问index页，则提示先登录然后跳转到login页面

项目规划

MYSQL中添加user表，写入一些数据，用来存放登录数据

项目中在pojo中添加User.java实体类，用来对接MYSQL中的user表的字段

创建UserMapper

创建UserService.java

创建UserController.java（登录/注册接口）

创建login.html前端登录界面

创建MyBatis XML映射文件

开发

1.项目文件结构

2.User.java

typescript 复制代码

package com.example.easy_add_del_change_select.pojo;

import lombok.Data;

public class User {
    private int id;
    private String username;
    private String password;

    public User(){}
    public User(String username,String password){
        this.username=username;
        this.password=password;
    }
    public int getId() {
        return id;
    }

    public void setId(int id) {
        this.id = id;
    }

    public String getUsername() {
        return username;
    }

    public void setUsername(String username) {
        this.username = username;
    }

    public String getPassword() {
        return password;
    }

    public void setPassword(String password) {
        this.password = password;
    }
    @Override
    public String toString(){
        return "id="+id+",username="+username+",password="+password;
    }
}

3.UserMapper.java

java 复制代码

package com.example.easy_add_del_change_select.mapper;

import com.example.easy_add_del_change_select.pojo.User;
import org.apache.ibatis.annotations.Mapper;

@Mapper
public interface UserMapper {
    // 登录查询
    User login(String username, String password);
    // 注册
    void register(User user);
}

4.UserService.java

typescript 复制代码

package com.example.easy_add_del_change_select.service;

import com.example.easy_add_del_change_select.mapper.UserMapper;
import com.example.easy_add_del_change_select.pojo.User;
import jakarta.annotation.Resource;
import org.springframework.stereotype.Service;

@Service
public class UserService {
    @Resource
    private UserMapper userMapper;

    public User login(String username, String password) {
        return userMapper.login(username, password);
    }

    public void register(User user) {
        userMapper.register(user);
    }
}

5.UserController.java

kotlin 复制代码

package com.example.easy_add_del_change_select.controller;

import com.example.easy_add_del_change_select.pojo.User;
import com.example.easy_add_del_change_select.service.UserService;
import jakarta.annotation.Resource;
import jakarta.servlet.http.HttpSession;
import org.springframework.web.bind.annotation.*;

@RestController
@RequestMapping("/user")
public class UserController {
    @Resource
    private UserService userService;

    // 登录
    @PostMapping("/login")
    public String login(String username, String password, HttpSession session) {
        User user = userService.login(username, password);
        if (user != null) {
            // 登录成功，存入session
            session.setAttribute("loginUser", user);
            return "success";
        }
        return "fail";
    }

    // 注册
    @PostMapping("/register")
    public String register(@RequestBody User user) {
        userService.register(user);
        return "success";
    }

    // 退出登录
    @GetMapping("/logout")
    public String logout(HttpSession session) {
        session.invalidate();
        return "logout";
    }

    //检测登录的接口
    @GetMapping("/checkLogin")
    public String checkLogin(HttpSession session) {
        User user = (User) session.getAttribute("loginUser");
        return user == null ? "nologin" : "login";
    }
}

6.login.html

xml 复制代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>登录</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <style>
        body{margin-top: 100px;}
    </style>
</head>
<body>
<div align="center">
    <h2>用户登录</h2>
    <form id="loginForm">
        账号：<input type="text" name="username" id="username"><br><br>
        密码：<input type="password" name="password" id="password"><br><br>
        <button type="button" onclick="login()">登录</button>
        <button type="button" onclick="register()">注册</button>
    </form>
</div>

<script>
    // 登录
    function login() {
        let username = $("#username").val();
        let password = $("#password").val();

        $.post("/user/login", {
            username: username,
            password: password
        }, function(res) {
            if (res === "success") {
                alert("登录成功！");
                location.href = "index.html"; // 跳商品页
            } else {
                alert("账号或密码错误");
            }
        });
    }

    // 注册
    function register() {
        let username = $("#username").val();
        let password = $("#password").val();

        $.ajax({
            url: "/user/register",
            type: "post",
            contentType: "application/json",
            data: JSON.stringify({
                username: username,
                password: password
            }),
            success: function(res) {
                alert("注册成功！请登录");
            }
        });
    }
</script>
</body>
</html>

7.UserMapper.xml

xml 复制代码

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
        "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.example.easy_add_del_change_select.mapper.UserMapper">

    <!-- 登录 -->
    <select id="login" resultType="com.example.easy_add_del_change_select.pojo.User">
        select * from user where username=#{param1} and password=#{param2}
    </select>

    <!-- 注册 -->
    <insert id="register">
        insert into user(username,password) values(#{username},#{password})
    </insert>
</mapper>

8.数据库

创建表

sql 复制代码

 CREATE TABLE user (
id INT PRIMARY KEY AUTO_INCREMENT,
username VARCHAR(50) NOT NULL UNIQUE,
password VARCHAR(50) NOT NULL);

插入数据

sql 复制代码

 insert into user value(0,'1001','123456'),(1,'1002','456789'),(2,'1003','9245');