92 lines
1.9 KiB
Markdown
92 lines
1.9 KiB
Markdown
# Vue3 用户登录签到系统
|
||
|
||
基于Vue3的简单用户登录和签到系统，根据API文档实现。
|
||
|
||
## 功能特性
|
||
|
||
- 用户登录（基于提供的API接口）
|
||
- 用户签到功能
|
||
- 响应式设计
|
||
- 路由守卫保护
|
||
- 本地存储用户状态和签到记录
|
||
|
||
## 技术栈
|
||
|
||
- Vue 3
|
||
- Vue Router 4
|
||
- Vite
|
||
- 原生JavaScript
|
||
|
||
## 项目结构
|
||
|
||
```
|
||
loginSign/
|
||
├── src/
|
||
│ ├── views/
|
||
│ │ ├── Login.vue # 登录页面
|
||
│ │ └── Checkin.vue # 签到页面
|
||
│ ├── services/
|
||
│ │ └── api.js # API服务
|
||
│ ├── router.js # 路由配置
|
||
│ ├── App.vue # 根组件
|
||
│ └── main.js # 应用入口
|
||
├── public/ # 静态资源
|
||
├── index.html # HTML模板
|
||
├── vite.config.js # Vite配置
|
||
└── package.json # 项目依赖
|
||
```
|
||
|
||
## 快速开始
|
||
|
||
### 安装依赖
|
||
|
||
```bash
|
||
npm install
|
||
```
|
||
|
||
### 启动开发服务器
|
||
|
||
```bash
|
||
npm run dev
|
||
```
|
||
|
||
### 构建生产版本
|
||
|
||
```bash
|
||
npm run build
|
||
```
|
||
|
||
### 预览生产版本
|
||
|
||
```bash
|
||
npm run preview
|
||
```
|
||
|
||
## 使用说明
|
||
|
||
1. **登录**: 使用有效的手机号和密码登录系统
|
||
2. **签到**: 登录成功后可进行签到操作
|
||
3. **签到状态**: 系统会记录每日签到状态，防止重复签到
|
||
4. **退出**: 可随时退出登录
|
||
|
||
## API接口
|
||
|
||
系统使用以下API接口：
|
||
|
||
- **登录**: `POST https://api.pandorastudio.cn/auth/login`
|
||
- **参数**:
|
||
- phone: 手机号
|
||
- password: 密码
|
||
- Authorization: 认证令牌
|
||
|
||
## 注意事项
|
||
|
||
- 首次访问会自动跳转到登录页面
|
||
- 登录后会保存用户信息和token到localStorage
|
||
- 签到记录保存在localStorage中
|
||
- 已登录用户访问登录页面会自动跳转到签到页面
|
||
- 未登录用户访问签到页面会自动跳转到登录页面
|
||
|
||
## 开发说明
|
||
|
||
这是一个简单明了的登录签到系统，专注于核心功能实现，没有添加额外的复杂功能。 |