1. 项目概述与技术栈选型
这个基于SpringBoot2+Vue3+MyBatis-Plus+MySQL8.0的新闻推荐系统，是一个典型的现代化全栈Web应用。我在实际开发中发现，这套技术组合特别适合需要快速迭代的中小型项目，既能保证后端服务的稳定性，又能提供流畅的前端用户体验。
系统采用前后端分离架构，后端使用SpringBoot2作为基础框架，相比传统SSM架构，省去了大量XML配置工作。MyBatis-Plus作为ORM层，通过其强大的CRUD接口和Wrapper条件构造器，让数据库操作变得异常简单。前端选用Vue3的组合式API，配合TypeScript支持，使得复杂交互逻辑的组织更加清晰。
MySQL8.0作为数据存储，其窗口函数和CTE(Common Table Expressions)特性在推荐算法实现中发挥了重要作用。特别是在处理用户行为分析时，利用MySQL8.0的JSON字段类型，可以灵活存储用户的浏览历史和行为特征。
2. 环境搭建与项目初始化
2.1 开发环境准备
在开始项目前，需要确保开发环境配置正确。我推荐使用以下版本组合：
- JDK 17（SpringBoot2.7.x官方推荐版本）
- Node.js 16+
- MySQL 8.0.28+
注意：很多开发者遇到的"java: 警告: 源发行版17需要目标发行版17"错误，通常是因为IDE中的编译版本设置与pom.xml中指定的Java版本不一致导致的。需要在IDEA的Project Structure中确认Modules和Project的Language Level都为17。
后端项目初始化时，我习惯使用Spring Initializr生成基础结构，必选的依赖包括：
- Spring Web
- MyBatis-Plus
- MySQL Driver
- Lombok
前端则使用Vite创建Vue3项目，相比传统Webpack构建速度更快：
bash复制npm create vite@latest news-recommend-frontend --template vue-ts
2.2 数据库设计与初始化
新闻推荐系统的核心表包括：
- 用户表(user)：存储用户基本信息
- 新闻表(news)：包含标题、内容、分类等字段
- 用户行为表(user_behavior)：记录浏览、点赞等行为
- 推荐结果表(recommendation)：存储生成的推荐列表
MySQL8.0的安装有几个关键点需要注意：
- 安装完成后需要运行
mysql_secure_installation进行安全配置 - 创建用户时要指定加密方式为
caching_sha2_password（MySQL8.0默认） - 配置文件中建议设置
default_authentication_plugin=mysql_native_password兼容旧客户端
3. 后端核心实现
3.1 SpringBoot2应用架构
项目采用典型的三层架构：
- Controller层：处理HTTP请求，参数校验
- Service层：业务逻辑实现
- DAO层：数据库操作
MyBatis-Plus的使用大大简化了DAO层开发。例如用户表的Mapper接口只需继承BaseMapper：
java复制public interface UserMapper extends BaseMapper<User> {
// 自定义复杂查询方法
@Select("SELECT * FROM user WHERE last_login_time < #{time}")
List<User> selectInactiveUsers(@Param("time") LocalDateTime time);
}
3.2 推荐算法实现
系统采用混合推荐策略：
- 基于内容的推荐：使用TF-IDF算法分析新闻文本相似度
- 协同过滤：根据用户行为计算相似用户偏好
- 热门推荐：近期热门新闻作为冷启动方案
算法部分核心代码示例：
java复制public List<News> recommendForUser(Long userId) {
// 获取用户历史行为
List<UserBehavior> behaviors = behaviorService.listByUser(userId);
// 内容推荐（30%权重）
List<News> contentBased = contentRecommender.recommend(behaviors);
// 协同过滤（50%权重）
List<News> cfBased = cfRecommender.recommend(userId);
// 热门补充（20%权重）
List<News> hotNews = hotRecommender.getDailyHot();
// 合并结果并去重
return mergeRecommendations(contentBased, cfBased, hotNews);
}
3.3 接口设计与安全控制
RESTful API设计遵循以下规范：
- GET /api/news - 获取新闻列表
- POST /api/behavior - 提交用户行为
- GET /api/recommendations - 获取推荐结果
使用Spring Security实现JWT认证：
java复制@Configuration
@EnableWebSecurity
public class SecurityConfig extends WebSecurityConfigurerAdapter {
@Override
protected void configure(HttpSecurity http) throws Exception {
http.csrf().disable()
.authorizeRequests()
.antMatchers("/api/auth/**").permitAll()
.anyRequest().authenticated()
.and()
.addFilter(new JwtAuthenticationFilter(authenticationManager()))
.sessionManagement().sessionCreationPolicy(SessionCreationPolicy.STATELESS);
}
}
4. 前端Vue3实现
4.1 项目结构与组件设计
前端采用模块化结构：
code复制src/
├── assets/
├── components/
│ ├── NewsCard.vue
│ ├── RecommendList.vue
│ └── UserProfile.vue
├── composables/ # 组合式函数
├── router/
├── stores/ # Pinia状态管理
└── views/
使用Pinia替代Vuex进行状态管理更加简洁：
typescript复制// stores/user.ts
export const useUserStore = defineStore('user', {
state: () => ({
token: null as string | null,
profile: null as UserProfile | null
}),
actions: {
async login(credentials: LoginForm) {
const { data } = await api.post('/auth/login', credentials)
this.token = data.token
this.profile = data.user
}
}
})
4.2 推荐列表渲染优化
新闻列表采用虚拟滚动技术处理大量数据：
vue复制<template>
<RecycleScroller
class="scroller"
:items="newsList"
:item-size="120"
key-field="id"
v-slot="{ item }"
>
<NewsCard :news="item" />
</RecycleScroller>
</template>
4.3 用户行为采集
前端需要实时采集以下行为数据：
- 浏览时长（通过IntersectionObserver API）
- 点击/点赞/收藏
- 滚动深度
示例代码：
typescript复制const trackView = (newsId: string) => {
const observer = new IntersectionObserver((entries) => {
if(entries[0].isIntersecting) {
const startTime = Date.now()
onUnmounted(() => {
const duration = Date.now() - startTime
api.post('/behavior', {
newsId,
type: 'VIEW',
duration
})
})
}
})
observer.observe(document.getElementById(`news-${newsId}`)!)
}
5. 系统部署与性能优化
5.1 生产环境部署
推荐使用Docker Compose编排服务：
yaml复制version: '3'
services:
db:
image: mysql:8.0
environment:
MYSQL_ROOT_PASSWORD: rootpass
MYSQL_DATABASE: news_recommend
volumes:
- mysql_data:/var/lib/mysql
backend:
build: ./backend
ports:
- "8080:8080"
depends_on:
- db
frontend:
build: ./frontend
ports:
- "3000:3000"
5.2 缓存策略优化
使用Redis缓存热门推荐结果：
java复制@Cacheable(value = "hotNews", key = "'daily'")
public List<News> getDailyHotNews() {
return baseMapper.selectList(
new QueryWrapper<News>()
.orderByDesc("view_count")
.last("LIMIT 100")
);
}
5.3 MySQL性能调优
针对推荐系统的查询特点优化MySQL：
sql复制-- 用户行为表添加复合索引
ALTER TABLE user_behavior ADD INDEX idx_user_news (user_id, news_id, behavior_type);
-- 使用窗口函数优化推荐计算
SELECT
news_id,
COUNT(*) OVER (PARTITION BY news_id) AS popularity
FROM user_behavior
WHERE behavior_type = 'LIKE'
GROUP BY news_id
ORDER BY popularity DESC
LIMIT 100;
6. 常见问题排查
6.1 MyBatis-Plus常见问题
问题1：Lombok注解不生效，编译报错"you aren't using a compiler supported by lombok"
- 解决方案：确保IDE安装了Lombok插件，并在设置中启用注解处理
问题2：MyBatis-Plus分页失效
- 需要配置分页拦截器：
java复制@Configuration
public class MyBatisPlusConfig {
@Bean
public MybatisPlusInterceptor mybatisPlusInterceptor() {
MybatisPlusInterceptor interceptor = new MybatisPlusInterceptor();
interceptor.addInnerInterceptor(new PaginationInnerInterceptor());
return interceptor;
}
}
6.2 Vue3与SpringBoot跨域问题
开发环境下配置代理：
javascript复制// vite.config.js
export default defineConfig({
server: {
proxy: {
'/api': {
target: 'http://localhost:8080',
changeOrigin: true
}
}
}
})
生产环境建议通过Nginx统一转发：
nginx复制location /api {
proxy_pass http://backend:8080;
proxy_set_header Host $host;
}
6.3 MySQL8.0连接问题
问题：客户端无法连接，报"caching_sha2_password"错误
- 解决方案：
sql复制ALTER USER 'username'@'%' IDENTIFIED WITH mysql_native_password BY 'password';
FLUSH PRIVILEGES;
7. 项目扩展方向
在实际开发中，我发现这个基础架构可以进一步扩展：
- 实时推荐：集成WebSocket实现新新闻实时推送
java复制@GetMapping("/recommend/stream")
public Flux<News> streamRecommendations(@AuthenticationPrincipal User user) {
return recommendService.getRealTimeRecommendations(user.getId());
}
-
多维度分析：使用Elasticsearch实现新闻全文搜索和复杂分析
-
AB测试框架：为推荐算法添加AB测试能力
java复制public interface RecommendationStrategy {
List<News> recommend(Long userId);
default String getStrategyName() {
return this.getClass().getSimpleName();
}
}
- 微服务改造：将推荐算法、用户服务等拆分为独立服务
这个项目完整展示了现代Java Web开发的典型技术栈组合，从我的实践经验来看，SpringBoot2+Vue3的组合特别适合需要快速开发又要求较高性能的场景。特别是在处理推荐系统这种数据密集型应用时，MyBatis-Plus和MySQL8.0的高级特性可以大幅提升开发效率。