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

╰+哭是因爲堅強的太久メ 2024-03-30 12:11 95阅读 0赞

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

**简介**：本文讲解含有前后端的，登录页面与注册页面怎么制作，本登录页面是一个前后端不分离的。

**参考文章**：  
[JS实现记住用户密码  
][JS_]  
[用HTML+CSS构建一个绚丽的登录页面  
][HTML_CSS_]  
[提交表单与验证表单案例  
][Link 1]  
[JDBC数据库的连接  
][JDBC_]  
[基于SpringBoot的SSMP整合案例  
][SpringBoot_SSMP_]  
[restful风格快速入门  
][restful_]  
[IDEA快速构建SpringBoot项目  
][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');

建表成功之后的样子  
![在这里插入图片描述][c414923abb9b4e64a50fbb5687986d7e.png]

### 前端部分 ###

文件结构  
![在这里插入图片描述][295bf57d203a4f2d9f742a70ffe46528.png]

#### 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/> 
        </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>
    
            
            <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> {
        
    
    }

### 运行结果展示 ###

默认为登录页面的情况  
![在这里插入图片描述][a28b4a1f33464050b5ad167637b192cb.png]

登录成功之后的样子  
![在这里插入图片描述][17cd6bc7c1954ae99f63f0a94c35744c.png]

注册页面  
![在这里插入图片描述][5d0b09d1842b4c1a88e223ff225036ea.png]

注册成功之后数据库中会增加一条数据。![在这里插入图片描述][952b96f0c2c64674894dd0d121baf787.png]![在这里插入图片描述][e65ef421490245d0adc53db466dfec44.png]

[JS_]: https://blog.csdn.net/qq_51447496/article/details/128204558
[HTML_CSS_]: https://blog.csdn.net/qq_51447496/article/details/128437921
[Link 1]: https://blog.csdn.net/qq_51447496/article/details/128112770
[JDBC_]: https://blog.csdn.net/qq_51447496/article/details/128018451
[SpringBoot_SSMP_]: https://blog.csdn.net/qq_51447496/article/details/128412912
[restful_]: https://blog.csdn.net/qq_51447496/article/details/128390981
[IDEA_SpringBoot_]: https://blog.csdn.net/qq_51447496/article/details/128279055
[c414923abb9b4e64a50fbb5687986d7e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/9f4d5ad2ef314678b6a339b60510569c.png
[295bf57d203a4f2d9f742a70ffe46528.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/ddd5a11ed04143789f88d2a5089837b9.png
[a28b4a1f33464050b5ad167637b192cb.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/d1ae41d0c4f24e29ba458e1a3e23c2c1.png
[17cd6bc7c1954ae99f63f0a94c35744c.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/45972ce074964ed38abac931f19d29ec.png
[5d0b09d1842b4c1a88e223ff225036ea.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/f0bfba1734a8413f81a3bd11a49474df.png
[952b96f0c2c64674894dd0d121baf787.png]: https://img-blog.csdnimg.cn/952b96f0c2c64674894dd0d121baf787.png
[e65ef421490245d0adc53db466dfec44.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/5074169f75e64452a85a74f4d778c846.png