Spring Boot+Vue新闻发布系统架构设计与实现-代码聚汇网

Spring Boot+Vue新闻发布系统架构设计与实现

麻纪

1. 新闻发布信息收集系统架构设计

新闻发布信息收集系统采用前后端分离架构，这种架构模式在当前Web开发中已成为主流选择。后端基于Spring Boot框架提供RESTful API服务，前端使用Vue.js构建响应式用户界面。这种架构设计的优势在于：

前后端职责分离，开发团队可以并行工作
前端可以独立部署，不依赖后端环境
后端API可以被多种客户端复用（Web、移动端等）
技术栈选择灵活，可以根据需求独立升级

数据库选用MySQL作为主存储，主要考虑其成熟稳定、社区支持完善，且能满足新闻系统的数据存储需求。Redis作为缓存层，用于存储热点新闻数据，减轻数据库压力。系统主要分为四大核心模块：

用户管理模块：处理用户注册、登录、权限控制等
新闻发布模块：支持新闻的创建、编辑、发布流程
信息采集模块：从外部来源自动采集新闻内容
数据分析模块：统计新闻阅读量、用户行为等数据

提示：在实际项目中，建议采用模块化开发方式，每个模块可以独立打包部署，便于后期维护和扩展。

2. 后端技术实现详解

2.1 Spring Boot基础框架搭建

Spring Boot作为后端框架的选择，主要基于其快速开发能力和丰富的生态系统。项目初始化可以通过Spring Initializr完成，核心依赖包括：

spring-boot-starter-web：提供Web MVC支持
spring-boot-starter-security：安全认证基础
mybatis-plus-boot-starter：简化数据库操作
spring-boot-starter-data-redis：Redis集成

基础项目结构建议如下：

code复制src/
├── main/
│   ├── java/
│   │   └── com/
│   │       └── example/
│   │           ├── config/       # 配置类
│   │           ├── controller/   # 控制器
│   │           ├── service/      # 服务层
│   │           ├── mapper/       # MyBatis映射
│   │           ├── entity/       # 实体类
│   │           └── Application.java
│   └── resources/
│       ├── application.yml       # 应用配置
│       └── mapper/               # XML映射文件

2.2 安全认证实现

系统采用JWT(JSON Web Token)进行认证，结合Spring Security实现权限控制。核心配置如下：

java复制@Configuration
@EnableWebSecurity
public class SecurityConfig {
    
    @Bean
    public SecurityFilterChain securityFilterChain(HttpSecurity http) throws Exception {
        http
            .csrf().disable()
            .authorizeRequests()
                .antMatchers("/api/auth/**").permitAll()
                .antMatchers("/api/news/**").hasAnyRole("EDITOR","ADMIN")
                .anyRequest().authenticated()
            .and()
            .addFilter(new JwtAuthenticationFilter(authenticationManager()))
            .addFilter(new JwtAuthorizationFilter(authenticationManager()))
            .sessionManagement()
                .sessionCreationPolicy(SessionCreationPolicy.STATELESS);
        return http.build();
    }
}

JWT令牌生成示例：

java复制public String generateToken(UserDetails userDetails) {
    Map<String, Object> claims = new HashMap<>();
    claims.put("roles", userDetails.getAuthorities().stream()
            .map(GrantedAuthority::getAuthority)
            .collect(Collectors.toList()));
    
    return Jwts.builder()
            .setClaims(claims)
            .setSubject(userDetails.getUsername())
            .setIssuedAt(new Date())
            .setExpiration(new Date(System.currentTimeMillis() + JWT_EXPIRATION))
            .signWith(SignatureAlgorithm.HS512, JWT_SECRET)
            .compact();
}

2.3 新闻发布模块实现

新闻发布模块支持富文本编辑，后端需要处理HTML内容的安全过滤。我们使用MyBatis-Plus简化数据库操作，并集成WangEditor作为富文本编辑器。

