1. 项目概述：SpringBoot+Vue全栈小说网站开发实录
去年接手的一个小说阅读平台项目，让我对SpringBoot+Vue的技术栈组合有了更深的实战体会。这个全栈架构完美兼顾了后端服务的稳定性和前端交互的流畅性，特别适合内容型网站的快速迭代开发。整套系统包含小说分类展示、章节阅读、书签管理、用户评论等完整功能模块，采用RESTful API进行前后端分离通信，日均能稳定支撑5万+的PV访问量。
2. 技术架构设计解析
2.1 后端SpringBoot技术选型
选用SpringBoot 2.7.x版本作为后端框架，主要基于以下考量：
- 自动配置特性简化了SSM框架的整合流程
- 内嵌Tomcat容器便于打包部署
- Actuator端点提供完善的监控支持
核心依赖配置示例（pom.xml关键片段）：
<dependency> <groupId>org.mybatis.spring.boot</groupId> <artifactId>mybatis-spring-boot-starter</artifactId> <version>2.2.2</version> </dependency> <dependency> <groupId>com.github.pagehelper</groupId> <artifactId>pagehelper-spring-boot-starter</artifactId> <version>1.4.6</version> </dependency>2.2 前端Vue技术方案
采用Vue 3组合式API开发前端SPA应用，主要技术栈包括：
- Vue Router实现前端路由管理
- Axios处理HTTP请求
- Element Plus组件库构建UI
- Pinia状态管理
路由配置示例：
const routes = [ { path: '/book/:id', component: BookDetail, meta: { requiresAuth: true } } ]3. 核心功能实现细节
3.1 小说内容分页查询
后端采用MyBatis+PageHelper实现高效分页，关键要点：
- 启用PageHelper自动分页插件
- 自定义PageInfo包装类返回分页数据
- 添加redis缓存减轻数据库压力
分页查询Service层实现：
public PageInfo<Book> queryByPage(int pageNum, int pageSize) { PageHelper.startPage(pageNum, pageSize); List<Book> books = bookMapper.selectAll(); return new PageInfo<>(books); }3.2 章节阅读状态持久化
前端通过watch监听路由变化，自动记录阅读进度：
watch(() => route.params.chapterId, (newVal) => { localStorage.setItem(`book_${bookId}`, newVal) })后端采用JWT实现用户认证，配合Interceptor验证令牌：
public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) { String token = request.getHeader("Authorization"); // 验证逻辑... }4. 性能优化实践
4.1 数据库查询优化
- 为高频查询字段添加索引：
CREATE INDEX idx_book_title ON books(title); CREATE INDEX idx_category ON books(category_id);- 使用@Cacheable注解实现方法级缓存：
@Cacheable(value = "books", key = "#id") public Book getById(Long id) { return bookMapper.selectByPrimaryKey(id); }4.2 前端资源优化方案
- 配置Webpack分包策略：
configureWebpack: { optimization: { splitChunks: { chunks: 'all' } } }- 启用Gzip压缩减少资源体积：
gzip on; gzip_types text/plain application/xml text/css application/javascript;5. 部署与监控方案
5.1 Docker容器化部署
编写多阶段构建的Dockerfile：
FROM maven:3.8-jdk-11 AS build COPY . /app RUN mvn -f /app/pom.xml clean package FROM openjdk:11-jre COPY --from=build /app/target/*.jar /app.jar ENTRYPOINT ["java","-jar","/app.jar"]5.2 Prometheus监控配置
SpringBoot暴露的监控端点：
management: endpoints: web: exposure: include: health,info,metrics,prometheus metrics: tags: application: ${spring.application.name}6. 开发经验与避坑指南
- MyBatis映射文件陷阱：
- 避免使用
${}进行字符串拼接，防止SQL注入 - 复杂查询推荐使用
<script>标签包裹
- Vue组件通信建议：
- 父子组件优先使用props/emit
- 跨组件共享状态使用Pinia
- 避免直接修改props数据
- 跨域问题解决方案：
@Configuration public class CorsConfig implements WebMvcConfigurer { @Override public void addCorsMappings(CorsRegistry registry) { registry.addMapping("/**") .allowedOrigins("*") .allowedMethods("*"); } }- 线上问题排查技巧：
- 使用Arthas进行运行时诊断
- 配置Logback异步日志避免I/O阻塞
- 集成Sentry收集前端异常
这个项目从技术选型到最终上线历时3个月，期间遇到的性能瓶颈和兼容性问题让我深刻体会到全栈开发的挑战。特别提醒在开发初期就要建立完整的监控体系，这对后期优化至关重要。现在回看，如果能在缓存策略上采用多级缓存设计（Redis+本地缓存），系统响应时间还能再降低30%左右。
