目录
项目结构：
数据库表：
项目依赖：POM文件
Properties配置文件：
静态页面：
Login.html：
Reg.html：
Success.html：
END1.html：
END2.html：
login.css：
背景图片：
MVC架构：
Dao数据库持久层：
Service业务逻辑层：
Controller控制层：
案例展示：
使用SpringBoot+MyBatis完成登录注册板块：
项目结构：
数据库表：
📎student.sql
-- auto-generated definitioncreate table student(stu_id int unsigned zerofill auto_increment comment '学生id'primary key,stu_namevarchar(40) not null comment '学生姓名',stu_no varchar(50) not null comment '学生学号',stu_phone varchar(50) null comment '学生电话',stu_password varchar(50) not null comment '学生密码');
项目依赖：POM文件
使用了Lombok简化了开发！！！
<?xml version="1.0" encoding="UTF-8"?><project xmlns="/POM/4.0.0" xmlns:xsi="/2001/XMLSchema-instance"xsi:schemaLocation="/POM/4.0.0 /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.4.3</version><relativePath/> <!-- lookup parent from repository --></parent><groupId>com.krian</groupId><artifactId>demo</artifactId><packaging>jar</packaging><version>0.0.1-SNAPSHOT</version><name>demo</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-web</artifactId></dependency><dependency><groupId>org.mybatis.spring.boot</groupId><artifactId>mybatis-spring-boot-starter</artifactId><version>2.1.3</version></dependency><dependency><groupId>org.projectlombok</groupId><artifactId>lombok</artifactId><optional>true</optional></dependency><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-test</artifactId><scope>test</scope></dependency><dependency><groupId>mysql</groupId><artifactId>mysql-connector-java</artifactId><version>8.0.23</version></dependency><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-thymeleaf</artifactId></dependency><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-jdbc</artifactId></dependency></dependencies><build><plugins><plugin><groupId>org.springframework.boot</groupId><artifactId>spring-boot-maven-plugin</artifactId><configuration><excludes><exclude><groupId>org.projectlombok</groupId><artifactId>lombok</artifactId></exclude></excludes></configuration></plugin></plugins><!-- <resources>--><!--<resource>--><!--<directory>src/main/resources</directory>--><!--<includes>--><!-- <include>**/*.properties</include>--><!-- <include>**/*.xml</include>--><!-- <include>**/*.html</include>--><!-- <include>**/*.jpg</include>--><!--</includes>--><!--<filtering>true</filtering>--><!--</resource>--><!--<resource>--><!--<directory>src/main/java</directory>--><!--<includes>--><!-- <include>**/*.properties</include>--><!-- <include>**/*.xml</include>--><!--</includes>--><!--<filtering>true</filtering>--><!--</resource>--><!-- </resources>--></build></project>
Properties配置文件：
配置了数据库连接信息
#数据库连接信息：spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driverspring.datasource.url=jdbc:mysql://localhost:3306/milib?useUnicode=true&characterEncoding=utf8&useSSL=truespring.datasource.username=rootspring.datasource.password=131452#配置mapper：mybatis.mapper-locations=classpath:mapper/*.xml#关闭Thymeleaf页面缓存：spring.thymeleaf.cache=false#开启驼峰命名：mybatis.configuration.map-underscore-to-camel-case=true
静态页面：
Login.html：
<!DOCTYPE html><html xmlns:th=""><head><meta charset="UTF-8"><title>登录页面</title><link rel="stylesheet" th:href="@{/css/login.css}"><style>#s1{float: left;margin: 50px 0px 0px 100px;}#s2{float: left;margin: 50px 0px 0px 50px;}</style><script type="text/javascript">function f2(){var regx = /^[a-zA-Z0-9]{5,12}$/;var password = document.getElementById("password").value;if(regx.test(password)){document.getElementById("d2").style.color = "green";document.getElementById("d2").innerHTML="√";return true;}else{document.getElementById("d2").style.color = "red";document.getElementById("d2").innerHTML="请重新输入！！！";return false;}}function subForm(){if (f2()){return true;}return false;}</script></head><body><div><form th:action="@{/result}" method="get" onsubmit="return subForm()"><table><tr><td><span>用户名：</span></td><td><input id="username" type="text" name="username" placeholder="请输入您的用户名" onblur="f1()"><span id="d1"></span></td></tr><tr><td><span>密码：</span></td><td><input id="password" type="password" name="password" placeholder="请输入您的密码" onblur="f2()"><span id="d2"></span></td></tr></table><input id="s1" type="submit" value="登录"></form><form th:action="@{/reg}" method="get" ><input id="s2" type="submit" value="注册" onclick="zhuCe()"></form></div></body></html>
Reg.html：
<!DOCTYPE html><html xmlns:th=""><head><meta charset="UTF-8"><title>注册页面</title><link rel="stylesheet" th:href="@{/css/login.css}"><style type="text/css">#s1{float: left;margin: 50px 0px 0px 120px;}</style><script type="text/javascript">function f2(){var regx = /^[a-zA-Z0-9]{5,12}$/;var password = document.getElementById("password").value;if(regx.test(password)){document.getElementById("d2").style.color = "green";document.getElementById("d2").innerHTML="√";return true;}else{document.getElementById("d2").style.color = "red";document.getElementById("d2").innerHTML="×";return false;}}function subForm(){if (f2()){return true;}return false;}</script></head><body><form action="/end" method="get" onsubmit="return subForm()"><table><tr><td> <span>用户名：</span></td><td><input id="username" type="text" name="username" placeholder="请输入您想要设置的用户名！"><span id="d1"></span></td></tr><tr><td><span>密码：</span></td><td><input id="password" type="password" name="password" placeholder="请输入您想要设置的密码！" onblur="f2()"><span id="d2"></span></td></tr><tr><td><span>学号：</span></td><td><input id="stuNo" type="text" name="stuNo" placeholder="请输入您的学号！"><span id="d3"></span></td></tr><tr><td><span>电话：</span></td><td><input id="phone" type="text" name="phone" placeholder="请输入您的电话号码！"><span id="d4"></span></td></tr><tr><td></td><td><input id="s1" type="submit" value="注册"></td></tr></table></form></body></html>
Success.html：
<!DOCTYPE html><html xmlns:th=""><head><meta charset="UTF-8"><title>Title</title><link rel="stylesheet" th:href="@{/css/login.css}"></style></head><body><h1>Hi,欢迎登录！</h1></body></html>
END1.html：
<!DOCTYPE html><html xmlns:th=""><head><meta charset="UTF-8"><title>注册成功</title><link rel="stylesheet" th:href="@{/css/login.css}"><script type="text/javascript">window.onload = function f() {var i =5;var a = setInterval(function () {i--;if(i<=0){document.getElementById("p1").innerHTML = "注册成功，返回登录界面";clearInterval(a);location = "/tologin";}else {document.getElementById("p1").innerHTML = "注册成功,还有"+i+"秒跳转回登录界面";return false;}},1000)}</script></head><body><p id="p1">注册成功,还有5秒跳转回登录界面</p></body></html>
END2.html：
<!DOCTYPE html><html xmlns:th=""><head><meta charset="UTF-8"><title>注册失败</title><link rel="stylesheet" th:href="@{/css/login.css}"><script type="text/javascript">window.onload = function f() {var i =5;var a = setInterval(function () {i--;if(i<=0){document.getElementById("p1").innerHTML = "注册失败，返回登录界面";clearInterval(a);location = "/tologin";}else {document.getElementById("p1").innerHTML = "注册失败,还有"+i+"秒跳转回登录界面";return false;}},1000)}</script></head><body><p id="p1">注册失败,还有5秒跳转回登录界面</p></body></html>
login.css：
body{background-image: url("../images/back.jpg");background-size: 100%;}
背景图片：
MVC架构：
Dao数据库持久层：
持久层，定义操作数据库方法：
StudentController.java：package com.krian.demo.dao.studentDao;import com.krian.demo.pojo.Student;import org.apache.ibatis.annotations.Mapper;import org.springframework.stereotype.Repository;/*** @Author: Lunaticer* @Create: -07-26 23:23* @Tip: Keeping the eyes of the prize !* @Description: dao持久层，对应daoMapper.xml操作数据库！*/@SuppressWarnings({"all"})@Mapper@Repositorypublic interface StuMapper {//通过学生姓名查询：public Student selectStuByName(String name);//插入学生数据：public int insertStudent(Student student);}
以接口的形式进行方法的定义，对应DaoMapper.xml对具体的数据库操作进行实现：
StuMapper.xml：
<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE mapper PUBLIC "-////DTD Mapper 3.0//EN" "/dtd/mybatis-3-mapper.dtd"><!--映射dao接口类--><mapper namespace="com.krian.demo.dao.studentDao.StuMapper"><select id="selectStuByName" resultType="com.krian.demo.pojo.Student" parameterType="String">select * from student where stu_name = #{name}</select><insert id="insertStudent" parameterType="com.krian.demo.pojo.Student">insert into student(stu_name,stu_no,stu_phone,stu_password)values (#{stuName},#{stuNo},#{stuPhone},#{stuPassword})</insert></mapper>
Service业务逻辑层：
通过调用Dao层接口，实习具体复杂的业务逻辑：
StudentService.java：
package com.krian.demo.service.StudentService;import com.krian.demo.dao.studentDao.StuMapper;import com.krian.demo.pojo.Student;import org.springframework.beans.factory.annotation.Autowired;import org.springframework.stereotype.Service;/*** @Author: Lunaticer* @Create: -07-26 23:30* @Tip: Keeping the eyes of the prize !* @Description: 业务逻辑层，调用dao层接口，实现业务逻辑，返回执行结果给控制层！*/@SuppressWarnings({"all"})@Servicepublic class StudentService {@AutowiredStuMapper stuMapper;/*** 学生登录** @param student* @return*/public boolean login(Student student){String loginName = student.getStuName();String loginPassWord = student.getStuPassword();Student loginStudent = stuMapper.selectStuByName(loginName);System.out.println("进行验证！！！");if (loginStudent == null){return false;} else if (loginStudent.getStuPassword().equals(loginPassWord)){return true;} else{return false;}}/*** 学生注册** @param student* @return*/public boolean reg(Student student){int i = stuMapper.insertStudent(student);if (i > 0){return true; //注册成功！} else {return false; //注册失败！}}}
Controller控制层：
通过调用业务层执行具体业务，通过业务层返回判断，实现具体的页面跳转，视图控制：
StudentController.java：
package com.krian.demo.controller.studentController;import com.krian.demo.pojo.Student;import com.krian.demo.service.StudentService.StudentService;import org.springframework.beans.factory.annotation.Autowired;import org.springframework.stereotype.Controller;import org.springframework.web.bind.annotation.GetMapping;import org.springframework.web.bind.annotation.RequestMapping;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;/*** @Author: Lunaticer* @Create: -07-26 23:38* @Tip: Keeping the eyes of the prize !* @Description: 控制层，接收请求，控制视图跳转！*/@SuppressWarnings({"all"})@Controllerpublic class StudentController {@AutowiredStudentService studentService;/*** 登录** @return*/@RequestMapping("/tologin")public String login(){return "Login";}@GetMapping("/result")public String login(HttpServletRequest req, HttpServletResponse resp) {//前端获取数据：String studentName = req.getParameter("username");String stduentPassword = req.getParameter("password");//创建实例，接收前端数据：Student student = new Student();student.setStuName(studentName);student.setStuPassword(stduentPassword);//调用Service层方法：boolean login = studentService.login(student);//判断Service层返回的结果，进行页面的跳转：if (login == true){return "Success";} else {return "Login";}}/*** 注册** @return*/@GetMapping("/reg")public String reg(){return "Reg";}@GetMapping("/end")public String end(HttpServletRequest req, HttpServletResponse resp) {//获取前端数据；String username = req.getParameter("username");String password = req.getParameter("password");String stuNo = req.getParameter("stuNo");String phone = req.getParameter("phone");//创建实例接收数据：Student student = new Student();student.setStuPassword(password);student.setStuNo(stuNo);student.setStuName(username);student.setStuPhone(phone);System.out.println("插入数据！！！");//判断Service层返回的结果，进行页面的跳转：boolean flog = studentService.reg(student);if (flog){return "END1"; //注册成功！} else {return "END2"; //注册失败！}}}
