Spring Boot+Vue全栈实战：构建自动化网站监控系统

最近在折腾一个个人项目时，遇到了一个非常典型的问题：想实现一个功能，但网上资料要么太零散，要么版本老旧跑不通，要么就是只讲理论不给完整代码。这种“从想法到落地”的鸿沟，相信很多开发者都深有体会。本文就将以一次完整的项目实践为例，手把手带你走通从零构建一个功能模块的全过程。无论你是想学习如何整合技术栈，还是希望获得一个可复用的项目模板，这篇文章都能为你提供清晰的路径和避坑指南。

1. 项目背景与核心目标

首先，我们来明确一下这个“东西”到底是什么。在开发者的日常中，我们常常会萌生一些想法，比如：“能不能做一个自动整理文档的工具？”、“有没有办法监控我感兴趣的数据并通知我？”。本次实践的项目，本质上就是一个集成了数据采集、处理、存储与可视化展示的自动化监控工具。

它的核心目标有三个：

1. 自动化采集：能够定时从指定的数据源（如公开API、网页）获取信息，无需人工干预。
2. 结构化处理：对采集到的原始、杂乱的数据进行清洗、转换，使其变成规整、可分析的结构化数据。
3. 直观展示：将处理后的数据通过一个简洁的Web界面展示出来，支持基本的查询和筛选。

这个项目麻雀虽小，但五脏俱全，涉及了后端调度、数据抓取、数据库操作、前端展示等多个常见开发环节，非常适合用来练手和巩固全栈技能。

2. 技术栈选型与环境准备

为了实现上述目标，我们需要选择一组轻量、高效且易于上手的技术。

2.1 技术栈说明

• 后端框架：Spring Boot。它提供了快速构建独立运行、生产级应用的能力，内嵌Tomcat，简化配置。
• 数据抓取：Jsoup + HttpClient。Jsoup擅长HTML解析，HttpClient用于处理HTTP请求，两者结合可以应对大多数网页数据抓取场景。对于纯JSON API，使用Spring Boot自带的RestTemplate或WebClient。
• 任务调度：Spring Scheduler。基于注解的定时任务，简单易用，满足周期性采集的需求。
• 数据存储：MySQL + MyBatis-Plus。MySQL是流行的关系型数据库，MyBatis-Plus极大地简化了单表CRUD操作。
• 前端展示：Vue 3 + Element Plus。Vue 3响应式开发体验好，Element Plus提供了丰富的UI组件，能快速搭建管理界面。
• 项目构建：Maven。

2.2 开发环境与版本

在开始编码前，请确保你的本地环境已就绪。以下版本为本文撰写时使用的稳定版本，你可以根据实际情况调整。

• 操作系统：Windows 10 / 11, macOS, 或 Linux (如 Ubuntu 20.04+)
• Java：JDK 11 或 JDK 17 (推荐17，LTS版本)
• IDE：IntelliJ IDEA (社区版或旗舰版) 或 VS Code
• 数据库：MySQL 8.0
• Node.js：16.x 或 18.x (用于运行前端)
• Maven：3.6+

环境检查命令： 打开终端或命令行，执行以下命令确认环境：

# 检查Java版本 java -version # 检查Maven版本 mvn -v # 检查Node.js和npm版本 node -v npm -v # 检查MySQL版本 (登录后) mysql --version

3. 后端工程搭建与核心模块拆解

我们首先从后端开始，这是整个项目的“大脑”。

3.1 创建Spring Boot项目

