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

<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) {// 发送登录请求到本地模拟的APIfetch('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);  // 模拟保存tokenwindow.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>

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

确保后端接口存在：你需要确保本地有一个接口（例如 /api/login）来模拟登录请求的处理。因为你的代码中使用的是 fetch 来发送请求到该接口，后端会返回模拟数据。
使用前端本地模拟 API：如果没有真正的后端，你可以使用 JavaScript 来模拟登录 API。你可以将登录接口本地化，只是直接返回你希望的 mock 数据。
本地开发环境搭建：
- 你可以使用简单的 HTTP 服务器来提供本地服务（例如通过 node.js 或 python 搭建）。
- 或者，你可以使用现有的工具（如 json-server）来创建一个 mock 的 RESTful API。

使用 `json-server` 来模拟后端

安装 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 中是否有 tokenconst token = localStorage.getItem('token');if (!token) {// 如果没有 token，则重定向到登录页面window.location.href = 'index.html';}function logout() {// 清除 localStorage 中的 tokenlocalStorage.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 并重定向回登录页面。