1. 项目概述：全栈笔记系统的技术架构解析
这个前后端分离的笔记分享系统采用了当前主流的技术栈组合：SpringBoot+Vue+MyBatis+MySQL。作为一套完整的全栈解决方案，它既包含了可直接部署的源码，也提供了详细的部署教程，特别适合需要快速构建知识管理系统的开发者参考。
我在实际开发中发现，这种架构组合在中小型Web应用中表现出色。SpringBoot提供了稳健的后端基础，Vue带来了流畅的前端体验，而MyBatis+MySQL的组合则保证了数据处理的灵活性和可靠性。整套系统从数据库设计到前端交互都经过了精心优化，代码结构清晰，模块划分合理。
2. 核心技术栈深度解析
2.1 SpringBoot后端设计要点
后端采用SpringBoot 2.7.x版本构建，这是我经过多个项目验证的稳定选择。核心配置中特别值得注意的有：
- 多环境配置分离：通过application-dev.yml、application-prod.yml实现开发和生产环境的无缝切换
- 全局异常处理：自定义了BusinessException和GlobalExceptionHandler，统一处理各类异常情况
- 接口文档集成：Swagger UI的配置经过了优化，去除了冗余信息，只展示核心接口
数据库连接池选用了HikariCP，这是目前性能最好的Java连接池实现。在application.yml中我这样配置：
yaml复制spring:
datasource:
hikari:
maximum-pool-size: 20
minimum-idle: 5
connection-timeout: 30000
idle-timeout: 600000
max-lifetime: 1800000
2.2 Vue前端架构设计
前端采用Vue 3 + Composition API开发，相比Options API更灵活。项目结构组织如下：
code复制/src
/api - 接口请求封装
/assets - 静态资源
/components - 公共组件
/router - 路由配置
/store - Pinia状态管理
/views - 页面组件
特别值得一提的是，我在axios拦截器中实现了以下功能：
- 请求参数自动序列化
- 响应数据统一处理
- 401状态码自动跳转登录页
- 请求失败自动重试机制
2.3 MyBatis与MySQL优化实践
数据库设计遵循了以下原则：
- 所有表都包含create_time和update_time字段
- 文本内容使用utf8mb4字符集，支持完整emoji
- 为常用查询字段建立了合适的索引
MyBatis的Mapper文件编写时，我特别注意了：
- 使用
明确定义映射关系 - 复杂查询使用
片段复用 - 动态SQL优先使用
标签而非@SelectProvider
一个典型的查询示例：
xml复制<select id="selectNotesByUser" resultMap="NoteResultMap">
SELECT * FROM note
WHERE user_id = #{userId}
<if test="keyword != null and keyword != ''">
AND (title LIKE CONCAT('%',#{keyword},'%')
OR content LIKE CONCAT('%',#{keyword},'%'))
</if>
ORDER BY update_time DESC
</select>
3. 系统核心功能实现
3.1 笔记CRUD功能实现
后端Controller层采用RESTful风格设计：
java复制@RestController
@RequestMapping("/api/notes")
public class NoteController {
@Autowired
private NoteService noteService;
@PostMapping
public Result createNote(@Valid @RequestBody NoteCreateDTO dto) {
return Result.success(noteService.createNote(dto));
}
@GetMapping("/{id}")
public Result getNote(@PathVariable Long id) {
return Result.success(noteService.getNoteById(id));
}
// 其他方法省略...
}
前端对应的API调用封装：
javascript复制// api/note.js
import request from '@/utils/request'
export function createNote(data) {
return request({
url: '/api/notes',
method: 'post',
data
})
}
export function getNote(id) {
return request({
url: `/api/notes/${id}`,
method: 'get'
})
}
3.2 富文本编辑器集成
经过多个编辑器比较，最终选择了Tiptap编辑器，它基于ProseMirror，具有以下优势：
- 完全可定制的Schema
- 实时协作支持
- 扩展系统强大
集成关键代码：
javascript复制import { Editor } from '@tiptap/vue-3'
import StarterKit from '@tiptap/starter-kit'
const editor = new Editor({
content: '',
extensions: [
StarterKit,
// 其他扩展...
],
onUpdate: ({ editor }) => {
const html = editor.getHTML()
// 处理内容更新...
}
})
3.3 用户认证与权限控制
采用JWT认证方案，后端核心逻辑：
java复制public class JwtTokenProvider {
private String secretKey = "your-secret-key";
private long validityInMilliseconds = 3600000; // 1h
public String createToken(String username, List<String> roles) {
Claims claims = Jwts.claims().setSubject(username);
claims.put("roles", roles);
Date now = new Date();
Date validity = new Date(now.getTime() + validityInMilliseconds);
return Jwts.builder()
.setClaims(claims)
.setIssuedAt(now)
.setExpiration(validity)
.signWith(SignatureAlgorithm.HS256, secretKey)
.compact();
}
// 其他方法...
}
前端路由守卫实现：
javascript复制router.beforeEach((to, from, next) => {
const isAuthenticated = store.getters['auth/isAuthenticated']
if (to.meta.requiresAuth && !isAuthenticated) {
next({ name: 'Login' })
} else if (to.meta.guestOnly && isAuthenticated) {
next({ name: 'Home' })
} else {
next()
}
})
4. 部署实战与性能优化
4.1 生产环境部署方案
推荐使用Docker Compose进行一键部署，docker-compose.yml配置示例：
yaml复制version: '3.8'
services:
mysql:
image: mysql:8.0
environment:
MYSQL_ROOT_PASSWORD: rootpass
MYSQL_DATABASE: notedb
MYSQL_USER: noteuser
MYSQL_PASSWORD: notepass
volumes:
- mysql_data:/var/lib/mysql
ports:
- "3306:3306"
backend:
build: ./backend
ports:
- "8080:8080"
depends_on:
- mysql
environment:
SPRING_DATASOURCE_URL: jdbc:mysql://mysql:3306/notedb
SPRING_DATASOURCE_USERNAME: noteuser
SPRING_DATASOURCE_PASSWORD: notepass
frontend:
build: ./frontend
ports:
- "80:80"
depends_on:
- backend
volumes:
mysql_data:
4.2 Nginx配置优化
前端Nginx配置关键点：
nginx复制server {
listen 80;
server_name yourdomain.com;
location / {
root /usr/share/nginx/html;
index index.html;
try_files $uri $uri/ /index.html;
}
location /api/ {
proxy_pass http://backend:8080;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}
# 启用gzip压缩
gzip on;
gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;
gzip_min_length 1000;
}
4.3 性能调优实战
数据库层面优化：
- 为note表的user_id和update_time字段创建复合索引
- 配置InnoDB缓冲池大小
- 定期优化表结构
后端优化措施：
- 启用Spring Boot Actuator监控端点
- 配置合理的线程池参数
- 添加二级缓存（Redis）
前端性能提升：
- 路由懒加载
- 组件异步加载
- 静态资源CDN加速
5. 常见问题排查指南
5.1 跨域问题解决方案
开发环境下可在后端添加配置：
java复制@Configuration
public class CorsConfig implements WebMvcConfigurer {
@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/**")
.allowedOrigins("*")
.allowedMethods("GET", "POST", "PUT", "DELETE")
.allowedHeaders("*");
}
}
生产环境建议通过Nginx解决跨域。
5.2 文件上传大小限制
Spring Boot默认文件上传限制为1MB，需要调整：
yaml复制spring:
servlet:
multipart:
max-file-size: 10MB
max-request-size: 10MB
5.3 数据库连接超时
在连接池配置中添加以下参数：
yaml复制spring:
datasource:
hikari:
connection-timeout: 30000
validation-timeout: 5000
leak-detection-threshold: 60000
5.4 Vue路由History模式404
Nginx需要添加以下配置：
nginx复制location / {
try_files $uri $uri/ /index.html;
}
6. 项目扩展方向建议
基于这个基础系统，可以考虑以下扩展方向：
- 笔记版本控制：集成Git-like的版本管理功能
- 全文检索：引入Elasticsearch实现高级搜索
- 协作编辑：使用Operational Transformation实现实时协作
- 移动端适配：开发响应式布局或单独移动应用
- 第三方登录：集成GitHub、Google等OAuth2登录
在实现这些扩展功能时，建议采用渐进式策略，先在小范围内验证技术方案，再逐步推广到整个系统。