使用 Spring Initializr (https://start.spring.io/) 或 IDEA 内置的 Spring Initializr 创建项目。

依赖选择：

• Spring Web：构建Web应用，包含RESTful API支持。
• Spring Boot DevTools：开发热部署。
• Lombok：简化实体类代码。
• MyBatis Framework：数据库ORM框架。
• MySQL Driver：MySQL数据库连接驱动。

生成项目后，用IDE打开。核心的pom.xml依赖部分如下：

<dependencies> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-web</artifactId> </dependency> <dependency> <groupId>org.mybatis.spring.boot</groupId> <artifactId>mybatis-spring-boot-starter</artifactId> <version>2.3.0</version> </dependency> <dependency> <groupId>com.mysql</groupId> <artifactId>mysql-connector-j</artifactId> <scope>runtime</scope> </dependency> <dependency> <groupId>org.projectlombok</groupId> <artifactId>lombok</artifactId> <optional>true</optional> </dependency> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-test</artifactId> <scope>test</scope> </dependency> <!-- 数据抓取相关依赖 --> <dependency> <groupId>org.jsoup</groupId> <artifactId>jsoup</artifactId> <version>1.15.4</version> </dependency> <dependency> <groupId>org.apache.httpcomponents.client5</groupId> <artifactId>httpclient5</artifactId> <version>5.2.1</version> </dependency> </dependencies>

3.2 数据库设计与实体类

假设我们要监控一些网站的更新状态（如博客、新闻站）。设计一张简单的表：

-- 在MySQL中执行 CREATE DATABASE IF NOT EXISTS `monitor_db` DEFAULT CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci; USE `monitor_db`; CREATE TABLE `website_info` ( `id` int NOT NULL AUTO_INCREMENT, `site_name` varchar(100) NOT NULL COMMENT '网站名称', `site_url` varchar(500) NOT NULL COMMENT '网站地址', `selector` varchar(200) DEFAULT NULL COMMENT '用于抓取内容的CSS选择器', `last_check_time` datetime DEFAULT NULL COMMENT '最后检查时间', `last_content` text COMMENT '上次抓取到的内容（或摘要）', `status` tinyint DEFAULT '1' COMMENT '状态：1-正常监控，0-暂停', `created_at` datetime DEFAULT CURRENT_TIMESTAMP, `updated_at` datetime DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP, PRIMARY KEY (`id`), KEY `idx_status` (`status`) ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci COMMENT='监控网站信息表';

在Java中创建对应的实体类：

// 文件路径：src/main/java/com/example/monitor/entity/WebsiteInfo.java package com.example.monitor.entity; import com.baomidou.mybatisplus.annotation.IdType; import com.baomidou.mybatisplus.annotation.TableId; import com.baomidou.mybatisplus.annotation.TableName; import lombok.Data; import java.time.LocalDateTime; @Data @TableName("website_info") public class WebsiteInfo { @TableId(type = IdType.AUTO) private Integer id; private String siteName; private String siteUrl; private String selector; private LocalDateTime lastCheckTime; private String lastContent; private Integer status; // 1-正常，0-暂停 private LocalDateTime createdAt; private LocalDateTime updatedAt; }

3.3 数据抓取服务实现

这是项目的核心逻辑。我们创建一个DataFetchService，它需要完成：

1. 从数据库读取需要监控的网站列表。
2. 遍历列表，访问每个网站并抓取内容。
3. 解析内容（使用Jsoup根据CSS选择器）。
4. 将抓取结果与上次结果对比，判断是否有更新。
5. 更新数据库记录。

// 文件路径：src/main/java/com/example/monitor/service/impl/DataFetchServiceImpl.java package com.example.monitor.service.impl; import com.example.monitor.entity.WebsiteInfo; import com.example.monitor.mapper.WebsiteInfoMapper; import com.example.monitor.service.DataFetchService; import lombok.extern.slf4j.Slf4j; import org.jsoup.Jsoup; import org.jsoup.nodes.Document; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.scheduling.annotation.Async; import org.springframework.stereotype.Service; import org.springframework.util.StringUtils; import java.io.IOException; import java.time.LocalDateTime; import java.util.List; @Service @Slf4j public class DataFetchServiceImpl implements DataFetchService { @Autowired private WebsiteInfoMapper websiteInfoMapper; /** * 执行一次全量抓取任务 */ @Override @Async("taskExecutor") // 异步执行，避免阻塞主线程 public void fetchAllWebsites() { List<WebsiteInfo> siteList = websiteInfoMapper.selectList(null); log.info("开始抓取任务，共 {} 个网站待检查", siteList.size()); for (WebsiteInfo site : siteList) { if (site.getStatus() != 1) { log.debug("网站 [{}] 状态非监控中，跳过", site.getSiteName()); continue; } try { fetchSingleWebsite(site); // 避免请求过于频繁，简单休眠一下 Thread.sleep(2000); } catch (Exception e) { log.error("抓取网站 [{}] 时发生异常: {}", site.getSiteUrl(), e.getMessage()); } } log.info("抓取任务执行完毕"); } /** * 抓取单个网站 */ private void fetchSingleWebsite(WebsiteInfo site) throws IOException { String url = site.getSiteUrl(); log.info("正在抓取: {}", url); // 使用Jsoup连接，设置超时和User-Agent模拟浏览器 Document doc = Jsoup.connect(url) .timeout(10000) // 10秒超时 .userAgent("Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36") .get(); String currentContent; if (StringUtils.hasText(site.getSelector())) { // 如果配置了选择器，则抓取特定元素的内容 currentContent = doc.select(site.getSelector()).text(); } else { // 否则抓取整个body的文本（可能很冗长） currentContent = doc.body().text(); } // 简单处理，只取前500字符作为摘要存储 String contentSummary = currentContent.length() > 500 ? currentContent.substring(0, 500) + "..." : currentContent; // 判断内容是否更新（这里用简单的字符串相等判断，实际可能需更复杂的差分算法） boolean isUpdated = !contentSummary.equals(site.getLastContent()); // 更新数据库 site.setLastContent(contentSummary); site.setLastCheckTime(LocalDateTime.now()); websiteInfoMapper.updateById(site); if (isUpdated) { log.warn("网站 [{}] 内容可能已更新！", site.getSiteName()); // 此处可以触发通知，如发送邮件、Webhook等 // notifyService.sendUpdateAlert(site); } else { log.debug("网站 [{}] 内容无变化", site.getSiteName()); } } }

3.4 定时任务配置

我们需要让抓取任务定时执行，比如每30分钟一次。

// 文件路径：src/main/java/com/example/monitor/scheduler/DataFetchScheduler.java package com.example.monitor.scheduler; import com.example.monitor.service.DataFetchService; import lombok.extern.slf4j.Slf4j; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.scheduling.annotation.EnableScheduling; import org.springframework.scheduling.annotation.Scheduled; import org.springframework.stereotype.Component; @Component @EnableScheduling @Slf4j public class DataFetchScheduler { @Autowired private DataFetchService dataFetchService; /** * 每30分钟执行一次 * cron表达式：秒 分 时 日 月 周 */ @Scheduled(cron = "0 */30 * * * ?") public void scheduledFetchTask() { log.info("定时抓取任务启动..."); dataFetchService.fetchAllWebsites(); } }

为了让@Async生效，还需要配置一个线程池：

// 文件路径：src/main/java/com/example/monitor/config/AsyncConfig.java package com.example.monitor.config; import org.springframework.context.annotation.Bean; import org.springframework.context.annotation.Configuration; import org.springframework.scheduling.annotation.EnableAsync; import org.springframework.scheduling.concurrent.ThreadPoolTaskExecutor; import java.util.concurrent.Executor; @Configuration @EnableAsync public class AsyncConfig { @Bean(name = "taskExecutor") public Executor taskExecutor() { ThreadPoolTaskExecutor executor = new ThreadPoolTaskExecutor(); executor.setCorePoolSize(5); // 核心线程数 executor.setMaxPoolSize(10); // 最大线程数 executor.setQueueCapacity(25); // 队列容量 executor.setThreadNamePrefix("Async-Fetch-"); // 线程名前缀 executor.initialize(); return executor; } }

3.5 提供RESTful API

为了前端能获取数据，我们需要提供几个简单的API。

// 文件路径：src/main/java/com/example/monitor/controller/WebsiteInfoController.java package com.example.monitor.controller; import com.example.monitor.entity.WebsiteInfo; import com.example.monitor.service.WebsiteInfoService; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.web.bind.annotation.*; import java.util.List; @RestController @RequestMapping("/api/website") public class WebsiteInfoController { @Autowired private WebsiteInfoService websiteInfoService; @GetMapping("/list") public List<WebsiteInfo> listAll() { return websiteInfoService.list(); } @PostMapping("/add") public boolean addWebsite(@RequestBody WebsiteInfo websiteInfo) { return websiteInfoService.save(websiteInfo); } @PostMapping("/update") public boolean updateWebsite(@RequestBody WebsiteInfo websiteInfo) { return websiteInfoService.updateById(websiteInfo); } @DeleteMapping("/delete/{id}") public boolean deleteWebsite(@PathVariable Integer id) { return websiteInfoService.removeById(id); } @PostMapping("/trigger-fetch") public String triggerManualFetch() { // 手动触发一次抓取 websiteInfoService.triggerFetch(); return "手动抓取任务已触发"; } }

4. 前端界面开发

后端API就绪后，我们用一个简单的前端界面来展示和管理监控的网站。

4.1 创建Vue项目并安装依赖

使用Vite快速创建Vue项目：

npm create vue@latest monitor-frontend # 按照提示选择：Vue, TypeScript, Router, Pinia 等（按需） cd monitor-frontend npm install element-plus axios npm install

4.2 主要页面组件

我们创建一个WebsiteMonitor.vue组件，包含表格展示、添加表单和操作按钮。

<!-- 文件路径：src/views/WebsiteMonitor.vue --> <template> <div class="website-monitor"> <el-card class="box-card"> <template #header> <div class="card-header"> <span>网站监控列表</span> <div> <el-button type="primary" @click="dialogVisible = true">添加网站</el-button> <el-button type="success" @click="triggerFetch">手动抓取</el-button> </div> </div> </template> <el-table :data="websiteList" style="width: 100%" v-loading="loading"> <el-table-column prop="id" label="ID" width="80" /> <el-table-column prop="siteName" label="网站名称" width="180" /> <el-table-column prop="siteUrl" label="网站地址"> <template #default="scope"> <el-link type="primary" :href="scope.row.siteUrl" target="_blank">{{ scope.row.siteUrl }}</el-link> </template> </el-table-column> <el-table-column prop="lastCheckTime" label="最后检查时间" width="180"> <template #default="scope"> {{ formatTime(scope.row.lastCheckTime) }} </template> </el-table-column> <el-table-column prop="lastContent" label="最新内容摘要" show-overflow-tooltip /> <el-table-column prop="status" label="状态" width="100"> <template #default="scope"> <el-tag :type="scope.row.status === 1 ? 'success' : 'info'"> {{ scope.row.status === 1 ? '监控中' : '已暂停' }} </el-tag> </template> </el-table-column> <el-table-column label="操作" width="180"> <template #default="scope"> <el-button size="small" @click="handleEdit(scope.row)">编辑</el-button> <el-button size="small" type="danger" @click="handleDelete(scope.row.id)">删除</el-button> </template> </el-table-column> </el-table> </el-card> <!-- 添加/编辑对话框 --> <el-dialog v-model="dialogVisible" :title="dialogTitle" width="500px"> <el-form :model="form" label-width="100px"> <el-form-item label="网站名称"> <el-input v-model="form.siteName" placeholder="请输入网站名称" /> </el-form-item> <el-form-item label="网站地址"> <el-input v-model="form.siteUrl" placeholder="请输入完整的URL，如 https://example.com" /> </el-form-item> <el-form-item label="内容选择器"> <el-input v-model="form.selector" placeholder="请输入CSS选择器，如 .article-content (可选)" /> <div class="form-tip">用于精确抓取页面特定区域的内容，留空则抓取整个页面文本。</div> </el-form-item> <el-form-item label="监控状态"> <el-switch v-model="form.status" :active-value="1" :inactive-value="0" /> </el-form-item> </el-form> <template #footer> <span class="dialog-footer"> <el-button @click="dialogVisible = false">取消</el-button> <el-button type="primary" @click="submitForm">确认</el-button> </span> </template> </el-dialog> </div> </template> <script setup lang="ts"> import { ref, onMounted } from 'vue' import { ElMessage, ElMessageBox } from 'element-plus' import axios from 'axios' // 定义接口 interface WebsiteInfo { id?: number siteName: string siteUrl: string selector: string status: number lastCheckTime?: string lastContent?: string } // 响应式数据 const websiteList = ref<WebsiteInfo[]>([]) const loading = ref(false) const dialogVisible = ref(false) const dialogTitle = ref('添加监控网站') const form = ref<WebsiteInfo>({ siteName: '', siteUrl: '', selector: '', status: 1 }) const isEditMode = ref(false) const currentEditId = ref<number | null>(null) // API基础URL，根据你的后端地址修改 const API_BASE = 'http://localhost:8080/api/website' // 生命周期钩子 onMounted(() => { fetchWebsiteList() }) // 方法定义 const fetchWebsiteList = async () => { loading.value = true try { const response = await axios.get(`${API_BASE}/list`) websiteList.value = response.data } catch (error) { ElMessage.error('获取网站列表失败') console.error(error) } finally { loading.value = false } } const triggerFetch = async () => { try { await axios.post(`${API_BASE}/trigger-fetch`) ElMessage.success('手动抓取任务已触发，请稍后刷新查看结果') // 2秒后自动刷新列表 setTimeout(() => { fetchWebsiteList() }, 2000) } catch (error) { ElMessage.error('触发抓取失败') } } const handleEdit = (row: WebsiteInfo) => { isEditMode.value = true currentEditId.value = row.id! form.value = { ...row } dialogTitle.value = '编辑网站信息' dialogVisible.value = true } const handleDelete = (id: number) => { ElMessageBox.confirm('确定要删除此监控网站吗？', '警告', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' }).then(async () => { try { await axios.delete(`${API_BASE}/delete/${id}`) ElMessage.success('删除成功') fetchWebsiteList() } catch (error) { ElMessage.error('删除失败') } }).catch(() => {}) } const submitForm = async () => { // 简单验证 if (!form.value.siteName || !form.value.siteUrl) { ElMessage.warning('请填写网站名称和地址') return } try { if (isEditMode.value) { // 更新 await axios.post(`${API_BASE}/update`, form.value) ElMessage.success('更新成功') } else { // 新增 await axios.post(`${API_BASE}/add`, form.value) ElMessage.success('添加成功') } dialogVisible.value = false resetForm() fetchWebsiteList() } catch (error) { ElMessage.error('操作失败') } } const resetForm = () => { form.value = { siteName: '', siteUrl: '', selector: '', status: 1 } isEditMode.value = false currentEditId.value = null dialogTitle.value = '添加监控网站' } const formatTime = (timeStr?: string) => { if (!timeStr) return '-' return new Date(timeStr).toLocaleString() } </script> <style scoped> .card-header { display: flex; justify-content: space-between; align-items: center; } .form-tip { font-size: 12px; color: #909399; margin-top: 5px; } </style>

4.3 配置路由与运行

在路由文件中添加这个页面，然后运行项目。

# 开发模式运行 npm run dev

访问http://localhost:5173(或Vite提示的地址) 即可看到管理界面。

5. 应用配置与联调

5.1 后端配置文件

确保application.yml或application.properties正确配置数据库和端口。

# src/main/resources/application.yml server: port: 8080 spring: datasource: url: jdbc:mysql://localhost:3306/monitor_db?useUnicode=true&characterEncoding=utf8&serverTimezone=Asia/Shanghai username: root password: your_password driver-class-name: com.mysql.cj.jdbc.Driver jackson: time-zone: Asia/Shanghai date-format: yyyy-MM-dd HH:mm:ss # MyBatis 配置 mybatis: mapper-locations: classpath:mapper/*.xml configuration: map-underscore-to-camel-case: true # 日志级别 logging: level: com.example.monitor: debug

5.2 解决跨域问题

由于前端运行在localhost:5173，后端在localhost:8080，存在跨域问题。在后端添加一个简单的配置类：

// 文件路径：src/main/java/com/example/monitor/config/WebConfig.java package com.example.monitor.config; import org.springframework.context.annotation.Configuration; import org.springframework.web.servlet.config.annotation.CorsRegistry; import org.springframework.web.servlet.config.annotation.WebMvcConfigurer; @Configuration public class WebConfig implements WebMvcConfigurer { @Override public void addCorsMappings(CorsRegistry registry) { registry.addMapping("/api/**") .allowedOrigins("http://localhost:5173") // 前端地址 .allowedMethods("GET", "POST", "PUT", "DELETE", "OPTIONS") .allowedHeaders("*") .allowCredentials(true); } }

5.3 启动与测试

1. 启动MySQL，确保monitor_db数据库和website_info表已创建。
2. 启动Spring Boot后端应用。
3. 启动Vue前端应用。
4. 打开浏览器，访问前端地址。
5. 在界面中添加一个测试网站（例如，一个博客地址），点击“手动抓取”测试功能。

6. 常见问题与排查思路

在开发和运行过程中，你可能会遇到以下问题：

7. 项目优化与扩展建议

一个基础版本完成后，可以考虑从以下几个方向进行优化和扩展，使其更健壮、更实用：

1. 增加用户认证与授权：使用 Spring Security 或 JWT 保护API，不同用户管理自己的监控列表。
2. 丰富通知渠道：内容更新后，除了日志告警，可以集成邮件、钉钉、企业微信、Telegram Bot 等进行实时通知。
3. 内容对比智能化：当前简单的内容摘要对比误报率高。可以引入文本相似度计算（如SimHash）、只对比关键段落或使用差分算法生成变更摘要。
4. 分布式与高可用：将抓取任务拆分成独立微服务，使用消息队列（如RabbitMQ, Kafka）解耦，通过分布式调度框架（如XXL-JOB, Quartz集群）提高可靠性。
5. 数据持久化与分析：将每次抓取的内容快照保存到历史表，便于后续分析更新频率、内容趋势。
6. 前端功能增强：
   • 增加图表展示监控状态（如更新频率图）。
   • 实现内容差异高亮对比视图。
   • 添加批量导入/导出网站列表功能。
7. 配置化管理：将抓取间隔、重试策略、通知模板等抽离到配置中心或数据库，实现动态调整。
8. 监控与告警：为监控系统本身添加健康检查，如果抓取服务连续失败，向上游系统告警。

这个项目从“我有一个想法”开始，到最终形成一个可运行、可演示、代码结构清晰的全栈应用，涵盖了环境搭建、技术选型、模块设计、编码实现、前后端联调、问题排查和优化思路的全流程。你可以以此为基础，添加你感兴趣的功能，将其改造成一个真正有用的个人工具。编程的乐趣，很大程度上就在于这种“从无到有”的创造过程。