实体类设计示例：

java复制@Data
@TableName("news")
public class News {
    @TableId(type = IdType.AUTO)
    private Long id;
    private String title;
    private String content;
    private Long authorId;
    private Integer status; // 0-草稿 1-已发布
    private Date publishTime;
    private Integer viewCount;
    @TableField(exist = false)
    private List<String> tags;
}

服务层实现关键逻辑：

java复制@Service
public class NewsService {
    
    @Autowired
    private NewsMapper newsMapper;
    
    @Transactional
    public Result publishNews(NewsDTO dto) {
        // XSS过滤
        String safeContent = HtmlUtils.htmlEscape(dto.getContent());
        
        News news = new News();
        BeanUtils.copyProperties(dto, news);
        news.setContent(safeContent);
        news.setStatus(1);
        news.setPublishTime(new Date());
        
        int affected = newsMapper.insert(news);
        if (affected > 0) {
            // 清除缓存
            redisTemplate.delete("hot_news");
            return Result.success("发布成功");
        }
        return Result.error("发布失败");
    }
}

2.4 定时任务与爬虫集成

系统需要定时从外部新闻源采集内容，使用Spring Scheduler实现定时任务：

java复制@Component
public class NewsCrawlerTask {
    
    @Scheduled(cron = "0 0 */2 * * ?") // 每2小时执行一次
    public void crawlHotNews() {
        // 使用Jsoup抓取新闻
        Document doc = Jsoup.connect("https://news.example.com/hot")
                           .timeout(5000)
                           .get();
        
        Elements newsItems = doc.select(".news-item");
        newsItems.forEach(item -> {
            String title = item.select(".title").text();
            String content = item.select(".content").html();
            
            // 保存到数据库
            News news = new News();
            news.setTitle(title);
            news.setContent(content);
            news.setStatus(1);
            news.setPublishTime(new Date());
            newsMapper.insert(news);
        });
    }
}

3. 前端技术实现详解

3.1 Vue 3项目初始化

使用Vite快速初始化Vue 3项目：

bash复制npm create vite@latest news-system --template vue
cd news-system
npm install

核心依赖安装：

bash复制npm install axios vue-router pinia element-plus echarts vue-echarts socket.io-client

项目目录结构建议：

code复制src/
├── api/            # API请求封装
├── assets/         # 静态资源
├── components/     # 公共组件
├── composables/    # 组合式函数
├── router/         # 路由配置
├── stores/         # Pinia状态管理
├── utils/          # 工具函数
├── views/          # 页面组件
├── App.vue         # 根组件
└── main.js         # 入口文件

3.2 路由与权限控制

实现动态路由和权限控制：

javascript复制// router/index.js
const routes = [
  {
    path: '/login',
    component: () => import('@/views/Login.vue'),
    meta: { requiresAuth: false }
  },
  {
    path: '/',
    component: () => import('@/layouts/MainLayout.vue'),
    meta: { requiresAuth: true },
    children: [
      {
        path: 'news',
        component: () => import('@/views/news/List.vue'),
        meta: { roles: ['EDITOR', 'ADMIN'] }
      }
    ]
  }
]

router.beforeEach(async (to, from, next) => {
  const authStore = useAuthStore()
  
  if (to.meta.requiresAuth && !authStore.isAuthenticated) {
    next('/login')
  } else if (to.meta.roles && !authStore.hasRole(to.meta.roles)) {
    next('/403') // 无权限页面
  } else {
    next()
  }
})

3.3 新闻列表与详情页实现

使用Element Plus构建新闻列表：

