【SpringBoot】DEMO:实战②——登录注册功能实现
SpringBoot学习视频
最近看的小匠SpringBoot的教学视频,看了20多章的网课,跟着老师跑,感觉比较迷,希望巩固知识
小匠视频链接: https://www.bilibili.com/video/av65117012
——————————————————————————————
前排提醒:暂时不会写cookie和session。。。
前排提醒:不太会用Service层,校验功能在Controller层实现了。。。
前排提醒:没怎学JavaScript,使用 thymeleaf 前端模板进行数据传输。。。
——————————————————————————————
一、实现工具:
- 编译器选择 :DIEA
- 数据库选择 :MySql57
- 前端框架选择 : BootStrap Thymeleaf
- 后端框架 :SpringBoot
二、目录结构:
三、设计思路(第一次写,语文高考刚及格,见谅)
- 输入网址,进入主页 index.html ,此时为:游客模式 ,主页没有东西
- 点击注册,输入账号和密码,注册成功,进入登录页面
- 输入账号密码,登录成功,进入主页index.htm,此时为登录模式,可以看到图片
- 结束,下面进行代码演示 ↓
四、代码演示(注释已经写好,每个类的功能不多描述)
1-3为基础配置
4-7为详细代码
8为效果显示gif
- maven依赖注入
<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
<modelVersion>4.0.0</modelVersion>
<parent>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-parent</artifactId>
<version>2.2.1.RELEASE</version>
<relativePath/> <!-- lookup parent from repository -->
</parent>
<groupId>com.example</groupId>
<artifactId>homework</artifactId>
<version>0.0.1-SNAPSHOT</version>
<name>homework</name>
<description>Demo project for Spring Boot</description>
<properties>
<java.version>1.8</java.version>
</properties>
<dependencies>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web-services</artifactId>
</dependency>
<!--mybatis-->
<dependency>
<groupId>org.mybatis.spring.boot</groupId>
<artifactId>mybatis-spring-boot-starter</artifactId>
<version>1.3.1</version>
</dependency>
<!--整合mysql-->
<dependency>
<groupId>mysql</groupId>
<artifactId>mysql-connector-java</artifactId>
<scope>runtime</scope>
</dependency>
<!--json @responseBody/@requestBody-->
<dependency>
<groupId>com.alibaba</groupId>
<artifactId>fastjson</artifactId>
<version>1.2.54</version>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-test</artifactId>
<scope>test</scope>
<exclusions>
<exclusion>
<groupId>org.junit.vintage</groupId>
<artifactId>junit-vintage-engine</artifactId>
</exclusion>
</exclusions>
</dependency>
<dependency>
<groupId>org.projectlombok</groupId>
<artifactId>lombok</artifactId>
<version>1.18.4</version>
<scope>provided</scope>
</dependency>
</dependencies>
<build>
<plugins>
<plugin>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-maven-plugin</artifactId>
</plugin>
</plugins>
</build>
</project>
- application.properties 代码(已解决mysql时序问题)
spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver
spring.datasource.url=jdbc:mysql://localhost:3306/user_spring?serverTimezone=UTC&characterEncoding=utf-8
spring.datasource.username=root
spring.datasource.password=1234
- SoringBoot 入口代码
@SpringBootApplication
public class HomeworkApplication {
public static void main(String[] args) {
SpringApplication.run(HomeworkApplication.class, args);
}
}
4. 控制器部分
- 分为3个控制器
- 注册控制器 : regiestController
- 登录控制器 : loginController
- 主页控制器 : indexController
注册控制器 : regiestController 代码展示(注释已经写好):
@Controller
public class RegiestController {
//实现自动装配
@Autowired
private UserMapper userMapper;
//点击注册按钮后,获取input中的两个name,作为参数回传到regiest_show(),进行检测
@PostMapping("/regiest")
public String regiest_show(
@RequestParam("username") String username,
@RequestParam("password") String password,
@RequestParam("btn_regiest") String btn_regiest,
Model model
) {
//把前端的username和password写入user对象,方便后续操作
User user = new User();
user.setUsername(username);
user.setPassword(password);
if(username == null || username == "" || password == "" || password == null ){
model.addAttribute("btn_regiest",btn_regiest);
return "error";
}else{
//使用findByUsername()方法,判断userCheck是否为空(在数据库中是否存在)
User userCheck = userMapper.findByUsername(username);
if (userCheck == null) {
//不存在,执行插入操作,注册成功,返回ok_regiest页面
userMapper.add(user);
model.addAttribute("regiest_username", username);
model.addAttribute("regiest_password", password);
return "ok_regiest";
} else {
int CunZai = 1;
//账号存在,返回error页面
model.addAttribute("regiest_username", username);
model.addAttribute("CunZai",CunZai);
return "error";
}
}
}
}
登录控制器 : loginController 代码展示
@Controller
public class LoginController {
//实现自动装配
@Autowired
private UserMapper userMapper;
//验证账号密码
@PostMapping("/login")
//获取三个参数,账号,密码,按钮是否被点击
public String login(@Param("username") String username,
@Param("password") String password,
@Param("btn_login") String btn_login,
Model model) {
User user = new User();
user.setUsername(username);
user.setPassword(password);
//使用findByUsername_login()方法,对数据库进行检查,判断账号密码是否正确
User check_login = userMapper.findByUsername_login(username,password);
//正确,返回index页面,错误,返回error页面
if(check_login != null){
int ok = 1;
model.addAttribute("ok",ok);
model.addAttribute("success_login_username",username);
return "index";
}else{
model.addAttribute("error_btn_login",btn_login);
model.addAttribute("error_login_username",username);
model.addAttribute("error_login_password",password);
return "error";
}
}
//返回登录页面
@GetMapping("/login.html")
public String return_login(){
return "login";
}
//返回注册页面
@GetMapping("/regiest.html")
public String return_regiest(){
return "regiest";
}
}
主页控制器 :indexController 代码展示
@Controller
public class IndexController {
//主页面入口
@GetMapping("/")
public String regiset() {
return "index";
}
}
- Mapper层 :UserMapper
- 提供数据库操作接口
@Mapper
@Repository
public interface UserMapper {
//注册成功,插入一条数据
@Insert("insert into user(username,password) values (#{username},#{password})")
void add(User user);
//检验注册的username是否已经存在数据库中,通过User类创建findByUsername对象,传进username进行与数据库比较
@Select("select * from user where username = #{username}")
User findByUsername(@Param("username") String username);
//登录用:检验账号密码是否正确
@Select("select * from user where username = #{username} and password = #{password}")
User findByUsername_login(@Param("username") String username,
@Param("password") String password);
}
- model层
- 数据库一张表对应一个实体类,类属性同表字段一一对应
@Repository
public class User {
private Long id;
private String username;
private String Password;
public Long getId() {
return id;
}
public void setId(Long 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) {
Password = password;
}
}
- 5个HTML页面 : 主页,注册页面,注册成功页面,登录页面,错误页面
- 登录页面
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/bootstrap-theme.min.css">
<link rel="stylesheet" href="css/community.css">
<script src="js/bootstrap.min.js" type="application/javascript"></script>
<head>
<meta charset="UTF-8">
<title>用户登录</title>
</head>
<body>
<form align="center" action="/login" method="post">
<div>这是登录页面</div>
<div>这是登录页面</div>
<div>这是登录页面</div>
<div>账号:<input name="username" id="username" type="text"/></div>
<div>密码:<input name="password" id="" type="password"></div>
<input type="submit" value="登录" name="btn_login" id="btn_login">
<a href="regiest.html">还没有账号?点击这里注册一个</a>
</form>
</body>
</html>
- 注册页面
<!DOCTYPE html>
<html html lang="en" xmlns:th="http://www.thymeleaf.org">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/bootstrap-theme.min.css">
<link rel="stylesheet" href="css/community.css">
<script src="js/bootstrap.min.js" type="application/javascript"></script>
<head>
<meta charset="UTF-8">
<title>注册页面</title>
</head>
<body>
<form align="center" action="/regiest" method="post">
<div>这是注册页面</div>
<div>这是注册页面</div>
<div>这是注册页面</div>
<div>账号:<input name="username" id="username" type="text"/></div>
<div>密码:<input name="password" id="" type="password"></div>
<input type="submit" value="注册" name="btn_regiest" id="btn_regiest">
<a href="login">已经有账号,去登录</a>
</form>
</body>
</html>
- 注册成功页面
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/bootstrap-theme.min.css">
<link rel="stylesheet" href="css/community.css">
<script src="js/bootstrap.min.js" type="application/javascript"></script>
<head>
<meta charset="UTF-8">
<title>注册成功</title>
</head>
<body>
<form align="center">
<div>你注册的用户名为:<span th:text="${regiest_username}"></span><br></div>
<div>你注册的密码为:<span th:text="${regiest_password}"></span></div>
<div><a href="login.html">去登录吧</a></div>
</form>
</body>
</html>
- 主页 (使用了 Bootstrap 和 Thymeleaf 前端框架)
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/bootstrap-theme.min.css">
<link rel="stylesheet" href="css/community.css">
<script src="js/bootstrap.min.js" type="application/javascript"></script>
<head>
<meta charset="UTF-8">
<title>欢迎来到我的主页</title>
</head>
<body>
<!--导航栏-->
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">中意社区</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<!-- 未登录,游客模式-->
<li th:if="${ok != 1}"><a href="login.html">游客模式,点击登录</a></li>
<!-- 登录,客户模式-->
<li th:if="${ok == 1}">
<a href="login.html">欢迎回来:<span th:text="${success_login_username}"></span>(点击此处可以切换账号)</a>
</li>
<li><a href="regiest.html">注册</a></li>
</ul>
</div>
</div>
</nav>
<!--未登录时看到的页面,游客模式-->
<div th:if="${ok != 1}">
<center><p>登录有惊喜!</p></center>
</div>
<!--//登录之后看到的页面-->
<div th:if="${ok == 1}">
<center><p>惊喜吗!</p>
<img src="picture/123.jpg"></center>
</div>
</body>
</html>
- 错误页面
- 在SpringBoot中,如果没有error.html页面,遇到错误将会自动跳转到springboot默认错误页面,设立了error.html后 ,将会跳转到此页面,相当于重写了error页面!
- 所有的错误都会集中在这里
- 登录:账号密码不匹配
- 注册: 账号或密码为空,已经有人注册了这个账号
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/bootstrap-theme.min.css">
<link rel="stylesheet" href="css/community.css">
<script src="js/bootstrap.min.js" type="application/javascript"></script>
<head>
<meta charset="UTF-8">
<title>错误页面</title>
</head>
<body>
<!--注册错误,注册的用户名 或 密码不能为空-->
<div th:if="${btn_regiest != null && error_btn_login == null }">
<p>注册的用户名 或 密码不能为空!</p>
<p>自己返回注册页面吧,懒得写Controller跳转代码了</p>
</div>
<!--登录错误-->
<div th:if="${error_btn_login != null}">
<p>账号和密码错了</p>
<p>自己返回登录页面吧,懒得写Controller跳转代码了</p>
</div>
<!--注册错误,已经被注册过了-->
<div th:if="${CunZai == 1}">
<p>你注册的ID:<span th:text="${regiest_username}"></span>已经被注册过了,请重新注册</p>
<p>自己返回注册页面吧,懒得写Controller跳转代码了</p>
</div>
</body>
</html>
五、运行演示
- 注册功能
- 登录功能