<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>
为了基于上述代码模拟登录，并让本地访问后台管理页面，你可以通过以下步骤来实现：
-
确保后端接口存在：你需要确保本地有一个接口（例如
/api/login）来模拟登录请求的处理。因为你的代码中使用的是fetch来发送请求到该接口，后端会返回模拟数据。 -
使用前端本地模拟 API：如果没有真正的后端，你可以使用 JavaScript 来模拟登录 API。你可以将登录接口本地化，只是直接返回你希望的 mock 数据。
-
本地开发环境搭建：
- 你可以使用简单的 HTTP 服务器来提供本地服务（例如通过
node.js或python搭建）。 - 或者，你可以使用现有的工具（如
json-server）来创建一个 mock 的 RESTful API。
- 你可以使用简单的 HTTP 服务器来提供本地服务（例如通过
使用 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 中是否有 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点击登录
即可进入到后台管理页面