vue复制<template>
  <div class="news-container">
    <el-table :data="newsList" v-loading="loading">
      <el-table-column prop="title" label="标题" width="180" />
      <el-table-column prop="author" label="作者" width="120" />
      <el-table-column prop="publishTime" label="发布时间" width="180">
        <template #default="{row}">
          {{ formatDate(row.publishTime) }}
        </template>
      </el-table-column>
      <el-table-column label="操作" width="120">
        <template #default="{row}">
          <el-button @click="viewDetail(row.id)" type="text">查看</el-button>
        </template>
      </el-table-column>
    </el-table>
    
    <el-pagination
      v-model:currentPage="pagination.current"
      :page-size="pagination.size"
      :total="pagination.total"
      @current-change="fetchNews"
    />
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { getNewsList } from '@/api/news'

const router = useRouter()
const loading = ref(false)
const newsList = ref([])
const pagination = ref({
  current: 1,
  size: 10,
  total: 0
})

const fetchNews = async () => {
  loading.value = true
  try {
    const res = await getNewsList({
      page: pagination.value.current,
      size: pagination.value.size
    })
    newsList.value = res.data.list
    pagination.value.total = res.data.total
  } finally {
    loading.value = false
  }
}

const viewDetail = (id) => {
  router.push(`/news/${id}`)
}

onMounted(fetchNews)
</script>

3.4 富文本编辑器集成

集成WangEditor作为富文本编辑器：

vue复制<template>
  <div class="editor-container">
    <div ref="editorRef" style="border: 1px solid #ccc"></div>
    <el-button @click="submitContent" type="primary">提交</el-button>
  </div>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue'
import WangEditor from 'wangeditor'

const editorRef = ref(null)
let editor = null

onMounted(() => {
  editor = new WangEditor(editorRef.value)
  editor.config.uploadImgServer = '/api/upload'
  editor.config.uploadFileName = 'file'
  editor.create()
})

onBeforeUnmount(() => {
  editor?.destroy()
})

const submitContent = () => {
  const content = editor.getHtml()
  // 提交到后端
}
</script>

4. 系统关键技术点实现

4.1 文件上传与存储方案

系统需要处理新闻中的图片和附件上传，采用MinIO作为对象存储服务：

MinIO服务端配置：

yaml复制# application.yml
minio:
  endpoint: http://minio:9000
  accessKey: minioadmin
  secretKey: minioadmin
  bucket: news-attachments

文件上传服务实现：

java复制@Service
public class FileStorageService {
    
    @Autowired
    private MinioClient minioClient;
    
    @Value("${minio.bucket}")
    private String bucketName;
    
    public String uploadFile(MultipartFile file) {
        try {
            String objectName = UUID.randomUUID() + 
                file.getOriginalFilename().substring(
                    file.getOriginalFilename().lastIndexOf(".")
                );
            
            minioClient.putObject(
                PutObjectArgs.builder()
                    .bucket(bucketName)
                    .object(objectName)
                    .stream(file.getInputStream(), file.getSize(), -1)
                    .contentType(file.getContentType())
                    .build()
            );
            
            return objectName;
        } catch (Exception e) {
            throw new RuntimeException("文件上传失败", e);
        }
    }
}

前端直传优化：

javascript复制// 获取预签名URL
const getPresignedUrl = async (fileName) => {
  const res = await axios.get('/api/upload/presigned', {
    params: { fileName }
  })
  return res.data.url
}

// 直接上传到MinIO
const uploadToMinio = async (file) => {
  const presignedUrl = await getPresignedUrl(file.name)
  await axios.put(presignedUrl, file, {
    headers: {
      'Content-Type': file.type
    }
  })
  return presignedUrl.split('?')[0]
}

4.2 实时消息推送实现

使用WebSocket实现新闻更新实时通知：

Spring Boot WebSocket配置：

java复制@Configuration
@EnableWebSocketMessageBroker
public class WebSocketConfig implements WebSocketMessageBrokerConfigurer {
    
    @Override
    public void configureMessageBroker(MessageBrokerRegistry config) {
        config.enableSimpleBroker("/topic");
        config.setApplicationDestinationPrefixes("/app");
    }
    
