---

📚 WrongNote (错题本小程序)

WrongNote 是一款基于 Vue 3 + Uni-App 与 Spring Boot 3 前后端分离架构开发的微信小程序。旨在为中学生、考研及考公群体提供一个集图文录入、多维度检索、学情统计于一体的智能化错题管理工具，帮助用户告别低效的手抄错题，实现数字化高效复习。

---

✨ 核心功能 (Core Features)

• 🔐 用户系统：完整的账号注册、登录流程，支持用户数据私有化隔离与本地状态保持。
• 📝 多元化录入：
  • 文字模式：结构化录入（题目、答案、解析），支持大文本输入。
  • 图片模式：支持调用相册或相机，为题目、答案、解析独立上传图片，告别繁琐打字。
• 🏷️ 多维度属性：为错题自定义“科目”、“标签”，并支持标记“熟练度（未掌握/模糊/已掌握）”与“难度（简单/中等/困难）”。
• 🔍 智能检索与筛选：
  • 支持基于 Spring Data JPA Specification 的动态多条件复合查询。
  • 支持关键词全字段模糊搜索（覆盖题目、答案、解析、标签）。
  • 支持按科目、熟练度及收藏状态进行快捷筛选。
• 📊 学情数据可视化：独立统计看板，直观展示错题总数、熟练度/难度分布情况及薄弱学科 Top 5 排行榜。
• 💅 现代化 UI/UX：采用弥散光感背景、玻璃拟态卡片、Chip（胶囊）选择器及左滑删除等现代化交互设计，界面清爽，体验流畅。

---

🛠️ 技术栈 (Tech Stack)

前端 (Frontend)

• 核心框架：Vue 3 (Composition API, <script setup>)
• 跨平台框架：Uni-App
• UI 交互：原生 CSS3 自定义响应式布局，整合部分 uni-ui 交互（如 uni-swipe-action）。
• 开发工具：HBuilderX, 微信开发者工具

后端 (Backend)

• 核心框架：Spring Boot 3.3.0, Java 21
• 数据持久层：Spring Data JPA, Hibernate
• 数据库：MySQL 8.0
• 核心技术点：RESTful API 设计、Specification 动态组合查询、本地文件 I/O 与静态资源映射。

开发与部署工具 (Tools)

• 版本控制：Git, GitHub
• 接口测试：Postman
• 本地反向代理：Nginx + mkcert（解决微信小程序开发环境下 HTTPS 文件上传与跨域的安全策略限制）

---

🚀 快速开始 (Getting Started)

1. 环境准备 (Prerequisites)

请确保你的电脑上已安装以下环境：

• JDK 21 及以上
• MySQL 8.0 及以上
• HBuilderX (App开发版)
• 微信开发者工具
• Nginx (用于配置本地 HTTPS 反向代理)

2. 数据库配置 (Database Setup)

1. 打开 MySQL Workbench，执行以下 SQL 语句创建数据库与用户：

CREATE DATABASE wrongnote_db CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;

3. 后端启动 (Backend Setup)

1. 使用 IntelliJ IDEA 打开 wrongnote 文件夹。
2. 找到 src/main/resources/application.properties，修改数据库密码及文件上传路径：

spring.datasource.password=你的MySQL密码
# 设置本地存放错题图片的文件夹路径（请先在电脑上创建好该文件夹）
file.upload-dir=D:/uploads/ 

3. 运行主类 WrongnoteApplication.java。系统将自动连接数据库并创建 users 和 question 表。

4. Nginx 代理配置 (Nginx Proxy Setup)

为了解决微信开发者工具对 uni.uploadFile 的底层 HTTPS 校验问题，需配置本地 Nginx 代理：

1. 使用 mkcert 生成本地 localhost SSL 证书。
2. 将证书放至 Nginx 的 conf 目录，修改 nginx.conf：

server {
    listen       443 ssl;
    server_name  localhost;
    ssl_certificate      localhost.pem;
    ssl_certificate_key  localhost-key.pem;
    location / {
        proxy_pass   http://127.0.0.1:8080;
        proxy_set_header   Host             $host;
        proxy_set_header   X-Real-IP        $remote_addr;
    }
}

3. 启动 Nginx。

5. 前端启动 (Frontend Setup)

1. 使用 HBuilderX 打开 wrongnote-miniapp 文件夹。
2. 确保项目内所有 API 基础路径为代理地址：

const API_BASE_URL = 'https://localhost/api';

3. 点击 运行 -> 运行到小程序模拟器 -> 微信开发者工具。
4. 在微信开发者工具的右上角 详情 -> 本地设置 中，勾选 “不校验合法域名、web-view（业务域名）、TLS版本以及HTTPS证书”。
5. 编译成功后，即可开始体验！

---

📄 许可证 (License)

This project is licensed under the MIT License - see the LICENSE file for details.