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

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

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

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

参考文章：
JS实现记住用户密码
用HTML+CSS构建一个绚丽的登录页面
提交表单与验证表单案例
JDBC数据库的连接
基于SpringBoot的SSMP整合案例
restful风格快速入门
IDEA快速构建SpringBoot项目

从参考如此多的文章就知道，其实实现起来还是有点点复杂的。

创建数据库

下面是我创建数据库的sql语句

  1. -- ----------------------------
  2. -- Table structure for user
  3. -- ----------------------------
  4. DROP TABLE IF EXISTS `user`;
  5. CREATE TABLE `user`  (
  6.   `id` int(11) NOT NULL AUTO_INCREMENT,
  7.   `username` varchar(20) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL,
  8.   `password` varchar(50) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL,
  9.   PRIMARY KEY (`id`) USING BTREE
  10. ) ENGINE = InnoDB AUTO_INCREMENT = 51 CHARACTER SET = utf8 COLLATE = utf8_general_ci ROW_FORMAT = Dynamic;
  12. -- ----------------------------
  13. -- Records of user
  14. -- ----------------------------
  15. INSERT INTO `user` VALUES (1, 'LIHUA', '123456');
  16. INSERT INTO `user` VALUES (2, 'zhangsan', '123');
  17. INSERT INTO `user` VALUES (3, 'LISI', '456489');

建表成功之后的样子
在这里插入图片描述

前端部分

文件结构
在这里插入图片描述

css文件

把两个页面的公共的css文件放到同一个文件中。
water.css

  1. body{
  3.     background: url("https://pic3.zhimg.com/v2-92879d7d6ddae16c6c880bf936a2b2ae_r.jpg");
  4.     /* 设置背景铺满 */
  5.     background-repeat:no-repeat;
  6.     background-size:100%;
  8. }
  9. form{
  12.     /* 设置透明度 */
  13.     opacity: 80%;
  15.     text-align: center;
  16.     /* 再设置内边距 使得内容更偏向于中央位置 */
  17.     /* 上方，下方内边距为120px 与 左边与右边均为100px 按照逆时针 */
  18.     /* 但是会撑大盒子 */
  19.     padding: 0px 100px;
  21.     /* 设置文本文字的大小 */
  22.     font-size: 18px;
  24.     /* 添加圆角边框 */
  25.     border-radius: 10px;
  27.     /* 增加外边距 */
  28.     /* 上下80px 然后左右居中 */
  29.     margin: 120px auto;
  30. }
  33. .textinput{
  35.     /* 设置宽高 */
  36.     height: 40px;
  37.     width: 100px;
  39.     /* 设置内边距 */
  40.     padding: 0 35px;
  42.     /* 去除边框 */
  43.     border: none;
  45.     /* 设置背景颜色 */
  46.     background: #F8F9F9;
  48.     /* 设置字体大小 */
  49.     font-size: 15px;
  51.     /* 给文本框加上阴影 */
  52.     box-shadow: 0px 1px 1px rgba(255, 255, 255, 0.7), inset 0px 2px 5px #aaaaaa;
  54.     /* 给文本框加上圆角边框 */
  55.     border-radius: 5px;
  57.     /* 给文本框中输入文字加上颜色 */
  58.     color: saddlebrown;
  59. }
  61. /* 筛选input标签中 type为"submit"的 进行渲染*/
  62. input[type="submit"]{
  64.     /* 设置宽高 */
  65.     width: 110px;
  66.     height: 40px;
  68.     /* 内部文本居中 */
  69.     text-align: center;
  71.     /* 圆角边框 */
  72.     border-radius: 5px;
  74.     /* 设置字体 */
  75.     font:16px "黑体";
  77.     /* 设置背景颜色 */
  78.     background-color: #C0C6CB;
  79. }
  82. a {
  84.     /* 去除下划线 */
  85.     text-decoration: none;
  86. }
  88. a:hover {
  90.     /* 悬空的时候有被选中的样子 出现下划线*/
  91.     text-decoration: underline;
  92. }
  93. .main {
  95.     /* 设置为绝对定位 */
  96.     position: absolute;
  97.     /* 设置盒子放在中间的位置 */
  98.     left: 50%;
  99.     top: 50%;
  100.     /* 设置动态效果 */
  101.     transform: translate(-50%, -50%);
  102.     /* 设置盒子大小 */
  103.     width: 457px;
  104.     height: 454px;
  105.     /* 把边框算入盒子大小 */
  106.     box-sizing: border-box;
  107.     border-radius: 50%;
  108.     /* 背景透明 */
  109.     background: transparent;
  110.     /* 设置阴影边框 */
  111.     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);
  112.     /* 设置动画效果 */
  113.     animation: move 6s linear infinite;
  114. }
  116. .main::after {
  118.     position: absolute;
  119.     content: "";
  120.     width: 40px;
  121.     height: 40px;
  122.     background: rgba(255, 255, 255, 0.5);
  123.     left: 80px;
  124.     top: 80px;
  125.     border-radius: 50%;
  126.     animation: move2 6s linear infinite;
  127.     filter:blur(1px);
  128. }
  130. .main::before {
  132.     position: absolute;
  133.     content: "";
  134.     width: 20px;
  135.     height: 20px;
  136.     background: rgba(255, 255, 255, 0.5);
  137.     left: 130px;
  138.     top: 70px;
  139.     border-radius: 50%;
  140.     animation: move3 6s linear infinite;
  141.     filter:blur(1px);
  142. }
  144. /* 设置移动方位 */
  145. @keyframes move {
  147.     50% {
  149.         border-radius: 50% 50% 66% 34% / 26% 62% 38% 74% ;
  150.     }
  151.     75% {
  153.         border-radius: 750% 50% 49% 51% / 26% 62% 38% 74% ;
  154.     }
  155.     25% {
  157.         border-radius: 50% 50% 49% 51% / 52% 62% 38% 48% ;
  158.     }
  159. }

