简介
把之前的增删改查项目改一改，添加一个登录界面（login），如果直接从URL中访问index页，则提示先登录然后跳转到login页面
项目规划
MYSQL中添加user表，写入一些数据，用来存放登录数据
项目中在pojo中添加User.java实体类，用来对接MYSQL中的user表的字段
创建UserMapper
创建UserService.java
创建UserController.java（登录/注册接口）
创建login.html前端登录界面
创建MyBatis XML映射文件
开发
1.项目文件结构
2.User.java
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
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
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
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
<!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 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.数据库
创建表
CREATE TABLE user (
id INT PRIMARY KEY AUTO_INCREMENT,
username VARCHAR(50) NOT NULL UNIQUE,
password VARCHAR(50) NOT NULL);
插入数据
insert into user value(0,'1001','123456'),(1,'1002','456789'),(2,'1003','9245');
