用户管理系统网站模板

一个具有基本功能的网站模板，提供完整的用户管理系统和身份认证功能。

🚀 技术栈

前端

• Vue 3 + TypeScript
• Vite 构建工具
• Element Plus UI组件库
• Tailwind CSS 样式框架
• Pinia 状态管理
• Vue Router 路由管理

后端

• FastAPI + Uvicorn
• SQLModel ORM
• SQLite 数据库
• JWT 身份认证
• UV 包管理器

开发工具

• ESLint 代码检查
• Vue TSC 类型检查
• Concurrently 并发运行

📁 项目结构

user-management-template/
├── frontend/          # Vue 3 前端应用
│   ├── src/
│   │   ├── components/    # 组件
│   │   ├── views/         # 页面
│   │   ├── stores/        # Pinia状态管理
│   │   ├── router/        # 路由配置
│   │   ├── services/      # API服务
│   │   └── utils/         # 工具函数
│   ├── public/
│   └── package.json
├── backend/           # FastAPI 后端服务
│   ├── app/
│   │   ├── models/        # 数据模型
│   │   ├── routers/       # API路由
│   │   ├── services/      # 业务逻辑
│   │   ├── utils/         # 工具函数
│   │   └── main.py        # 应用入口
│   ├── pyproject.toml
│   └── uv.lock
└── package.json       # 根目录配置

🛠️ 快速开始

环境要求

• Node.js >= 18.0.0
• Python >= 3.8
• UV 包管理器

安装依赖

# 安装所有依赖
npm run install:all

开发模式

# 同时启动前端和后端开发服务器
npm run dev

# 或者分别启动
npm run dev:frontend  # 前端开发服务器 (http://localhost:5173)
npm run dev:backend   # 后端开发服务器 (http://localhost:8000)

构建生产版本

npm run build

代码检查

npm run lint        # ESLint检查
npm run type-check  # TypeScript类型检查

🔐 默认账户

用户名	密码	角色
admin	123456	管理员
user1	123456	普通用户

📋 功能特性

• ✅ 用户登录/登出
• ✅ JWT Token 身份认证
• ✅ 角色权限管理（管理员/普通用户）
• ✅ 用户管理（增删改查）
• ✅ 响应式设计
• ✅ 现代化UI界面

🎨 UI设计

• 主色调：#2563eb（蓝色）
• 背景色：#f8fafc（浅灰）
• 卡片式布局
• 左侧导航栏设计
• 支持桌面和平板设备

📝 API文档

启动后端服务后，访问 http://localhost:8000/docs 查看自动生成的API文档。

🔧 自定义开发

这个模板为您提供了一个坚实的基础，您可以在此基础上：

1. 添加新的页面和功能模块
2. 扩展用户角色和权限
3. 集成更多的UI组件
4. 添加新的API接口
5. 自定义样式和主题

📄 许可证

MIT License