原网站
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 辅助编写，完整记录了项目开发全过程*