    @Override
    public void registerStompEndpoints(StompEndpointRegistry registry) {
        registry.addEndpoint("/ws")
                .setAllowedOrigins("*")
                .withSockJS();
    }
}

新闻更新通知服务：

java复制@Controller
public class NewsNotificationController {
    
    @Autowired
    private SimpMessagingTemplate messagingTemplate;
    
    @MessageMapping("/news/update")
    public void handleNewsUpdate(NewsUpdateMessage message) {
        // 处理消息并广播
        messagingTemplate.convertAndSend("/topic/news", message);
    }
}

前端WebSocket连接：

javascript复制import { Client } from '@stomp/stompjs'

const useWebSocket = () => {
  const client = new Client({
    brokerURL: 'ws://localhost:8080/ws',
    reconnectDelay: 5000,
    heartbeatIncoming: 4000,
    heartbeatOutgoing: 4000
  })
  
  const connect = (onMessage) => {
    client.onConnect = () => {
      client.subscribe('/topic/news', (message) => {
        onMessage(JSON.parse(message.body))
      })
    }
    client.activate()
  }
  
  return { connect }
}

4.3 全文检索功能实现

集成Elasticsearch提供新闻全文检索：

Elasticsearch实体映射：

java复制@Document(indexName = "news")
public class NewsDocument {
    @Id
    private String id;
    private Long newsId;
    @Field(type = FieldType.Text, analyzer = "ik_max_word")
    private String title;
    @Field(type = FieldType.Text, analyzer = "ik_max_word")
    private String content;
    private Date publishTime;
    // getters/setters
}

搜索服务实现：

java复制@Service
public class NewsSearchService {
    
    @Autowired
    private ElasticsearchOperations elasticsearchOperations;
    
    public List<NewsDocument> search(String keyword, int page, int size) {
        NativeSearchQuery query = new NativeSearchQueryBuilder()
            .withQuery(QueryBuilders.multiMatchQuery(keyword, "title", "content"))
            .withPageable(PageRequest.of(page, size))
            .withHighlightFields(
                new HighlightBuilder.Field("title"),
                new HighlightBuilder.Field("content")
            )
            .build();
        
        SearchHits<NewsDocument> hits = elasticsearchOperations.search(query, NewsDocument.class);
        return hits.getSearchHits().stream()
            .map(hit -> {
                NewsDocument doc = hit.getContent();
                // 处理高亮
                Map<String, List<String>> highlight = hit.getHighlightFields();
                if (highlight.containsKey("title")) {
                    doc.setTitle(highlight.get("title").get(0));
                }
                if (highlight.containsKey("content")) {
                    doc.setContent(highlight.get("content").get(0));
                }
                return doc;
            })
            .collect(Collectors.toList());
    }
}

前端搜索界面：

vue复制<template>
  <div class="search-container">
    <el-input 
      v-model="keyword" 
      placeholder="输入关键词搜索新闻"
      @keyup.enter="searchNews"
    >
      <template #append>
        <el-button @click="searchNews">
          <el-icon><search /></el-icon>
        </el-button>
      </template>
    </el-input>
    
    <div class="search-results">
      <el-card v-for="item in results" :key="item.id">
        <div v-html="item.title"></div>
        <div v-html="item.content" class="content-preview"></div>
      </el-card>
      
      <el-pagination
        v-model:currentPage="pagination.current"
        :page-size="pagination.size"
        :total="pagination.total"
        @current-change="searchNews"
      />
    </div>
  </div>
</template>

5. 系统性能优化策略

5.1 后端性能优化

启用Gzip压缩减少网络传输：

yaml复制# application.yml
server:
  compression:
    enabled: true
    mime-types: text/html,text/xml,text/plain,text/css,text/javascript,application/javascript,application/json
    min-response-size: 1024

多级缓存策略实现：

java复制@Service
@CacheConfig(cacheNames = "news")
public class NewsService {
    
