使用HTML、Axios与Spring Boot构建登录与注册系统的前端实现

要实现一个基于HTML、Axios和Spring Boot的登录注册系统，你需要分别处理前端和后端。这里我将专注于前端部分的实现，使用HTML和JavaScript（通过Axios进行HTTP请求）。

1. 前端HTML页面

首先，你需要两个HTML页面：一个用于注册 (register.html)，另一个用于登录 (login.html)。这里只展示登录页面的基本结构，注册页面类似。

login.html

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <title>Login</title>  
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>  
</head>  
<body>  
    <h2>Login</h2>  
    <form id="loginForm">  
        <label for="username">Username:</label>  
        <input type="text" id="username" name="username" required><br><br>  
        <label for="password">Password:</label>  
        <input type="password" id="password" name="password" required><br><br>  
        <button type="button" onclick="login()">Login</button>  
    </form>  
  
    <script>  
        function login() {  
            const username = document.getElementById('username').value;  
            const password = document.getElementById('password').value;  
  
            axios.post('http://localhost:8080/login', {  
                username: username,  
                password: password  
            })  
            .then(function (response) {  
                console.log(response);  
                // 根据后端响应处理登录成功或失败  
                alert('Login successful!');  
                // 可以跳转到另一个页面  
                // window.location.href = 'home.html';  
            })  
            .catch(function (error) {  
                console.log(error);  
                alert('Login failed!');  
            });  
        }  
    </script>  
</body>  
</html>

2. Axios进行HTTP请求

在上面的HTML代码中，我已经包括了Axios的CDN链接，并在<script>标签中定义了一个login函数。这个函数通过axios.post发送一个POST请求到Spring Boot后端（假设后端API的URL是http://localhost:8080/login）。请求体包含了用户名和密码，这些数据将发送到后端进行验证。