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         # 项目依赖

快速开始

安装依赖

npm install

启动开发服务器

npm run dev

构建生产版本

npm run build

预览生产版本

npm run preview

使用说明

1. 登录: 使用有效的手机号和密码登录系统
2. 签到: 登录成功后可进行签到操作
3. 签到状态: 系统会记录每日签到状态，防止重复签到
4. 退出: 可随时退出登录

API接口

系统使用以下API接口：

• 登录: POST https://api.pandorastudio.cn/auth/login
• 参数:
  • phone: 手机号
  • password: 密码
  • Authorization: 认证令牌

注意事项

• 首次访问会自动跳转到登录页面
• 登录后会保存用户信息和token到localStorage
• 签到记录保存在localStorage中
• 已登录用户访问登录页面会自动跳转到签到页面
• 未登录用户访问签到页面会自动跳转到登录页面

开发说明

这是一个简单明了的登录签到系统，专注于核心功能实现，没有添加额外的复杂功能。