原网站
QClaw克隆
增加主题切换
升级为vue
📋 项目概述
本文记录了如何使用 **Vue 3 ** 和 **.NET 9** 从零构建一个完整的彩票资讯网站，包含前端展示系统和后端 API 服务。
✨ 核心功能
| 模块 | 说明 |
|------|------|
| 🏠 首页展示 | 轮播Banner、开奖公告、赛事投注表 |
| 🎨 主题切换 | 深色/浅色模式，localStorage记忆 |
| 👤 用户系统 | 注册、登录、JWT认证 |
| 📱 响应式 | 完美适配 PC 端 |
🖥️ 技术架构
```
┌─────────────────────────────────────────────────────┐
│ 前端 (Vue 3) │
├─────────────────────────────────────────────────────┤
│ • Vue 3.4 + Composition API │
│ • Pinia 状态管理 │
│ • Vite 5 构建工具 │
│ • CSS Variables 主题系统 │
└─────────────────────────────────────────────────────┘
↓ HTTP API
┌─────────────────────────────────────────────────────┐
│ 后端 (.NET 9) │
├─────────────────────────────────────────────────────┤
│ • ASP.NET Core Web API │
│ • Entity Framework Core + Pomelo MySQL │
│ • JWT Bearer 认证 │
│ • BCrypt 密码加密 │
└─────────────────────────────────────────────────────┘
```
🎨 前端实现
1. 项目结构
```
sporttery-vue3/
├── src/
│ ├── components/ # 14个Vue组件
│ │ ├── TopBar.vue # 顶部导航条
│ │ ├── SiteHeader.vue # Logo+搜索+主题切换
│ │ ├── MainNav.vue # 多级导航菜单
│ │ ├── Banner.vue # 轮播Banner
│ │ ├── LotteryCard.vue # 开奖公告
│ │ ├── MatchTable.vue # 赛事投注表
│ │ ├── NewsSection.vue # 新闻资讯
│ │ ├── AuthModal.vue # 登录/注册弹窗 ⭐
│ │ └── ...
│ ├── stores/ # Pinia状态管理
│ │ ├── theme.js # 主题状态
│ │ └── auth.js # 用户认证 ⭐
│ ├── api/ # API请求封装 ⭐
│ └── composables/ # 可复用逻辑
```
2. 主题切换系统
使用 CSS 变量实现一键主题切换：
```css
/* 浅色主题 */
:root {
--color-bg-primary: #FFFFFF;
--color-text-primary: #333333;
--color-border: #DDDDDD;
}
/* 深色主题 */
data-theme="dark"\] { --color-bg-primary: #1A1A1A; --color-text-primary: #E8E8E8; --color-border: #3D3D3D; } \`\`\` ### 3. 用户认证模块 使用 Pinia 管理登录状态： \`\`\`javascript // stores/auth.js **export** **const** useAuthStore = defineStore('auth', () =\> { **const** token = ref(localStorage.getItem('token') \|\| '') **const** user = ref(**null**) **async** **function** login(account, password) { **const** res = **await** api.login({ account, password }) token.value = res.data.token user.value = res.data.user } }) \`\`\` --- ## ⚙️ 后端实现 ### 1. 项目结构 \`\`\` sporttery-api/ ├── src/ │ ├── Controllers/ │ │ ├── AuthController.cs # 认证接口 ⭐ │ │ └── HealthController.cs # 健康检查 │ ├── Services/ │ │ ├── UserService.cs # 用户业务逻辑 │ │ └── JwtService.cs # JWT生成 ⭐ │ ├── Models/ │ │ └── User.cs # 用户实体 │ ├── Data/ │ │ └── AppDbContext.cs # EF Core上下文 │ └── DTOs/ │ └── DTOs.cs # 数据传输对象 └── appsettings.json # 配置文件 \`\`\` ### 2. 核心接口 \| 接口 \| 方法 \| 说明 \| \|------\|------\|------\| \| \`/api/auth/register\` \| POST \| 用户注册 \| \| \`/api/auth/login\` \| POST \| 用户登录 \| \| \`/api/auth/me\` \| GET \| 获取当前用户信息 \| ### 3. JWT 认证 \`\`\`csharp // Services/JwtService.cs public string GenerateToken(int userId, string username) { var claims = new\[
{
new Claim(ClaimTypes.NameIdentifier, userId.ToString()),
new Claim(ClaimTypes.Name, username)
};
var key = new SymmetricSecurityKey(Encoding.UTF8.GetBytes(jwtKey));
var token = new JwtSecurityToken(..., claims, ..., signingCredentials);
return new JwtSecurityTokenHandler().WriteToken(token);
}
```
4. 数据库设计
```sql
CREATE TABLE users (
id INT AUTO_INCREMENT PRIMARY KEY,
username VARCHAR(50) NOT NULL UNIQUE,
email VARCHAR(100) NOT NULL UNIQUE,
password_hash VARCHAR(255) NOT NULL,
phone VARCHAR(20),
created_at DATETIME DEFAULT CURRENT_TIMESTAMP,
updated_at DATETIME ON UPDATE CURRENT_TIMESTAMP,
is_active TINYINT(1) DEFAULT 1
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
```
🚀 项目演示
前端地址
```
```
后端 API
```
http://localhost:5001/api/auth/register
http://localhost:5001/api/auth/login
```
核心界面
-
**首页** - 轮播Banner + 开奖公告 + 赛事表
-
**主题切换** - 点击右上角月亮/太阳图标
-
**用户中心** - 点击登录/注册，体验完整流程
📦 技术要点总结
Vue 3 亮点
-
✅ `<script setup>` 语法糖，代码更简洁
-
✅ Pinia 状态管理，代码更解耦
-
✅ Teleport 组件，实现弹窗更优雅
-
✅ CSS Variables，主题切换更丝滑
.NET 9 亮点
-
✅ 最小 API，配置更简洁
-
✅ EF Core 9，性能更强
-
✅ JWT Bearer，认证更安全
-
✅ 依赖注入，代码更可维护
📝 源代码
| 项目 | 路径 |
|------|------|
| 前端 Vue3 | `/Users/dev/.qclaw/workspace/sporttery-vue3/` |
| 后端 .NET | `/Users/dev/.qclaw/workspace/sporttery-api/` |
🙏 致谢
感谢 QClaw AI 助手提供的开发支持！
*本文由 AI 辅助编写，完整记录了项目开发全过程*