js文件

background.js

  1. // 定义图片资源数组
  2. 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"]
  3. // 获取body元素
  4. // 添加自动切换背景的函数
  5. // 定义当前的index
  6. let index = 0;
  7. // 每隔一秒换一张背景
  8. setInterval(function(){
  10.     index += 1;
  11.     index = index % 4;
  12.     document.body.style.background = 'url(' + this.imgs[index] + ')';
  13. }, 5000);

rememeber

  1. // 获取输入账号的元素
  2. var username= document.querySelector('#username');
  4. // 获取输入密码的元素
  5. var password = document.querySelector('#password');
  6. // 获取技术密码的选择框的元素
  7. var remember = document.querySelector('#remember');
  9. // 如果username和password存在的话
  10. if (localStorage.getItem('username') && localStorage.getItem('password')) {
  12.     // 那么把username的value设置为本地存储的username
  13.     username.value = localStorage.getItem('username');
  15.     // 那么把password的value设置为本地存储的password
  16.     password.value = localStorage.getItem('password');
  18.     // 然后设置已经记住账号和密码了
  19.     remember.checked = true;
  20. }
  22. // 给remember输入框添加事件
  23. remember.addEventListener('change', function() {
  25.     // 如果已经记住密码了
  26.     if (this.checked) {
  28.         // 那么本地存储现在username和password中的值 把输入的username和password存放到本地存储中
  29.         localStorage.setItem('username', username.value)
  30.         localStorage.setItem('password', password.value)
  31.     } else {
  33.         // 如果没有记住密码 那么移除本地的username和password的存储情况
  34.         localStorage.removeItem('username');
  35.         localStorage.removeItem('password');
  36.     }
  37. })

登录页面

登录页面的注册页面都是属于，表单提交，需要在表单的form,的action的属性中，写入需要提交的网址。

Login.html

  1. <!DOCTYPE html>
  2. <html lang="en" xmlns:th="http://www.thymeleaf.org">
  4. <head>
  5.   <meta charset="UTF-8">
  6.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.   <title>登录</title>
  9.   <link rel="stylesheet" type="text/css" href="css/water.css">
  10.   <style>
  11.     form{
  13.       margin-top: 80px;
  14.     }
  15.   </style>
  16. </head>
  18. <body>
  19. <div class="main">
  20.   <form th:action="@{/CanLogin}" method="post">
  21.     <div style="text-align: center"><span style="color: red;text-align: center" id="sb" th:text="${session.errorInfo}"/></div>
  22.     <p>用户名<br />
  23.       <input type="text" class="textinput" name = "username" id = "username" placeholder="请输入用户名" />
  24.     </p>
  25.     <p>密码<br />
  26.       <input type="password" class="textinput" name="password" id="password" placeholder="请输入密码" />
  27.     </p>
  28.     <p>
  29.       <input id="remember" type="checkbox" /><label>记住账号</label>
  30.     </p>
  31.     <p>
  32.       <input type="submit" value="登录" />
  33.     </p>
  34.     <p>还没有账户？<a href="register">注册</a></p>
  35.   </form>
  36. </div>
  37. </body>
  38. <script type="text/javascript" src="js/background.js" ></script>
  39. <script type="text/javascript" src="js/rememeber.js" ></script>
  40. </html>

