Spring Boot + HTML5简单的前端验证登录功能实现

1、后台数据库的创建

        首先我们要清楚在数据库中我们需要存放什么内容，一般的登录信息就是账号+密码，再考虑密码加密的问题，一般来说是会用盐+md5进行密码加密，所以我们在数据库的表创建就需要创建账号、密码、盐值这三个实体。

create schema xxstore;
use xxstore;

create table user(
uid int primary key auto_increment,
username varchar(30) not null,
password varchar(50) not null,
salt varchar(50)
）

        本文所使用的是mysql数据库，在此步我们将数据库表格创建完毕。

2.持久层

        接下来需要创建一个Spring Boot项目，以及前期的布置等，切记一定要把内容配置完全再来进行此文章的操作，如何创建参考另一篇文章，这边不再赘述。https://blog.csdn.net/cjbyg/article/details/132789399

        首先我们需要对数据库中的实体在项目中实例化，我们创建一个entity文件夹，并创建一个名为User的类

这边使用lombok插件帮助我们代理类中对象的有参无参方法以及get()\set()方法，在pom.xml文件中加入

        
            org.projectlombok
            lombok
            true
        

然后在User文件中写入以下代码，

@Data
@NoArgsConstructor
@AllArgsConstructor
public class User implements Serializable {
    private Integer uid;
    private String username;
    private String  password;
    private String salt;
}

到此对象编写完成。

接下来我们需要编写mapper接口来对登录的信息在数据库中进行查询，创建一个mapper文件夹创建一个UserMapper的接口类文件

@Component\一定要注释，否则Spring Boot无法识别该接口是否需要注入bean，会导致后面使用报错
public interface   UserMapper {

    User findByUsername(String username);

}

只需要一个查询信息即可，接下来在resources文件夹下创建一个名称一样的xml文件，用来对数据库的查询

//该行填写你所创建的文件的位置
//填写你自己的实体的位置，
    SELECT * from user where username = #{username}

注意！注意！注意!mapper所对应的文件位置一定要写对，在代码中有注释。

3、服务层

现在就需要编写服务端的处理方式了，创建如下的文件，impl文件夹用来对前端传来数据进行处理，在该文件夹下创建IUserService的接口和UserServiceImpl类，再创建一个文件夹util用来作为返回前端的结果。

@Data
@AllArgsConstructor
@NoArgsConstructor
public class JsonResult {
    private Integer state;
    private String message;
    private Object data;
}

返回结果的实体类，用来服务层处理完数据后进行给前端作为响应。

public interface IUserService {
    JsonResult userload(User user);//登录

}

编写服务层的抽象接口，该方法用来与前端进行交互。

@Service
public class UserServiceImpl implements IUserService {
    @Autowired
    private UserMapper userMapper;

    @Override
    public JsonResult userload(User user) {
        String username = user.getUsername();
        String epassword = user.getPassword();
        User result = storeMapper.findByusername(username);
        String salt = result.getSalt();
        String jmpassword = getMD5Password(epassword,salt);
        if(jmpassword.equals(result.getPassword())){
            return new JsonResult(200,"登陆成功！",null);
        }
        }else{
            return new JsonResult(5000,"账号密码错误",null);
        }

    }

    private String getMD5Password(String password, String salt) {
        for (int i = 0; i < 3; i++) {
            password = DigestUtils.md5DigestAsHex((salt + password + salt).getBytes()).toUpperCase();
        }
        return password;
    }
}

该类需要将抽象方法实例化，我们在此编写返回给前端的内容，可以自定义编写，注意数据的对比，字符串的对比等。

4、控制层

创建一个controll文件夹在下创建一个UserControll类

@RestController
public class StoreControll {
    @Autowired
    private IUserService userService;

    @RequestMapping("/loading")
    public JsonResult userload(@RequestBody User user){
        return userService.userload(user);
    }
}

到此后端的业务已经编写完成。

5.前端页面

在resources的static文件夹下创建三个文件夹web、js、css

在web文件夹下创建名为load的页面

    
    







    
    
    
    
    


    
        
            
用户登录
            
欢迎使用！
            

                


            
            

                



            

            

                
            
            修改密码
        
    
    
        
            ×
            
                用户名：
                输入原密码：
                输入新密码：
                确认密码：
                
                    提交
                
            
        
    

布局文件，在css文件夹下创建load的css文件

.load_box {
    width: 70%;
    height: 85%;
    border-radius: 10px;
    background-color: #f1f1f1;
    position: absolute;
    top: 50%;
    left: 50%;
    opacity: 0.8;
    transform: translate(-50%, -50%);
    display: flex;
}

