SpringBoot2+Vue3构建学生读书笔记共享平台实战

1. 项目概述

这个基于SpringBoot2+Vue3+MyBatis-Plus+MySQL8.0技术栈的学生读书笔记共享平台，是我在指导大学生毕业设计时反复打磨的一个实战项目。它解决了传统纸质读书笔记难以共享、检索不便的核心痛点，通过Web平台实现笔记的数字化管理和知识沉淀。

提示：项目采用前后端分离架构，后端使用SpringBoot2提供RESTful API，前端用Vue3构建交互界面，MyBatis-Plus简化数据库操作，MySQL8.0存储数据。这种技术组合兼顾了开发效率和系统性能。

2. 技术架构解析

2.1 后端技术选型

SpringBoot2作为后端框架，我特别看重它的几个特性：

• 自动配置：减少了XML配置工作量，比如自动配置DataSource
• 内嵌Tomcat：简化部署流程，开发阶段直接运行main方法即可启动
• Starter依赖：通过spring-boot-starter-web快速构建Web应用

java复制// 典型Controller示例
@RestController
@RequestMapping("/api/notes")
public class NoteController {
    @Autowired
    private NoteService noteService;
    
    @GetMapping("/{id}")
    public Result<NoteVO> getNote(@PathVariable Long id) {
        return Result.success(noteService.getById(id));
    }
}

2.2 前端技术方案

Vue3相比Vue2的主要优势：

• Composition API：更好的逻辑复用，比如封装笔记编辑逻辑
• 性能提升：编译时优化使打包体积减少41%
• TypeScript支持：完善的类型检查避免低级错误

javascript复制// 笔记列表组件示例
<script setup>
import { ref } from 'vue'
const notes = ref([])

const fetchNotes = async () => {
  const res = await axios.get('/api/notes')
  notes.value = res.data
}
</script>

2.3 数据库设计

MySQL8.0的特性应用：

• 窗口函数：实现笔记排行榜统计
• JSON字段：存储笔记的标签信息
• 索引优化：为高频查询字段建立复合索引

sql复制CREATE TABLE `note` (
  `id` bigint NOT NULL AUTO_INCREMENT,
  `title` varchar(100) NOT NULL,
  `content` text NOT NULL,
  `user_id` bigint NOT NULL,
  `tags` json DEFAULT NULL,
  `view_count` int DEFAULT '0',
  PRIMARY KEY (`id`),
  KEY `idx_user` (`user_id`),
  KEY `idx_title` (`title`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

3. 核心功能实现

3.1 笔记管理模块

采用RBAC模型实现权限控制：

• 学生：创建/编辑/删除自己的笔记
• 管理员：管理所有笔记内容
• 访客：仅可查看公开笔记

关键实现点：

1. 使用MyBatis-Plus的自动填充功能处理创建时间
2. 通过AOP记录笔记操作日志
3. 采用Redis缓存热门笔记数据

3.2 全文检索功能

基于Elasticsearch实现：

• 索引映射设计：包括标题、内容、标签等字段
• 中文分词：采用IK Analyzer插件
• 相关性排序：BM25算法调整

java复制// 搜索服务实现
public List<Note> search(String keyword) {
    NativeSearchQuery query = new NativeSearchQueryBuilder()
        .withQuery(QueryBuilders.multiMatchQuery(keyword, "title", "content"))
        .build();
    return elasticsearchRestTemplate.search(query, Note.class)
        .stream().map(SearchHit::getContent).collect(Collectors.toList());
}

3.3 文件上传服务

采用分层存储策略：

• 小文件（<10MB）：直接存储MySQL
• 大文件：使用MinIO对象存储
• 图片：通过Thumbnailator生成缩略图

4. 部署与优化

4.1 容器化部署

Docker Compose编排方案：

yaml复制version: '3'
services:
  mysql:
    image: mysql:8.0
    environment:
      MYSQL_ROOT_PASSWORD: root
  redis:
    image: redis:alpine
  backend:
    build: ./backend
    depends_on:
      - mysql
      - redis

4.2 性能优化实践

1. Nginx配置：

nginx复制server {
    gzip on;
    gzip_types text/plain application/json;
    
    location /api {
        proxy_pass http://backend:8080;
    }
}

2. JVM参数调优：

code复制-XX:+UseG1GC -Xms512m -Xmx1024m

3. 数据库连接池配置：

properties复制spring.datasource.hikari.maximum-pool-size=20
spring.datasource.hikari.connection-timeout=30000

5. 开发经验总结

1. 前后端联调技巧：

• 使用Swagger生成API文档
• 约定统一的响应格式：

json复制{
  "code": 200,
  "message": "success",
  "data": {}
}

2. 典型问题解决方案：

• 跨域问题：通过@CrossOrigin注解解决
• 时区问题：MySQL配置serverTimezone=Asia/Shanghai
• 循环引用：使用@JsonIgnore注解避免

3. 代码规范建议：

• 遵循阿里巴巴Java开发手册
• 前端采用ESLint+Prettier
• Git提交信息符合Conventional Commits规范

这个项目经过3次迭代，目前已在多个高校计算机专业作为课程设计案例。实际开发中最大的体会是：技术选型要克制，能用成熟方案就不追新；文档编写要同步，特别是接口文档；测试用例要完备，特别是边界条件。