注册页面

Register.html

  1. <!DOCTYPE html>
  2. <html lang="en" xmlns:th="http://www.thymeleaf.org">
  4. <head>
  5.   <meta charset="UTF-8">
  6.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.   <title>注册</title>
  9.   <link rel="stylesheet" type="text/css" href="css/water.css">
  10. </head>
  12. <body>
  13. <div class="main">
  14.   <form th:action="@{/CanRegister}" method="post">
  15.     <div style="text-align: center;margin-top: 10px"><span style="color: red;text-align: center" id="sb" th:text="${session.errorInfo}"/></div>
  16.     <p>用户名<br />
  17.       <input type="text" name="username" class="textinput" placeholder="请输入用户名" />
  18.     </p>
  19.     <p>密码<br />
  20.       <input type="password" name="password" class="textinput" placeholder="请输入密码" />
  21.     </p>
  22.     <p>
  23.       <input type="submit" value="提交" />
  24.     </p>
  25.     <p>
  26.     <p><a href="login">返回登录</a></p>
  27.     </p>
  28.   </form>
  29. </div>
  30. </body>
  31. <script type="text/javascript" src="js/background.js" ></script>
  32. </html>

后端部分

application.properties

  1. spring.datasource.username=root
  2. spring.datasource.password=123456
  3. spring.datasource.url=jdbc:mysql://localhost:3306/projectdatabase?serverTimezone=Asia/Shanghai&useUnicode=true&characterEncoding=utf-8
  4. spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver

pom.xml

pom.xml

  1. <?xml version="1.0" encoding="UTF-8"?>
  2. <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  3.          xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
  4.     <modelVersion>4.0.0</modelVersion>
  5.     <parent>
  6.         <groupId>org.springframework.boot</groupId>
  7.         <artifactId>spring-boot-starter-parent</artifactId>
  8.         <version>2.7.6</version>
  9.         <relativePath/> <!-- lookup parent from repository -->
  10.     </parent>
  11.     <groupId>com.example</groupId>
  12.     <artifactId>SpringBootDemo</artifactId>
  13.     <version>0.0.1-SNAPSHOT</version>
  14.     <name>SpringBootDemo</name>
  15.     <description>SpringBootDemo</description>
  16.     <properties>
  17.         <java.version>8</java.version>
  18.     </properties>
  19.     <dependencies>
  20.         <dependency>
  21.             <groupId>org.springframework.boot</groupId>
  22.             <artifactId>spring-boot-starter-thymeleaf</artifactId>
  23.         </dependency>
  24.         <dependency>
  25.             <groupId>mysql</groupId>
  26.             <artifactId>mysql-connector-java</artifactId>
  27.             <scope>runtime</scope>
  28.         </dependency>
  29.         <dependency>
  30.             <groupId>org.springframework.boot</groupId>
  31.             <artifactId>spring-boot-starter-web</artifactId>
  32.         </dependency>
  33.         <dependency>
  34.             <groupId>org.springframework.boot</groupId>
  35.             <artifactId>spring-boot-starter-thymeleaf</artifactId>
  36.         </dependency>
  38.         <!--lombok-->
  39.         <dependency>
  40.             <groupId>org.projectlombok</groupId>
  41.             <artifactId>lombok</artifactId>
  42.         </dependency>
  44.         <dependency>
  45.             <groupId>com.baomidou</groupId>
  46.             <artifactId>mybatis-plus-boot-starter</artifactId>
  47.             <version>3.4.3</version>
  48.         </dependency>
  49.         <dependency>
  50.             <groupId>org.springframework.boot</groupId>
  51.             <artifactId>spring-boot-starter-test</artifactId>
  52.             <scope>test</scope>
  53.         </dependency>
  54.     </dependencies>
  56.     <build>
  57.         <plugins>
  58.             <plugin>
  59.                 <groupId>org.springframework.boot</groupId>
  60.                 <artifactId>spring-boot-maven-plugin</artifactId>
  61.             </plugin>
  62.         </plugins>
  63.     </build>
  65. </project>

Bean

User类，这里面的数据类型与数据库中的保持一致。

  1. package com.example.springbootdemo.Bean;
  3. import lombok.AllArgsConstructor;
  4. import lombok.Data;
  5. import lombok.NoArgsConstructor;
  7. @Data
  8. @AllArgsConstructor
  9. @NoArgsConstructor
  10. public class User {
  12.     private Integer id;
  13.     private String username;
  15.     private String password;
  17.     public User(String username, String password) {
  19.         this.username = username;
  20.         this.password = password;
  21.     }
  22. }

