包含后端的登录与注册页面-阿里云开发者社区

创建数据库

下面是我创建数据库的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的属性中，写入需要提交的网址。

<!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>

注册页面

<!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

<?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> {
}

运行结果展示

默认为登录页面的情况

登录成功之后的样子

注册页面

注册成功之后数据库中会增加一条数据。

包含后端的登录与注册页面

创建数据库

前端部分

css文件

js文件

登录页面

注册页面

后端部分

application.properties

pom.xml

Bean

Controller

Dao

运行结果展示

热门文章

最新文章

相关电子书

相关实验场景

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

包含后端的登录与注册页面

创建数据库

前端部分

css文件

js文件

登录页面

注册页面

后端部分

application.properties

pom.xml

Bean

Controller

Dao

运行结果展示

热门文章

最新文章

相关电子书

相关实验场景