前端用json-server来Mock后端返回的数据处理

发布于：2025-02-10 ⋅ 阅读:(47) ⋅ 点赞:(0) 

<html>
    <body>
        <div class="login-container">
            <h2>登录</h2>
            <div class="login-form">
                <div class="form-group">
                    <input type="text" id="username" placeholder="请输入用户名" />
                </div>
                <div class="form-group">
                    <input type="password" id="password" placeholder="请输入密码" />
                </div>
                <button class="login-btn" onclick="handleLogin()">登录</button>
                <div class="form-links">
                    <a href="#">忘记密码?</a>
                    <a href="#">注册账号</a>
                </div>
                <script>
                    function handleLogin() {
                        const username = document.getElementById('username').value;
                        const password = document.getElementById('password').value;
                        
                        // 这里可以添加用户名和密码的验证逻辑
                        if(username && password) {
                            // 发送登录请求到本地模拟的API
                            fetch('http://localhost:3000/users')
                                .then(response => response.json())
                                .then(data => {
                                    const user = data.find(u => u.username === username && u.password === password);
                                    if(user) {
                                        // 登录成功，跳转到后台管理页面
                                        localStorage.setItem('token', user.token);  // 模拟保存token
                                        window.location.href = 'dashboard.html';  // 跳转到同级的后台管理页面
                                    } else {
                                        alert('用户名或密码错误');
                                    }
                                })
                                .catch(error => {
                                    alert('登录失败,请稍后重试');
                                });
                        } else {
                            alert('请输入用户名和密码');
                        }
                    }
                </script>
            </div>
        </div>
        <div class="beian-container">
            <a href="https://beian.miit.gov.cn/" target="_blank">备案号: 粤B2-20090059-1623A</a>
        </div>
        <style>
            body {
                margin: 0;
                min-height: 100vh;
                display: flex;
                align-items: center;
                justify-content: center;
                background-color: #f5f5f5;
                position: relative;
            }
            
            .login-container {
                width: 100%;
                max-width: 400px;
                padding: 20px;
                box-shadow: 0 0 10px rgba(0,0,0,0.1);
                border-radius: 5px;
                background-color: white;
            }
            
            .login-container h2 {
                text-align: center;
                color: #333;
                margin-bottom: 30px;
            }
            
            .form-group {
                margin-bottom: 20px;
            }
            
            .form-group input {
                width: 100%;
                padding: 10px;
                border: 1px solid #ddd;
                border-radius: 4px;
                font-size: 14px;
                box-sizing: border-box;
            }
            
            .login-btn {
                width: 100%;
                padding: 12px;
                background-color: #1890ff;
                color: white;
                border: none;
                border-radius: 4px;
                cursor: pointer;
                font-size: 16px;
            }
            
            .login-btn:hover {
                background-color: #40a9ff;
            }
            
            .form-links {
                margin-top: 15px;
                text-align: center;
            }
            
            .form-links a {
                color: #1890ff;
                text-decoration: none;
                margin: 0 10px;
                font-size: 14px;
            }
            
            .form-links a:hover {
                text-decoration: underline;
            }

            .beian-container {
                position: fixed;
                bottom: 20px;
                left: 0;
                right: 0;
                text-align: center;
            }
            
            .beian-container a {
                color: #666;
                text-decoration: none;
                font-size: 20px;
            }
            
            .beian-container a:hover {
                color: #1890ff;
            }
        </style>
    </body>
</html>

为了基于上述代码模拟登录，并让本地访问后台管理页面，你可以通过以下步骤来实现：

  1. 确保后端接口存在：你需要确保本地有一个接口（例如 /api/login）来模拟登录请求的处理。因为你的代码中使用的是 fetch 来发送请求到该接口，后端会返回模拟数据。

  2. 使用前端本地模拟 API：如果没有真正的后端，你可以使用 JavaScript 来模拟登录 API。你可以将登录接口本地化，只是直接返回你希望的 mock 数据。

  3. 本地开发环境搭建：

    • 你可以使用简单的 HTTP 服务器来提供本地服务（例如通过 node.js 或 python 搭建）。
    • 或者，你可以使用现有的工具（如 json-server）来创建一个 mock 的 RESTful API。