Controller

这一个类的目的是，设置项目的默认访问页面，我这里把登录页面设置为默认的访问页面。
IndexController

  1. package com.example.springbootdemo.Controller;
  3. import org.springframework.stereotype.Controller;
  4. import org.springframework.web.bind.annotation.RequestMapping;
  6. @Controller
  7. public class IndexController {
  9.     @RequestMapping("/")
  10.     public String index(){
  12.         return"admin/Login.html";
  13.     }
  15. }

LoginController
这个类的目的是存放登录和注册相关的类。
基本上以后都是这样的格式，如果不是很懂的话，可以直接把这个后端模板背下来，以后遇到自己的项目直接复制然后改一下就可以了。

在登录模块里面我还添加了，对于密码或者账号错误的检查，如果错了会有，提示信息的，在注册模块里面，加上了对账号的检查，如果账号已经存在了，那么就不能进行注册。

  1. package com.example.springbootdemo.Controller;
  3. import com.example.springbootdemo.Bean.User;
  4. import com.example.springbootdemo.Dao.UserDao;
  5. import org.springframework.beans.factory.annotation.Autowired;
  6. import org.springframework.stereotype.Controller;
  7. import org.springframework.web.bind.annotation.GetMapping;
  8. import org.springframework.web.bind.annotation.PostMapping;
  9. import org.springframework.web.bind.annotation.RequestMapping;
  10. import org.springframework.web.bind.annotation.RestController;
  12. import javax.servlet.http.HttpServletRequest;
  13. import javax.servlet.http.HttpServletResponse;
  14. import java.util.List;
  16. @Controller
  17. public class LoginController {
  19.     @Autowired
  20.     private UserDao userDao;
  21.     @GetMapping("/login")
  22.     public String login(){
  24.         return "admin/Login.html";
  25.     }
  27.     @GetMapping("/register")
  28.     public String register(){
  30.         return "admin/register.html";
  31.     }
  34.     @PostMapping("/CanLogin")
  35.     private String CanLogin(HttpServletRequest request){
  37.         String username = request.getParameter("username");
  38.         String password = request.getParameter("password");
  40.         System.out.println(username + " " + password);
  41.         List<User> users = userDao.selectList(null);
  42.         System.out.println(users);
  43.         String errorInfo = "";
  44.         for (User lis:users){
  46.             if (lis.getUsername().equals(username) && lis.getPassword().equals(password)){
  48.                 System.out.println("正确");
  49.                 return "pk/index.html";
  50.             }
  51.         }
  52.         errorInfo = "账号或密码错误";
  53.         request.getSession().setAttribute("errorInfo", errorInfo);
  54.         return "admin/Login.html";
  55.     }
  57.     @PostMapping("/CanRegister")
  58.     private String CanRegister(HttpServletRequest request){
  60.         String username = request.getParameter("username");
  61.         String password = request.getParameter("password");
  62.         System.out.println(username + " " + password);
  63.         List<User> users = userDao.selectList(null);
  64.         String errorInfo = "";
  65.         for (User lis:users){
  67.             if (lis.getUsername().equals(username)){
  69.                 errorInfo = "用户名重复请重新输入";
  70.                 request.getSession().setAttribute("errorInfo", errorInfo);
  71.                 System.out.println("用户名重复请重新输入");
  72.                 return "admin/Register.html";
  73.             }
  74.         }
  75.         // 这里的id为user.size() + 1可以保证新用户一直在最后面
  76.         userDao.insert(new User(users.size() + 1, username, password));
  77.         return "admin/Login.html";
  78.     }
  79. }

Dao

感谢伟大的mybatis-plus让我不再写sql语句。

  1. package com.example.springbootdemo.Dao;
  4. import com.baomidou.mybatisplus.core.mapper.BaseMapper;
  6. import com.example.springbootdemo.Bean.User;
  7. import org.apache.ibatis.annotations.Mapper;
  9. // BaseMapper自带很多模板sql语句
  10. @Mapper
  11. public interface UserDao extends BaseMapper<User> {
  14. }

运行结果展示

默认为登录页面的情况
在这里插入图片描述

登录成功之后的样子
在这里插入图片描述

注册页面
在这里插入图片描述

注册成功之后数据库中会增加一条数据。在这里插入图片描述在这里插入图片描述

发表评论

表情：
评论列表 （有 0 条评论，209人围观）

还没有评论，来说两句吧...

相关阅读