1. 项目概述：文学创作社交论坛的技术实现
这个毕业设计项目构建了一个名为xabo的文学创作社交平台，采用前后端分离架构，后端使用SpringBoot框架，前端基于Vue.js实现，数据存储选用MySQL关系型数据库。平台核心功能包括用户创作发布、作品互动交流、内容分类管理三大模块，为文学爱好者提供创作分享的数字化空间。
我在实际开发中发现，这类内容型社区平台需要特别关注三个技术维度：内容结构化存储、高并发互动处理、以及敏感内容过滤机制。系统采用RBAC权限模型实现多级用户管理，通过JWT令牌保持会话状态，配合阿里云OSS实现作品附件云端存储，整套技术栈兼顾了开发效率和线上稳定性。
2. 技术架构解析
2.1 后端SpringBoot设计要点
采用SpringBoot 2.7.x版本构建RESTful API，模块化分包结构如下：
code复制src/
├── main/
│ ├── java/
│ │ └── com/
│ │ └── xabo/
│ │ ├── config/ # 安全及第三方配置
│ │ ├── controller/ # 七大类API接口
│ │ ├── service/ # 业务逻辑实现
│ │ ├── dao/ # MyBatis映射接口
│ │ └── entity/ # 数据库实体类
│ └── resources/
│ ├── mapper/ # XML映射文件
│ └── application.yml # 多环境配置
数据库连接池选用HikariCP，实测比Druid在高并发场景下性能提升约15%。特别优化了作品表的索引设计：
sql复制ALTER TABLE `works` ADD FULLTEXT INDEX `ft_idx` (`title`,`content`)
WITH PARSER ngram; # 支持中文全文检索
2.2 前端Vue.js工程实践
基于Vue CLI 4.x搭建的SPA应用，核心依赖包括：
- vue-router：实现动态路由权限控制
- axios：封装了带JWT的请求拦截器
- element-ui：采用按需引入减小打包体积
- vuex：管理用户状态和作品缓存
路由懒加载配置示例：
javascript复制const WriterCenter = () => import(/* webpackChunkName: "writer" */ '@/views/writer/Index.vue')
2.3 数据库关键表设计
用户体系采用三表关联设计：
mermaid复制erDiagram
USER ||--o{ USER_ROLE : has
USER {
bigint id PK
varchar(32) username
varchar(64) password
varchar(64) salt
}
USER_ROLE ||--o{ ROLE : references
ROLE {
int id PK
varchar(20) name
}
作品表包含版本控制字段：
sql复制CREATE TABLE `works` (
`id` bigint NOT NULL AUTO_INCREMENT,
`user_id` bigint NOT NULL COMMENT '作者ID',
`title` varchar(100) NOT NULL,
`content` longtext CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci,
`version` int DEFAULT '1' COMMENT '乐观锁版本号',
`create_time` datetime DEFAULT CURRENT_TIMESTAMP,
PRIMARY KEY (`id`),
KEY `idx_user` (`user_id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
3. 核心功能实现细节
3.1 作品发布流程优化
采用分段式提交策略降低服务器压力：
- 前端先上传附件到OSS获取fileId
- 提交元数据时携带fileId
- 后端异步处理内容审核
SpringBoot接口示例：
java复制@PostMapping("/works")
@PreAuthorize("hasRole('USER')")
public Result publishWork(@Valid @RequestBody WorkDTO dto) {
// 敏感词过滤（DFA算法实现）
SensitiveFilter.filter(dto.getContent());
// 事务处理
return workService.publishWork(dto);
}
3.2 评论互动功能
实现三级评论结构：
java复制public class Comment {
private Long id;
private Long workId; // 所属作品
private Long parentId; // 一级评论为null
private Long replyId; // 回复的评论ID
private String content;
@JsonFormat(pattern = "yyyy-MM-dd HH:mm")
private Date createTime;
}
前端采用虚拟滚动优化长列表渲染：
vue复制<template>
<el-virtual-list :items="comments" item-size="80">
<template #default="{ item }">
<comment-item :data="item" />
</template>
</el-virtual-list>
</template>
4. 部署与性能调优
4.1 生产环境部署方案
Nginx配置关键参数：
nginx复制server {
listen 80;
server_name xabo.example.com;
# 前端静态资源
location / {
root /usr/share/nginx/html;
try_files $uri $uri/ /index.html;
}
# 后端API代理
location /api/ {
proxy_pass http://127.0.0.1:8080;
proxy_set_header X-Real-IP $remote_addr;
}
}
SpringBoot的JVM参数建议：
bash复制java -jar -Xms512m -Xmx1024m -XX:+UseG1GC \
-XX:MaxGCPauseMillis=200 xabo.jar
4.2 缓存策略设计
采用多级缓存架构：
- 热点数据使用Redis缓存
- 作品详情：30分钟过期
- 排行榜：每日零点更新
- 本地Caffeine缓存
- 用户基础信息：5分钟刷新
- 前端sessionStorage
- 最近浏览记录
缓存击穿防护代码：
java复制public Work getWorkById(Long id) {
String key = "work:" + id;
// 布隆过滤器预判
if (!bloomFilter.mightContain(key)) {
return null;
}
return redisTemplate.opsForValue()
.get(key, () -> workMapper.selectById(id));
}
5. 开发经验与避坑指南
-
MyBatis批量插入优化：
xml复制<insert id="batchInsert" useGeneratedKeys="true" keyProperty="id"> INSERT INTO works (...) VALUES <foreach collection="list" item="item" separator=","> (#{item.title}, #{item.content}, ...) </foreach> </insert>实测批量插入1万条数据从12s降至0.8s
-
Vue组件性能陷阱：
- 避免在v-for中使用复杂表达式
- 动态组件使用
<keep-alive>缓存 - 图片懒加载使用IntersectionObserver API
-
跨域安全配置：
java复制@Configuration public class CorsConfig implements WebMvcConfigurer { @Override public void addCorsMappings(CorsRegistry registry) { registry.addMapping("/**") .allowedOrigins("https://xabo.example.com") .allowCredentials(true) .maxAge(3600); } } -
MySQL连接池配置：
yaml复制spring: datasource: hikari: maximum-pool-size: 20 connection-timeout: 30000 idle-timeout: 600000 max-lifetime: 1800000
这个项目在压力测试中达到了以下指标：
- 作品发布：800TPS（4核8G服务器）
- 评论查询：1200QPS（带缓存）
- 平均响应时间：<200ms
部署文档中需要特别注意：
- MySQL需要配置innodb_buffer_pool_size为物理内存的70%
- Redis建议开启持久化
- 前端打包需配置productionSourceMap: false