使用 json-server 来模拟后端

  1. 安装 json-server： 首先，你需要安装 json-server 来模拟后端 API。使用 npm 或 yarn 安装：

npm install -g json-server

如果npm下载的有点慢的话，可以参考下面这篇文章，切换到淘宝镜像源去下载。

npm i 安装依赖卡慢，失败，等很久，不成功，错误等等_npm i 很慢-CSDN博客

        2. 创建一个模拟数据文件： 在你的项目目录下创建一个 db.json 文件，这个文件将用来模拟后端数据，例如：

{
    "users": [
        {
            "username": "user",
            "password": "123",
            "success": true,
            "token": "mock-jwt-token-123",
            "userId": "mock-user-001",
            "role": "user"
        }
    ]
}

3. 启动 json-server： 使用以下命令启动本地 API 服务器：

json-server --watch db.json --port 3000

  • 这样，你就启动了一个 RESTful API 服务器，模拟 /api/login 接口。

4. 修改前端代码： 你需要将 fetch 请求中的 URL 修改为本地模拟的 API 地址，例如：

fetch('http://localhost:3000/users')

或者根据用户名和密码进行匹配，具体实现可以在前端模拟，或者通过 json-server 的 routes 配置来实现。

后台管理页面 (Dashboard)

你需要在 /dashboard.html 页面中，根据 localStorage 中保存的 token 来显示用户的后台管理页面内容。

<html>
    <body>
        <div class="dashboard-container">
            <h2>后台管理页面</h2>
            <p>欢迎，您已经成功登录！</p>
            <button onclick="logout()">退出登录</button>
        </div>
        
        <script>
            // 检查 localStorage 中是否有 token
            const token = localStorage.getItem('token');
            if (!token) {
                // 如果没有 token，则重定向到登录页面
                window.location.href = 'index.html';
            }

            function logout() {
                // 清除 localStorage 中的 token
                localStorage.removeItem('token');
                // 退出后重定向回登录页面
                window.location.href = 'index.html';
            }
        </script>

        <style>
            body {
                margin: 0;
                min-height: 100vh;
                display: flex;
                align-items: center;
                justify-content: center;
                background-color: #f5f5f5;
            }
            
            .dashboard-container {
                width: 100%;
                max-width: 600px;
                padding: 20px;
                box-shadow: 0 0 10px rgba(0,0,0,0.1);
                border-radius: 5px;
                background-color: white;
                text-align: center;
            }
            
            .dashboard-container h2 {
                margin-bottom: 20px;
            }
            
            .dashboard-container button {
                padding: 10px 20px;
                background-color: #1890ff;
                color: white;
                border: none;
                border-radius: 4px;
                cursor: pointer;
                font-size: 16px;
            }
            
            .dashboard-container button:hover {
                background-color: #40a9ff;
            }
        </style>
    </body>
</html>

代码解析：

  • 登录页面 (index.html):

    • 用户名和密码填写后，点击登录按钮触发 handleLogin 方法。
    • 方法会发送一个请求到本地模拟的 API (http://localhost:3000/users)，通过匹配用户名和密码来判断是否登录成功。
    • 成功登录后，模拟将一个 JWT token 存储在 localStorage 中，并跳转到 dashboard.html 页面。

  • 后台管理页面 (dashboard.html):

    • 在页面加载时，会检查 localStorage 是否存在 token。如果没有，说明用户没有登录，页面会重定向回登录页面 (index.html)。
    • 如果 token 存在，则认为用户已登录，显示后台管理界面，并提供一个退出登录按钮，点击后清除 localStorage 中的 token 并重定向回登录页面。

通过这样的设置，你可以实现一个简单的前端模拟登录系统，并允许用户登录后访问后台管理页面。

运行之后，在登录页面输入user、123点击登录

即可进入到后台管理页面

网站公告

今日签到

点亮在社区的每一天
去签到

热门文章

最新发布