    @Cacheable(key = "'hot_' + #page + '_' + #size")
    public List<News> getHotNews(int page, int size) {
        // 数据库查询
    }
    
    @CachePut(key = "'hot_' + #page + '_' + #size")
    public List<News> updateHotNewsCache(int page, int size) {
        return getHotNews(page, size);
    }
}

数据库读写分离配置：

yaml复制spring:
  datasource:
    master:
      url: jdbc:mysql://master:3306/news
      username: root
      password: password
    slave:
      url: jdbc:mysql://slave:3306/news
      username: root
      password: password

5.2 前端性能优化

路由懒加载：

javascript复制const routes = [
  {
    path: '/news/:id',
    component: () => import('@/views/news/Detail.vue')
  }
]

组件异步加载：

vue复制<script setup>
import { defineAsyncComponent } from 'vue'

const AsyncEditor = defineAsyncComponent(() =>
  import('@/components/Editor.vue')
)
</script>

<template>
  <AsyncEditor />
</template>

图片懒加载：

vue复制<template>
  <img v-lazy="imageUrl" alt="新闻图片">
</template>

<script setup>
import { useLazyLoad } from '@/composables/lazyLoad'

useLazyLoad()
</script>

5.3 数据库优化

索引优化：

sql复制CREATE INDEX idx_news_publish ON news(publish_time, status);
CREATE FULLTEXT INDEX ft_news_content ON news(title, content);

分表策略：

java复制@TableName(value = "news_#{#date.format('yyyyMM')}")
public class News {
    // ...
}

查询优化示例：

java复制@Select("SELECT id, title FROM news WHERE status = 1 ORDER BY publish_time DESC LIMIT #{limit}")
List<News> findLatestNews(@Param("limit") int limit);

6. 系统安全防护措施

6.1 XSS防护

后端过滤：

java复制public String filterXss(String content) {
    if (StringUtils.isEmpty(content)) {
        return content;
    }
    return HtmlUtils.htmlEscape(content);
}

前端净化：

javascript复制import DOMPurify from 'dompurify'

const clean = DOMPurify.sanitize(dirtyHtml, {
  ALLOWED_TAGS: ['p', 'b', 'i', 'u', 'strong', 'em', 'br', 'img'],
  ALLOWED_ATTR: ['src', 'alt', 'title']
})

6.2 CSRF防护

Spring Security配置：

java复制@Override
protected void configure(HttpSecurity http) throws Exception {
    http
        .csrf()
            .csrfTokenRepository(CookieCsrfTokenRepository.withHttpOnlyFalse())
            .and()
        // ...
}

前端集成：

javascript复制// axios拦截器
axios.interceptors.request.use(config => {
  const token = getCookie('XSRF-TOKEN')
  if (token) {
    config.headers['X-XSRF-TOKEN'] = token
  }
  return config
})

6.3 SQL注入防护

使用MyBatis参数绑定：

xml复制<select id="searchNews" resultType="News">
    SELECT * FROM news 
    WHERE title LIKE CONCAT('%', #{keyword}, '%')
    AND status = #{status}
</select>

避免直接拼接SQL：

java复制// 错误示例
String sql = "SELECT * FROM news WHERE title LIKE '%" + keyword + "%'";
// 正确做法
String sql = "SELECT * FROM news WHERE title LIKE CONCAT('%', ?, '%')";

7. 系统部署方案

7.1 后端部署

Dockerfile示例：

dockerfile复制FROM openjdk:17-jdk-slim
WORKDIR /app
COPY target/news-system.jar app.jar
EXPOSE 8080
ENTRYPOINT ["java", "-jar", "app.jar"]

Docker Compose编排：

yaml复制version: '3'
services:
  app:
    build: .
    ports:
      - "8080:8080"
    environment:
      - SPRING_PROFILES_ACTIVE=prod
    depends_on:
      - mysql
      - redis
      - minio
  
  mysql:
    image: mysql:8.0
    environment:
      MYSQL_ROOT_PASSWORD: password
      MYSQL_DATABASE: news
    volumes:
      - mysql_data:/var/lib/mysql
  
  redis:
    image: redis:6
    ports:
      - "6379:6379"
  
  minio:
    image: minio/minio
    ports:
      - "9000:9000"
    environment:
      MINIO_ROOT_USER: minioadmin
      MINIO_ROOT_PASSWORD: minioadmin
    volumes:
      - minio_data:/data
    command: server /data

volumes:
  mysql_data:
  minio_data:

7.2 前端部署

Nginx配置示例：

nginx复制server {
    listen 80;
    server_name news.example.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;
    }
    
    location /ws {
        proxy_pass http://backend:8080;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "Upgrade";
    }
}

