你已经完成了 `page_routes
.py` 中多个前端页面的路由定义，包括：
- `/register`：注册页
- `/profile`：个人中心页
- `/notfound`（即 404 页面）
接下来你需要创建对应的 HTML 模板文件，并确保它们位于正确的路径下（`frontend/templates/` 目录中），同时要保证这些页面具备基本结构、样式和可扩展性。
---
### ✅ 解决方案：创建所需的 HTML 页面模板
我们将为以下三个页面分别提供基础模板代码：
1
. `register
.html`
2
. `profile
.html`
3
. `404
.html`
所有模板都基于 Jinja2 + Bootstrap 5 构建，便于快速开发与响应式布局。假设你的项目使用了静态资源（如 CSS/JS）在 `frontend/static/` 下。
---
#### 📁 文件结构预期如下：
```
frontend/
├── templates/
│ ├── register
.html
│ ├── profile
.html
│ └── 404
.html
├── static/
├── css/
│ └── style
.css
└── js/
└── main
.js
```
---
### 1
. `register
.html` - 用户注册页面
```html
<!-- frontend/templates/register
.html -->
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1
.0"/>
<title>用户注册</title>
<link href="https://cdn
.jsdelivr
.net/npm/bootstrap@5
.3
.0/dist/css/bootstrap
.min
.css" rel="stylesheet">
<link rel="stylesheet" href="/static/css/style
.css">
</head>
<body class="bg-light">
<div class="container mt-5" style="max-width: 400px;">
<h2 class="t
ext-center mb-4">📝 注册新账户</h2>
<form id="registerForm">
<div class="mb-3">
<label for="username" class="form-label">用户名</label>
<input type="t
ext" class="form-control" id="username" required />
</div>
<div class="mb-3">
<label for="email" class="form-label">邮箱</label>
<input type="email" class="form-control" id="email" required />
</div>
<div class="mb-3">
<label for="password" class="form-label">密码</label>
<input type="password" class="form-control" id="password" required />
</div>
<div class="mb-3">
<label for="confirmPassword" class="form-label">确认密码</label>
<input type="password" class="form-control" id="confirmPassword" required />
</div>
<button type="submit" class="btn btn-primary w-100">注册</button>
</form>
<p class="t
ext-center mt-3">
已有账号？<a href="/login">去登录</a>
</p>
</div>
<script src="/static/js/main
.js"></script>
<script>
document
.getElementById("registerForm")
.addEventListener("submit", async (e) => {
e
.preventDefault();
const password = document
.getElementById("password")
.value;
const confirmPassword = document
.getElementById("confirmPassword")
.value;
if (password !== confirmPassword) {
alert("两次输入的密码不一致！");
return;
}
const res = await fetch("/api/auth/register", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON
.stringify({
username: document
.getElementById("username")
.value,
email: document
.getElementById("email")
.value,
password: password,
}),
});
if (res
.ok) {
alert("注册成功！即将跳转到登录页
...");
window
.location
.href = "/login";
} else {
const data = await res
.json();
alert("注册失败：" + (data
.detail || "未知错误"));
}
});
</script>
</body>
</html>
```
---
### 2
. `profile
.html` - 个人中心页面
```html
<!-- frontend/templates/profile
.html -->
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1
.0"/>
<title>个人中心</title>
<link href="https://cdn
.jsdelivr
.net/npm/bootstrap@5
.3
.0/dist/css/bootstrap
.min
.css" rel="stylesheet">
<link rel="stylesheet" href="/static/css/style
.css">
</head>
<body class="bg-white">
<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
<div class="container">
<a class="navbar-brand" href="/">AI 聊天系统</a>
<div class="ms-auto">
<span class="navbar-t
ext">角色: {{ user_role }} | 部门: {{ user_dept_id }}</span>
</div>
</div>
</nav>
<div class="container mt-5" style="max-width: 600px;">
<h2 class="t
ext-center mb-4">👤 个人资料</h2>
<ul class="list-group">
<li class="list-group-item"><strong>用户ID：</strong><span id="userId">加载中
...</span></li>
<li class="list-group-item"><strong>用户名：</strong><span id="username">加载中
...</span></li>
<li class="list-group-item"><strong>邮箱：</strong><span id="email">加载中
...</span></li>
<li class="list-group-item"><strong>角色：</strong>{{ user_role }}</li>
<li class="list-group-item"><strong>所属部门ID：</strong>{{ user_dept_id }}</li>
<li class="list-group-item"><strong>注册时间：</strong><span id="createdAt">-</span></li>
</ul>
<div class="mt-4 d-grid gap-2 d-md-flex justify-content-md-end">
<button class="btn btn-outline-secondary" onclick="window
.location
.href='/'">返回首页</button>
<button class="btn btn-danger" onclick="logout()">退出登录</button>
</div>
</div>
<script src="/static/js/main
.js"></script>
<script>
// 获取当前用户信息（通过 JWT 解码或调用 API）
async function loadUserProfile() {
try {
const res = await fetch("/api/users/me", {
headers: { "Authorization": "Bearer " + getJwtToken() }
});
if (!res
.ok) throw new Error("无法获取用户信息");
const user = await res
.json();
document
.getElementById("userId")
.t
extContent = user
.id;
document
.getElementById("username")
.t
extContent = user
.username;
document
.getElementById("email")
.t
extContent = user
.email;
document
.getElementById("createdAt")
.t
extContent = new Date(user
.created_at)
.toLocaleString();
} catch (err) {
console
.error(err);
alert("加载用户信息失败，请重新登录");
window
.location
.href = "/login";
}
}
function getJwtToken() {
return localStorage
.getItem("access_token") || "";
}
function logout() {
localStorage
.removeItem("access_token");
window
.location
.href = "/login";
}
// 页面加载时获取数据
window
.onload = loadUserProfile;
</script>
</body>
</html>
```
---
### 3
. `404
.html` - 页面未找到
```html
<!-- frontend/templates/404
.html -->
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1
.0"/>
<title>页面不存在</title>
<link href="https://cdn
.jsdelivr
.net/npm/bootstrap@5
.3
.0/dist/css/bootstrap
.min
.css" rel="stylesheet">
<style>
.error-container {
height: 70vh;
display: flex;
flex-direction:
column;
align-items: center;
justify-content: center;
t
ext-align: center;
}
</style>
</head>
<body class="bg-light">
<div class="container error-container">
<h1 class="display-1 t
ext-danger">🚫 404</h1>
<h2>抱歉，页面未找到</h2>
<p class="t
ext-muted">您访问的页面 <code>{{ url }}</code> 不存在。</p>
<div class="mt-4">
<a href="/" class="btn btn-primary me-2">返回首页</a>
<a href="/chat" class="btn btn-outline-secondary">进入聊天</a>
</div>
</div>
</body>
</html>
```
---
## 🔍 解释说明
| 页面 | 功能 | 技术点 |
|------|------|--------|
| `register
.html` | 新用户注册 | 表单验证、Fetch 提交、前后端交互 |
| `profile
.html` | 显示用户个人信息 | JWT 认证、异步加载数据、本地存储 token |
| `404
.html` | 友好提示错误页面 | 动态变量渲染（Jinja2）、用户体验优化 |
> ⚠️ 注意事项：
- 确保 `main
.py` 正确挂载了 `/static` 路径。
- 前端 JS 使用 `localStorage` 存储 `access_token`，需配合登录逻辑设置。
- 所有 `/api/*` 接口需要后端支持 CORS。
---
## ✅ 后续建议
1
. **提取公共部分**：可以将 `<head>`、导航栏等抽成 `base
.html`，使用 `{%
extends %}` 继承。
2
. **增强安全性**：注册时增加验证码、邮箱确认机制。
3
. **响应式设计优化**：适配移动端体验。
4
. **国际化支持**：未来可加入多语言切换。
---
这篇博客探讨了EXT.NET框架中DateColumn组件在显示日期时的格式问题。通过2011-07-14 14:05:37的例子，解释了如何使用不同的字母符号（如Y, M, D等）来定制日期时间格式，并指出EXT.NET会按原样显示设置的格式。"
81088711,7857676,图像处理：基于区域特征集成的显著目标检测,"['计算机视觉', '图像处理', '机器学习', '特征提取', '图像分析']
扫一扫
2115
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