.image-slider {
    width: 55%;
    border-radius: 10px 0 0 10px;
    overflow: hidden;
}

.login_form {
    width: 45%;
    padding: 20px;
    background-color: #ffffff;
    border-radius: 10px;
    opacity: 1.0;
}
.form-container {
    padding: 20px;
}
body {
    background-image: url("back.jpg");
    background-repeat: no-repeat;
    background-size: cover;
}

.picture{

    width: 100%;height: 100%
}

.uname{
    width: 90%;height:30px;margin-top: 20px;
}
.pass{
    width: 90%;height:30px;margin-top: 20px;
}

#load_button{
    width: 90%; height: 30px; background-color: deepskyblue; color: #ffffff; border: none;cursor: pointer;margin-top: 50px;
}

/* 弹框样式 */
.modal {
    display: none;
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.4);
}

.modal-content {
    background-color: #fefefe;
    margin: 10% auto;
    padding: 20px;
    border: 1px solid #888;
    width: 40%;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
    border-radius: 10px;
    text-align: center;
}

/* 关闭按钮样式 */
.close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}


label {
    margin-top: 10px;
    display: block;
    text-align: left;
}

input {
    padding: 8px;
    margin-top: 6px;
    width: 100%;
    box-sizing: border-box;
    border: 1px solid #ccc;
    border-radius: 4px;
}

input[type="file"] {
    margin-bottom: 10px;
}

.button-container {
    margin-top: 20px;
    display: flex;
    justify-content: flex-end;
}

button {
    padding: 10px 20px;
    border: none;
    background-color: deepskyblue;
    color: white;
    border-radius: 4px;
    cursor: pointer;
    margin-left: 10px;
}

button[type="reset"] {
    background-color: #f44336;
}

button:hover {
    background-color: #45a049;
}

/* 响应式布局 */
@media (max-width: 600px) {
    .modal-content {
        width: 80%;
        height: 300px;
    }

    .button-container {
        justify-content: center;
    }

    button {
        margin-left: 0;
    }
}

#pdmessage {
    width: 100%;
    border-collapse: collapse;
    font-family: Arial, sans-serif;
}

#pdmessage th {
    background-color: #f2f2f2;
    padding: 10px;
    text-align: left;
    font-weight: bold;
}

#pdmessage td {
    padding: 10px;
    border-bottom: 1px solid #ddd;
}

#pdmessage tbody tr:nth-child(even) {
    background-color: #f9f9f9;
}

js文件夹下创建load的js文件

const sliderContainer = document.querySelector('.image-slider');
const slides = sliderContainer.querySelectorAll('img');
let currentIndex = 0;

slides[currentIndex].style.display = 'block';

function startSlideshow() {
    setInterval(function() {

        slides[currentIndex].style.display = 'none';
        currentIndex = (currentIndex + 1) % slides.length;

        slides[currentIndex].style.display = 'block';
    }, 3000);
}
startSlideshow();

function openModal() {
    document.getElementById('xgModal').style.display = 'block';
}

function closeModal() {
    document.getElementById('xgModal').style.display = 'none';
}

//登录信息封装
$(document).ready(function() {
    // Register form submit event
    $("#load-form").submit(function(event) {
        event.preventDefault(); // Prevent the default form submit behavior

        var username = $("#username").val();
        var password = $("#password").val();
        sessionStorage.setItem('username', username);

        // Use Ajax to send login information to the back-end
        $.ajax({
            url: "/loading", // Replace with the correct server-side URL for login
            type: "POST",
            contentType: "application/json",
            data: JSON.stringify({
                "username": username,
                "password": password
            }),
            success: function(response) {
                if (response.state === 200) {
                    alert(response.message);
                    window.location.href = "option.html";
                } else if(response.state === 300){
                    alert(response.message);
                    document.getElementById('xgModal').style.display = 'block';
                }else if(response.state === 3000){
                    alert(response.message)
                }else{
                    alert(response.message)
                }
            },
            error: function(xhr, status, error) {
                showFloatingNotification("登录过程中发生错误: " + error);
            }
        });
    });
});

使用ajax来对输入的信息进行封装传输到后端页面中。

至此所有的事情已经完成，接下来就是实验的时候，启动项目，在页面输入自己Spring Boot的服务器网址例如localhost:1222/web/load.html，进入页面后输入账号密码点击登录，即可验证正确与否，后面其他的内容待下一个文章发布。