前端Dockerfile：

dockerfile复制FROM nginx:alpine
COPY dist /usr/share/nginx/html
COPY nginx.conf /etc/nginx/conf.d/default.conf
EXPOSE 80

8. 开发经验与注意事项

8.1 后端开发经验

事务管理要点：

java复制@Service
public class NewsService {
    
    @Transactional(rollbackFor = Exception.class)
    public void publishNews(NewsDTO dto) {
        // 1. 保存新闻
        newsMapper.insert(news);
        
        // 2. 更新统计
        statsMapper.incrementCount();
        
        // 3. 发送通知
        notificationService.sendNewsPublished(dto.getAuthorId());
    }
}

日志记录最佳实践：

java复制@Aspect
@Component
@Slf4j
public class LoggingAspect {
    
    @Around("execution(* com.example..*.*(..))")
    public Object logMethodExecution(ProceedingJoinPoint joinPoint) throws Throwable {
        String methodName = joinPoint.getSignature().getName();
        Object[] args = joinPoint.getArgs();
        
        log.info("Entering method: {} with args: {}", methodName, args);
        try {
            Object result = joinPoint.proceed();
            log.info("Exiting method: {} with result: {}", methodName, result);
            return result;
        } catch (Exception e) {
            log.error("Exception in method: {}", methodName, e);
            throw e;
        }
    }
}

8.2 前端开发经验

状态管理优化：

javascript复制// stores/news.js
export const useNewsStore = defineStore('news', {
  state: () => ({
    newsList: [],
    currentNews: null
  }),
  actions: {
    async fetchNewsList(params) {
      const res = await getNewsList(params)
      this.newsList = res.data
      return res
    }
  },
  getters: {
    hotNews: (state) => state.newsList.slice(0, 5)
  }
})

组件设计原则：

vue复制<template>
  <div class="news-card">
    <slot name="header" :title="news.title">
      <h3>{{ news.title }}</h3>
    </slot>
    
    <div class="content">
      <slot :content="news.content">
        <p>{{ truncate(news.content, 100) }}</p>
      </slot>
    </div>
    
    <slot name="footer" :date="news.publishTime">
      <div class="footer">
        {{ formatDate(news.publishTime) }}
      </div>
    </slot>
  </div>
</template>

<script setup>
defineProps({
  news: {
    type: Object,
    required: true
  }
})

const truncate = (text, length) => {
  return text.length > length ? text.substring(0, length) + '...' : text
}
</script>

8.3 常见问题排查

跨域问题解决方案：

java复制@Configuration
public class CorsConfig implements WebMvcConfigurer {
    
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
            .allowedOrigins("*")
            .allowedMethods("GET", "POST", "PUT", "DELETE")
            .allowedHeaders("*")
            .exposedHeaders("Authorization")
            .maxAge(3600);
    }
}

性能问题诊断：

使用Arthas诊断Java应用：

bash复制# 启动Arthas
java -jar arthas-boot.jar

# 监控方法调用
watch com.example.service.NewsService getHotNews '{params, returnObj}' -x 3

前端性能分析：

