CRUD项目前端页面_crud 页面-CSDN博客

本文链接：https://blog.csdn.net/myid6/article/details/136718309

在wwwroot目录下创建login和list文件夹

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Login</title>
</head>
<body>
    <h2>Login</h2>
    <form id="loginForm">
        <div>
            <label for="username">username:</label>
            <input type="text" id="username" name="username" />
        </div>
        <div>
            <label for="password">password:</label>
            <input type="password"  id="password" name="password" />
        </div>
        <button type="button" onclick="login()">Login</button>
    </form>

    <script>
        function login() {

            var username = document.getElementById('username').value;
            var password = document.getElementById('password').value;

            //构建登录请求对象
            var loginData = {
                name: username,
                pwd: password
            };

            //发送登录请求
            fetch('/api/user/login', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify(loginData)
            })
                .then(response => {
                    if (response.status === 200) {
                        return response.json();
                    } else {
                        throw new Error('响应失败');
                    }
                })
                .then(data => {
                    if (data.token) {
                        console.log('Login successful:', data);
                        //跳转到另外一个页面
                        window.location.href = '/list/list.html';
                    } else {
                        console.error('Login failed:', data);
                        alert('登录失败，请再尝试一次');
                    }
                })
                .catch(error => {
                    console.error('Error logging in:', error);
                    alert('登录失败，请再尝试一次');
                });
        }
    </script>
</body>
</html>

list.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>User List</title>
</head>
<body>
    <h1>User List</h1>

    <table border="1">
        <thead>
            <tr>
                <th>ID</th>
                <th>Name</th>
                <th>Password</th>
            </tr>
        </thead>
        <tbody id="userList"></tbody> <!-- 使用<tbody>标签包裹表格行 -->
    </table>

    <script>
        document.addEventListener('DOMContentLoaded', function () {
            fetch('/api/user', {
                method: 'GET',
                headers: {
                    'Content-Type': 'application/json'
                }
            })
            .then(response => response.json())
            .then(data => {
                const userList = document.getElementById('userList');
                userList.innerHTML = ''; // 清空表格内容

                data.forEach(user => {
                    const row = document.createElement('tr'); // 创建表格行
                    row.innerHTML = `
                        <td>${user.id}</td>
                        <td>${user.name}</td>
                        <td>${user.pwd}</td>
                    `;
                    userList.appendChild(row); // 添加表格行到表格体中
                });
            })
            .catch(error => console.error('Error fetching user list:', error));
        });
    </script>
</body>
</html>