一. 创建表
创建一个数据库springboot,在该数据库下创建一个user表
CREATE TABLE `user` (
`id` int NOT NULL AUTO_INCREMENT,
`username` varchar(45) UNIQUE, DEFAULT NULL,
`password` varchar(45) DEFAULT NULL,
PRIMARY KEY (`id`)
)
二. 编写实体类对象
package com.stu.springboot.pojo;
import com.baomidou.mybatisplus.annotation.IdType;
import com.baomidou.mybatisplus.annotation.TableId;
import lombok.Data;
@Data //会给实体类对象添加get和set方法、toString等方法
public class User {
@TableId(type = IdType.AUTO) //type = IdType.AUTO表示id自动递增
private Integer id;
private String username;
private String password;
}
三. Mapper层
package com.stu.springboot.mapper;
import com.baomidou.mybatisplus.core.mapper.BaseMapper;
import com.stu.springboot.pojo.User;
import org.apache.ibatis.annotations.Mapper;
@Mapper
public interface UserMapper extends BaseMapper<User> {
}
四. Service层
package com.stu.springboot.service;
import com.baomidou.mybatisplus.extension.service.IService;
import com.stu.springboot.pojo.User;
public interface UserService extends IService<User> {
}
package com.stu.springboot.service.impl;
import com.baomidou.mybatisplus.extension.service.impl.ServiceImpl;
import com.stu.springboot.mapper.UserMapper;
import com.stu.springboot.pojo.User;
import com.stu.springboot.service.UserService;
import org.springframework.stereotype.Service;
@Service
public class UserServiceImpl extends ServiceImpl<UserMapper, User> implements UserService {
}
五. Controller层
package com.stu.springboot.controller;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
@Controller
public class IndexController {
@GetMapping("/")
public String index(){
return "index";
}
}
package com.stu.springboot.controller;
import com.baomidou.mybatisplus.core.conditions.query.LambdaQueryWrapper;
import com.stu.springboot.common.R;
import com.stu.springboot.pojo.User;
import com.stu.springboot.service.UserService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.*;
import javax.servlet.http.Cookie;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
@Controller
public class UserController {
@Autowired
private UserService userService;
@GetMapping("/user/loginPage")
public String loginPage(){
return "user/login";
}
@GetMapping("/user/registerPage")
public String registerPage(){
return "user/register";
}
@PostMapping("/user/login")
@ResponseBody //添加@ResponseBody注解将返回的数据自动转化为json, @RequestBody将接收的数据转化为json
public R login(String username, String password, String isRemPwd, HttpServletRequest request, HttpSession session, HttpServletResponse response){
LambdaQueryWrapper<User> queryWrapper = new LambdaQueryWrapper<>();
queryWrapper.eq(User::getUsername, username).eq(User::getPassword, password);
User user = userService.getOne(queryWrapper);
if(user == null){
//登录失败
return R.error("用户名或密码错误");
}
//登录成功
session.setAttribute("loginUser", user);
//如果需要记住密码,则添加cookie
if("true".equals(isRemPwd)){
Cookie cookie = new Cookie("username", username);
cookie.setMaxAge(7*24*60*60); //cookie保存7天
cookie.setPath(request.getContextPath()+"/"); //设置cookie存在的路径
response.addCookie(cookie);
}else{
//如果不需要记住密码,则将以前创建的cookie删掉
Cookie cookie = new Cookie("username", null);
cookie.setMaxAge(0); //删除cookie
cookie.setPath(request.getContextPath()+"/"); //设置cookie存在的路径
response.addCookie(cookie);
}
return R.success(user);
}
@PostMapping("/user/register")
@ResponseBody
public R register(User user){
LambdaQueryWrapper<User> queryWrapper = new LambdaQueryWrapper();
queryWrapper.eq(User::getUsername, user.getUsername());
User registerUser = userService.getOne(queryWrapper);
if(registerUser != null){
return R.error("用户名已存在");
}
userService.save(user);
return R.success(user);
}
@GetMapping("/user/logout")
public String logout(HttpServletRequest request, HttpSession session, HttpServletResponse response){
//清空cookie
Cookie cookie = new Cookie("username", null);
cookie.setMaxAge(0); //删除cookie
cookie.setPath(request.getContextPath()+"/"); //设置cookie存在的路径
response.addCookie(cookie);
//销毁session
session.invalidate();
return "redirect:/"; //重定向到首页
}
}
上面需要用到自定义common包下的R类(响应对象类)
package com.stu.springboot.common;
import lombok.Data;
import java.util.HashMap;
import java.util.Map;
@Data
public class R<T> { //服务端响应的数据都会封装成此对象
private Integer code; //编码:1成功,0和其它数字为失败
private String message; //错误信息
private T objectData; //数据
private Map map = new HashMap(); //动态数据
public static <T> R<T> success(T object) {
R<T> r = new R<T>();
r.objectData = object;
r.code = 1;
return r;
}
public static <T> R<T> error(String message) {
R r = new R();
r.message = message;
r.code = 0;
return r;
}
public R<T> add(String key, Object value) {
this.map.put(key, value);
return this;
}
}
六. 编写页面
1. 在templates目录下创建一个index.html页面
<!DOCTYPE html>
<!--suppress ThymeleafVariablesResolveInspection -->
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<html>
<head>
<title>首页</title>
</head>
<body>
<a th:href="@{/user/loginPage}"><input type="button" value="登录"/></a>
<a th:href="@{/user/registerPage}"><input type="button" value="注册"/></a>
<a th:href="@{/manage/bookPage}"><input type="button" value="图书管理"/></a>
</body>
</html>
2. 在templates目录下创建一个user目录,在user目录下创建login.html和register.html页面
<!DOCTYPE html>
<!--suppress ThymeleafVariablesResolveInspection -->
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<title>用户登录</title>
<script type="text/javascript" src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> <!--引入jquery -->
<script type="text/javascript">
$(function(){
//给浏览器窗口添加键盘按下事件
$(window).keydown(function (e){
//如果按的是回车键,则提交登录请求
if(e.keyCode == 13){
$("#loginBtn").click();
}
});
//添加单击事件
$("#loginBtn").click(function(){
//获取请求参数
var loginUsername = $.trim($("#loginUsername").val()); //(将用户不小心输入的空格去掉)
var loginPassword = $.trim($("#loginPassword").val());
var isRemPwd = $("#isRemPwd").prop("checked");
//表单验证
//验证用户名:必须由字母或数字或下划线组成,并且长度为1-12位
var usernamePatt = /^\w{1,12}$/;
if(!usernamePatt.test(loginUsername)){
$("#msg").text("用户名不合法");
return;
}
//验证用户密码:必须由字母或数字或下划线组成,并且长度为6-12位
var passwordPatt = /^\w{6,12}$/;
if(!passwordPatt.test(loginPassword)){
$("#msg").text("密码不合法");
return;
}
//发送请求
$.ajax({
url:'[[@{/user/login}]]', //thymeleaf在ajax中设置地址行形式
data:{
username:loginUsername, //与controller中的形参名相同
password:loginPassword,
isRemPwd:isRemPwd
},
type:'post',
dataType:'json',
success:function (data){
if(data.code=="1"){
//登录成功,跳转到图书管理页面
window.location.href="/manage/bookPage";
}else{
//登录失败,不跳转(显示错误信息)
$("#msg").text(data.message);
}
}
});
});
});
</script>
</head>
<body>
<span id="msg"></span> <br/>
<form>
用户名:<input type="text" id="loginUsername"> <br/>
密码:<input type="password" id="loginPassword"> <br/>
<input type="checkbox" id="isRemPwd">记住密码<br/>
<button type="button" id="loginBtn">登录</button>
</form>
</body>
</html>
<!DOCTYPE html>
<!--suppress ThymeleafVariablesResolveInspection -->
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<title>用户注册</title>
<script type="text/javascript" src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> <!--引入jquery -->
<script type="text/javascript">
$(function(){
//给浏览器窗口添加键盘按下事件
$(window).keydown(function (e){
//如果按的是回车键,则提交登录请求
if(e.keyCode == 13){
$("#registerBtn").click();
}
});
//添加单击事件
$("#registerBtn").click(function(){
//获取请求参数
var registerUsername = $.trim($("#registerUsername").val()); //(将用户不小心输入的空格去掉)
var registerPassword = $.trim($("#registerPassword").val());
var confirmPassword = $.trim($("#confirmPassword").val());
var email = $.trim($("#email").val());
//表单验证
//验证用户名:必须由字母或数字或下划线组成,并且长度为1-12位
var usernamePatt = /^\w{1,12}$/;
if(!usernamePatt.test(registerUsername)){
$("#msg").text("用户名不合法");
return;
}
//验证用户密码:必须由字母或数字或下划线组成,并且长度为6-12位
var passwordPatt = /^\w{6,12}$/;
if(!passwordPatt.test(registerPassword)){
$("#msg").text("密码不合法");
return;
}
//验证确认密码:必须和密码相同
if(confirmPassword != registerPassword){
$("#msg").text("密码不一致");
return;
}
//发送请求
$.ajax({
url:'register',
data:{
username:registerUsername, //需要和Controller中方法的形参同名
password:registerPassword,
email:email
},
type:'post',
dataType:'json',
success:function (data){
if(data.code=="1"){
//注册成功,跳转到登录页面
window.location.href="/user/loginPage";
}else{
//注册失败,不跳转(显示错误信息)
$("#msg").text(data.message);
}
}
});
});
});
</script>
</head>
<body>
<span id="msg"></span> <br/>
<form>
用户名:<input type="text" id="registerUsername"> <br/>
用户密码:<input type="password" id="registerPassword"> <br/>
确认密码:<input type="password" id="confirmPassword"> <br/>
<button type="button" id="registerBtn">注册</button>
</form>
</body>
</html>