javascript复制// 使用Performance API
const measurePageLoad = () => {
  window.addEventListener('load', () => {
    const timing = performance.timing
    const loadTime = timing.loadEventEnd - timing.navigationStart
    console.log(`页面加载耗时: ${loadTime}ms`)
  })
}

数据库连接池优化：

yaml复制spring:
  datasource:
    hikari:
      maximum-pool-size: 20
      minimum-idle: 5
      idle-timeout: 30000
      max-lifetime: 1800000
      connection-timeout: 30000

9. 项目扩展方向

9.1 微服务化改造

服务拆分方案：

用户服务：处理认证授权、用户信息
新闻服务：核心新闻业务逻辑
搜索服务：Elasticsearch集成
文件服务：处理上传下载

Spring Cloud集成：

yaml复制# 添加依赖
spring-cloud-starter-netflix-eureka-client
spring-cloud-starter-openfeign
spring-cloud-starter-gateway

9.2 多终端适配

响应式设计改进：

css复制/* 移动端适配 */
@media (max-width: 768px) {
  .news-container {
    padding: 0 10px;
  }
  
  .news-card {
    width: 100%;
  }
}

PWA支持：

javascript复制// vite.config.js
import { VitePWA } from 'vite-plugin-pwa'

export default defineConfig({
  plugins: [
    VitePWA({
      registerType: 'autoUpdate',
      manifest: {
        name: '新闻发布系统',
        short_name: 'NewsApp',
        theme_color: '#ffffff'
      }
    })
  ]
})

9.3 数据分析增强

用户行为分析：

javascript复制// 前端埋点
const trackEvent = (eventName, payload) => {
  if (typeof gtag !== 'undefined') {
    gtag('event', eventName, payload)
  }
}

// 新闻点击跟踪
const handleNewsClick = (newsId) => {
  trackEvent('news_click', { news_id: newsId })
  router.push(`/news/${newsId}`)
}

后端日志分析：

java复制@Aspect
@Component
@RequiredArgsConstructor
public class UserBehaviorAspect {
    
    private final UserBehaviorService behaviorService;
    
    @AfterReturning(
        pointcut = "execution(* com.example.controller.NewsController.viewNews(..))",
        returning = "result"
    )
    public void trackNewsView(JoinPoint joinPoint, Object result) {
        Long newsId = (Long) joinPoint.getArgs()[0];
        Long userId = SecurityUtils.getCurrentUserId();
        
        behaviorService.recordView(userId, newsId);
    }
}

10. 项目总结与反思

在开发新闻发布信息收集系统的过程中，积累了一些有价值的经验：

技术选型方面：

Spring Boot和Vue的组合确实能大幅提升开发效率
对于富文本编辑，WangEditor比Quill更适合中文场景
MyBatis-Plus的ActiveRecord模式简化了大量CRUD代码

架构设计方面：

前后端分离架构确实带来了灵活性，但也增加了联调成本
过早引入Redis缓存反而增加了系统复杂度，应该按需引入
模块划分可以更细粒度，特别是用户权限相关功能

性能优化方面：

Nginx的Gzip压缩对前端资源优化效果显著
数据库索引的优化比应用层优化更有效
前端懒加载对首屏性能提升明显

团队协作方面：

接口文档应该更早确定并严格维护
前端Mock数据可以更早介入开发
代码风格检查工具(如Checkstyle、ESLint)应该从项目开始就配置好

遇到的典型问题：

富文本XSS防护需要前后端协同处理
WebSocket在负载均衡环境下需要特殊配置
Elasticsearch中文分词需要额外配置IK分析器

值得改进的点：

测试覆盖率不足，特别是集成测试
部署流程可以更自动化
监控告警系统需要完善

这个项目从技术实现角度已经达到了预期目标，但在工程实践和团队协作方面还有提升空间。后续计划引入CI/CD流水线和更完善的监控系统，进一步提升项目的可维护性和稳定性。