包含后端的登录页面与注册页面
简介：本文讲解含有前后端的，登录页面与注册页面怎么制作，本登录页面是一个前后端不分离的。
参考文章：
JS实现记住用户密码
用HTML+CSS构建一个绚丽的登录页面
提交表单与验证表单案例
JDBC数据库的连接
基于SpringBoot的SSMP整合案例
restful风格快速入门
IDEA快速构建SpringBoot项目
从参考如此多的文章就知道，其实实现起来还是有点点复杂的。
创建数据库
下面是我创建数据库的sql语句
-- ----------------------------
-- Table structure for user
-- ----------------------------
DROP TABLE IF EXISTS `user`;
CREATE TABLE `user` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`username` varchar(20) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL,
`password` varchar(50) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL,
PRIMARY KEY (`id`) USING BTREE
) ENGINE = InnoDB AUTO_INCREMENT = 51 CHARACTER SET = utf8 COLLATE = utf8_general_ci ROW_FORMAT = Dynamic;
-- ----------------------------
-- Records of user
-- ----------------------------
INSERT INTO `user` VALUES (1, 'LIHUA', '123456');
INSERT INTO `user` VALUES (2, 'zhangsan', '123');
INSERT INTO `user` VALUES (3, 'LISI', '456489');
建表成功之后的样子
前端部分
文件结构
css文件
把两个页面的公共的css文件放到同一个文件中。
water.css
body{
background: url("https://pic3.zhimg.com/v2-92879d7d6ddae16c6c880bf936a2b2ae_r.jpg");
/* 设置背景铺满 */
background-repeat:no-repeat;
background-size:100%;
}
form{
/* 设置透明度 */
opacity: 80%;
text-align: center;
/* 再设置内边距 使得内容更偏向于中央位置 */
/* 上方，下方内边距为120px 与 左边与右边均为100px 按照逆时针 */
/* 但是会撑大盒子 */
padding: 0px 100px;
/* 设置文本文字的大小 */
font-size: 18px;
/* 添加圆角边框 */
border-radius: 10px;
/* 增加外边距 */
/* 上下80px 然后左右居中 */
margin: 120px auto;
}
.textinput{
/* 设置宽高 */
height: 40px;
width: 100px;
/* 设置内边距 */
padding: 0 35px;
/* 去除边框 */
border: none;
/* 设置背景颜色 */
background: #F8F9F9;
/* 设置字体大小 */
font-size: 15px;
/* 给文本框加上阴影 */
box-shadow: 0px 1px 1px rgba(255, 255, 255, 0.7), inset 0px 2px 5px #aaaaaa;
/* 给文本框加上圆角边框 */
border-radius: 5px;
/* 给文本框中输入文字加上颜色 */
color: saddlebrown;
}
/* 筛选input标签中 type为"submit"的 进行渲染*/
input[type="submit"]{
/* 设置宽高 */
width: 110px;
height: 40px;
/* 内部文本居中 */
text-align: center;
/* 圆角边框 */
border-radius: 5px;
/* 设置字体 */
font:16px "黑体";
/* 设置背景颜色 */
background-color: #C0C6CB;
}
a {
/* 去除下划线 */
text-decoration: none;
}
a:hover {
/* 悬空的时候有被选中的样子 出现下划线*/
text-decoration: underline;
}
.main {
/* 设置为绝对定位 */
position: absolute;
/* 设置盒子放在中间的位置 */
left: 50%;
top: 50%;
/* 设置动态效果 */
transform: translate(-50%, -50%);
/* 设置盒子大小 */
width: 457px;
height: 454px;
/* 把边框算入盒子大小 */
box-sizing: border-box;
border-radius: 50%;
/* 背景透明 */
background: transparent;
/* 设置阴影边框 */
box-shadow: inset 10px 20px 30px rgba(0, 0, 0, 0.5), 10px 10px 20px rgba(0, 0, 0, 0.3), 15px 15px 30px rgba(0, 0, 0, 0.05), inset -10px -10px 15px rgba(255, 255, 255, 0.8);
/* 设置动画效果 */
animation: move 6s linear infinite;
}
.main::after {
position: absolute;
content: "";
width: 40px;
height: 40px;
background: rgba(255, 255, 255, 0.5);
left: 80px;
top: 80px;
border-radius: 50%;
animation: move2 6s linear infinite;
filter:blur(1px);
}
.main::before {
position: absolute;
content: "";
width: 20px;
height: 20px;
background: rgba(255, 255, 255, 0.5);
left: 130px;
top: 70px;
border-radius: 50%;
animation: move3 6s linear infinite;
filter:blur(1px);
}
/* 设置移动方位 */
@keyframes move {
50% {
border-radius: 50% 50% 66% 34% / 26% 62% 38% 74% ;
}
75% {
border-radius: 750% 50% 49% 51% / 26% 62% 38% 74% ;
}
25% {
border-radius: 50% 50% 49% 51% / 52% 62% 38% 48% ;
}
}
js文件
background.js
// 定义图片资源数组
var imgs = ["ihttps://pic2.zhimg.com/v2-9142793b20533b5e2e5cc91eab9ee101_r.jpg","https://pic1.zhimg.com/v2-abdc2de175b7bf0ed358ee5828cdf858_r.jpg", "https://pic2.zhimg.com/v2-168c35bda16e110ecf9b4aa6e97d0b01_r.jpg", "https://pic2.zhimg.com/v2-dcc1ea1a8b0c398c826ef9469d1e8b96.jpg"]
// 获取body元素
// 添加自动切换背景的函数
// 定义当前的index
let index = 0;
// 每隔一秒换一张背景
setInterval(function(){
index += 1;
index = index % 4;
document.body.style.background = 'url(' + this.imgs[index] + ')';
}, 5000);
rememeber
// 获取输入账号的元素
var username= document.querySelector('#username');
// 获取输入密码的元素
var password = document.querySelector('#password');
// 获取技术密码的选择框的元素
var remember = document.querySelector('#remember');
// 如果username和password存在的话
if (localStorage.getItem('username') && localStorage.getItem('password')) {
// 那么把username的value设置为本地存储的username
username.value = localStorage.getItem('username');
// 那么把password的value设置为本地存储的password
password.value = localStorage.getItem('password');
// 然后设置已经记住账号和密码了
remember.checked = true;
}
// 给remember输入框添加事件
remember.addEventListener('change', function() {
// 如果已经记住密码了
if (this.checked) {
// 那么本地存储现在username和password中的值 把输入的username和password存放到本地存储中
localStorage.setItem('username', username.value)
localStorage.setItem('password', password.value)
} else {
// 如果没有记住密码 那么移除本地的username和password的存储情况
localStorage.removeItem('username');
localStorage.removeItem('password');
}
})
登录页面
登录页面的注册页面都是属于，表单提交，需要在表单的form,的action的属性中，写入需要提交的网址。
Login.html
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>登录</title>
<link rel="stylesheet" type="text/css" href="css/water.css">
<style>
form{
margin-top: 80px;
}
</style>
</head>
<body>
<div class="main">
<form th:action="@{/CanLogin}" method="post">
<div style="text-align: center"><span style="color: red;text-align: center" id="sb" th:text="${session.errorInfo}"/></div>
<p>用户名<br />
<input type="text" class="textinput" name = "username" id = "username" placeholder="请输入用户名" />
</p>
<p>密码<br />
<input type="password" class="textinput" name="password" id="password" placeholder="请输入密码" />
</p>
<p>
<input id="remember" type="checkbox" /><label>记住账号</label>
</p>
<p>
<input type="submit" value="登录" />
</p>
<p>还没有账户？<a href="register">注册</a></p>
</form>
</div>
</body>
<script type="text/javascript" src="js/background.js" ></script>
<script type="text/javascript" src="js/rememeber.js" ></script>
</html>
注册页面
Register.html
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>注册</title>
<link rel="stylesheet" type="text/css" href="css/water.css">
</head>
<body>
<div class="main">
<form th:action="@{/CanRegister}" method="post">
<div style="text-align: center;margin-top: 10px"><span style="color: red;text-align: center" id="sb" th:text="${session.errorInfo}"/></div>
<p>用户名<br />
<input type="text" name="username" class="textinput" placeholder="请输入用户名" />
</p>
<p>密码<br />
<input type="password" name="password" class="textinput" placeholder="请输入密码" />
</p>
<p>
<input type="submit" value="提交" />
</p>
<p>
<p><a href="login">返回登录</a></p>
</p>
</form>
</div>
</body>
<script type="text/javascript" src="js/background.js" ></script>
</html>
后端部分
application.properties
spring.datasource.username=root
spring.datasource.password=123456
spring.datasource.url=jdbc:mysql://localhost:3306/projectdatabase?serverTimezone=Asia/Shanghai&useUnicode=true&characterEncoding=utf-8
spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver
pom.xml
pom.xml
<?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.7.6</version>
<relativePath/> <!-- lookup parent from repository -->
</parent>
<groupId>com.example</groupId>
<artifactId>SpringBootDemo</artifactId>
<version>0.0.1-SNAPSHOT</version>
<name>SpringBootDemo</name>
<description>SpringBootDemo</description>
<properties>
<java.version>8</java.version>
</properties>
<dependencies>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
<dependency>
<groupId>mysql</groupId>
<artifactId>mysql-connector-java</artifactId>
<scope>runtime</scope>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
<!--lombok-->
<dependency>
<groupId>org.projectlombok</groupId>
<artifactId>lombok</artifactId>
</dependency>
<dependency>
<groupId>com.baomidou</groupId>
<artifactId>mybatis-plus-boot-starter</artifactId>
<version>3.4.3</version>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-test</artifactId>
<scope>test</scope>
</dependency>
</dependencies>
<build>
<plugins>
<plugin>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-maven-plugin</artifactId>
</plugin>
</plugins>
</build>
</project>
Bean
User类，这里面的数据类型与数据库中的保持一致。
package com.example.springbootdemo.Bean;
import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;
@Data
@AllArgsConstructor
@NoArgsConstructor
public class User {
private Integer id;
private String username;
private String password;
public User(String username, String password) {
this.username = username;
this.password = password;
}
}
Controller
这一个类的目的是，设置项目的默认访问页面，我这里把登录页面设置为默认的访问页面。
IndexController
package com.example.springbootdemo.Controller;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
@Controller
public class IndexController {
@RequestMapping("/")
public String index(){
return"admin/Login.html";
}
}
LoginController
这个类的目的是存放登录和注册相关的类。
基本上以后都是这样的格式，如果不是很懂的话，可以直接把这个后端模板背下来，以后遇到自己的项目直接复制然后改一下就可以了。
在登录模块里面我还添加了，对于密码或者账号错误的检查，如果错了会有，提示信息的，在注册模块里面，加上了对账号的检查，如果账号已经存在了，那么就不能进行注册。
package com.example.springbootdemo.Controller;
import com.example.springbootdemo.Bean.User;
import com.example.springbootdemo.Dao.UserDao;
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.PostMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.util.List;
@Controller
public class LoginController {
@Autowired
private UserDao userDao;
@GetMapping("/login")
public String login(){
return "admin/Login.html";
}
@GetMapping("/register")
public String register(){
return "admin/register.html";
}
@PostMapping("/CanLogin")
private String CanLogin(HttpServletRequest request){
String username = request.getParameter("username");
String password = request.getParameter("password");
System.out.println(username + " " + password);
List<User> users = userDao.selectList(null);
System.out.println(users);
String errorInfo = "";
for (User lis:users){
if (lis.getUsername().equals(username) && lis.getPassword().equals(password)){
System.out.println("正确");
return "pk/index.html";
}
}
errorInfo = "账号或密码错误";
request.getSession().setAttribute("errorInfo", errorInfo);
return "admin/Login.html";
}
@PostMapping("/CanRegister")
private String CanRegister(HttpServletRequest request){
String username = request.getParameter("username");
String password = request.getParameter("password");
System.out.println(username + " " + password);
List<User> users = userDao.selectList(null);
String errorInfo = "";
for (User lis:users){
if (lis.getUsername().equals(username)){
errorInfo = "用户名重复请重新输入";
request.getSession().setAttribute("errorInfo", errorInfo);
System.out.println("用户名重复请重新输入");
return "admin/Register.html";
}
}
// 这里的id为user.size() + 1可以保证新用户一直在最后面
userDao.insert(new User(users.size() + 1, username, password));
return "admin/Login.html";
}
}
Dao
感谢伟大的mybatis-plus让我不再写sql语句。
package com.example.springbootdemo.Dao;
import com.baomidou.mybatisplus.core.mapper.BaseMapper;
import com.example.springbootdemo.Bean.User;
import org.apache.ibatis.annotations.Mapper;
// BaseMapper自带很多模板sql语句
@Mapper
public interface UserDao extends BaseMapper<User> {
}
运行结果展示
默认为登录页面的情况
登录成功之后的样子
注册页面
注册成功之后数据库中会增加一条数据。
4205
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
