Spring Boot+Vue+Node.js构建乡村风貌展示平台实战解析

前阵子接到一个乡村风貌展示的需求，甲方给的时间很紧，要求“既能展示村庄形象，又要能撑起后续的产业数据录入和旅游导览”。翻了翻手头的技术栈，最后敲定用 Spring Boot + Vue + Node.js 这套组合来落地。这里头有个挺有意思的点：明明 Spring Boot 自己就能干完所有后端活，为什么还要拉上 Node.js？等我把整个平台的架构、核心模块和踩坑经历捋一遍，你就知道这套组合在农村信息化这种“小而杂”的项目里有多合适了。

这个平台本质上是一个“数字乡村名片 + 数据管理后台”的复合体。它既要面向普通游客/访客展示农村的自然风光、特色产业、民俗文化和村容村貌，又要给村干部或运营人员提供内容管理、产业数据填报、图片视频上传的后台。技术选型上，Spring Boot 负责稳扎稳打的数据接口和业务逻辑，Vue 负责前端页面的灵活渲染和交互体验，Node.js 则承担起开发调试、图片压缩、数据模拟这些“轻量级杂活”。如果你是刚接触前后端分离开发的学生，或者正在筹备类似展示平台的小团队，这套思路能帮你少走不少弯路。

1. 为什么农村风貌展示平台要选 Spring Boot + Vue + Node.js

先说说技术选型这件事。农村综合风貌展示平台听起来简单，实际拆解下来要处理的问题一点也不少：多类型内容管理（图文、视频、全景图）、地图点位展示、产业数据统计、后台权限控制，甚至还要考虑未来接入电商或预约功能。这套复合需求决定了技术栈不能太“偏科”。

1.1 三个组件各管哪一段

Spring Boot 在这套架构里是“数据中枢”。它负责所有 REST API 的提供，包括村情概况、景点介绍、新闻动态的增删改查接口，以及后台管理员的登录鉴权。选 Spring Boot 而不是别的后端框架，核心原因有两个：一是和 Java 生态无缝衔接，后续如果要接短信验证码、支付、地图 SDK 的 Java 端，都有一大堆现成 starter 可以用；二是它对事务和复杂查询的支持相当扎实，农村数据往往涉及人口、土地、收入等多表关联，Spring Data JPA 加原生 SQL 的混合写法能兜住这些需求。

Vue 是“门面担当”。前端所有页面都由 Vue 3 驱动，包括首页大屏、村情介绍页、智慧农业数据面板、后台管理界面。选 Vue 的核心理由是生态成熟、上手曲线平缓。尤其是 Element Plus 这类组件库，做后台和图文展示页面简直是开箱即用，一个表格加一个弹窗就能解决八成管理需求。

Node.js 在这里的角色比较特别，它不是一个独立的后端服务，而是整个开发环境的“黏合剂”。具体来说：前端工程化的底层工具链（Vite/Webpack）跑在 Node.js 上；开发时的 Mock 数据服务用 Node.js 起；还有一些前后端分离场景下的静态资源预览也依赖 Node.js 的本地服务器。另外，我把图片压缩和水印脚本也写成了 Node.js 脚本，因为前端上传的原图经常动辄好几兆，不压缩直接存服务器，数据库和带宽都会很吃力。

1.2 这套组合的边界在哪里

得说清楚，Spring Boot + Vue + Node.js 不是所有项目的万能解。如果项目是纯展示站、没有复杂后台，一个 Vue 加一个 JSON 文件就够了，没必要上 Spring Boot；如果项目数据量特别大、并发要求高，Spring Boot 单体会成为瓶颈，可能需要考虑微服务或换 Go。但针对农村风貌展示这种“数据量不大、业务逻辑中等、展示要求高、需要可维护性”的场景，这套组合恰好覆盖了“稳定后端 + 灵活前端 + 高效开发环境”的全部需求。

我用一个比喻给团队伙伴讲这套架构：Spring Boot 是仓库管理员，所有货物（数据）进出都得经他的手，账目最清楚；Vue 是店面设计师，决定客户一进门看到什么、怎么摆放商品最吸引人；Node.js 则是装修队里的万能工，递工具、临时搭架子、处理边角料，保证整个装修过程顺畅。三个角色各司其职，谁也替代不了谁。

2. Spring Boot 后端的核心设计与数据建模

后端是整个平台能不能跑起来的关键。我先把 Spring Boot 后端的模块划分和数据建模思路讲清楚，这部分要是设计不好，后面前端开发会非常痛苦。

2.1 模块划分：按业务域拆，别按技术类型拆

很多新手在做 Spring Boot 项目时喜欢按 Controller、Service、Mapper 这种技术层来建包，结果所有业务的 Controller 堆在一起，改一个功能要翻好几个目录。我做农村风貌平台时换了一种思路，按业务域拆包：

code复制com.rural.showcase
├── common          // 通用返回体、异常处理、工具类
├── config          // 跨域配置、静态资源映射、拦截器
├── village         // 村情概况模块
│   ├── controller
│   ├── service
│   ├── repository
│   └── entity
├── culture         // 民俗文化模块
├── industry        // 产业数据模块
├── tourism         // 旅游导览模块
├── media           // 图片视频资源模块
└── system          // 后台用户、角色、登录日志

这样拆的好处很明显：开发时多个模块可以并行开工互不干扰，后期维护时找代码也快。比如甲方突然说“产业数据模块要加一个‘合作社带动户数’字段”，我直接进 industry 包改，影响范围控制在最小。

2.2 数据表设计：一张主表加多张子表，还是 JSON 字段

农村风貌平台涉及的数据类型非常杂。以“村庄”这个核心实体为例，它既有固定的属性（村名、人口、面积、所属乡镇），也有不确定的属性（特色产业、历史名人、景观节点）。如果全都建成固定字段，以后加一个“数字乡村试点等级”就要改表结构，麻烦不说，还会牵动接口变更。

我的方案是“主表 + 扩展 JSON 字段”的组合：

• village_info 表：村名、乡镇、人口、面积、耕地面积、人均收入、简介、封面图等高频固定字段。
• village_detail 表：和 village_info 一对一，存产业详情、历史文化、民俗活动等长文内容，其中某些非结构化信息用 JSON 类型字段存。
• media_resource 表：统一存所有图片、视频、全景图的 URL、类型、关联业务 ID。
• 景点表、新闻表、用户表、角色表等按常规设计。

用 JSON 字段的好处是，农村项目经常会遇到“这个村要展示村史馆，那个村要展示渔文化”这种差异化需求，硬编码字段表会被频繁变更拖垮。但凡事有度，如果是查询频繁且需要聚合统计的字段，比如产业产值，就必须建独立字段或独立表，不能塞 JSON 里。

2.3 接口设计：统一返回结构 + 分页规范

前后端分离项目最怕接口格式各写各的。我规定所有接口返回结构统一为：

json复制{
  "code": 200,
  "message": "success",
  "data": {
    "list": [],
    "total": 100,
    "pageNum": 1,
    "pageSize": 10
  }
}

这样前端拦截器只需要判断 code 是否为 200 就能决定是否进入正常业务逻辑，异常情况统一走全局异常处理器。

后端代码层面对应的返回体类大概是：

java复制@Data
public class Result<T> {
    private Integer code;
    private String message;
    private T data;

    public static <T> Result<T> success(T data) {
        Result<T> result = new Result<>();
        result.setCode(200);
        result.setMessage("success");
        result.setData(data);
        return result;
    }

    public static <T> Result<T> error(Integer code, String message) {
        Result<T> result = new Result<>();
        result.setCode(code);
        result.setMessage(message);
        return result;
    }
}

分页接口统一接收 pageNum 和 pageSize 参数，用 Spring Data JPA 的 Pageable 实现。这里有一个实战心得：分页查询时，如果前端需要展示总条数来翻页，后端一定要返回 total 字段，否则前端要用“数据是否小于 pageSize”来判断是不是最后一页，体验会差很多。

2.4 文件上传接口：大图和视频要分开处理

农村风貌平台几乎离不开图片和视频。村容村貌要上图，宣传片要上视频，全景漫游要上全景图。文件上传这块我踩过不少坑，最终方案是：

• 图片：前端先压缩再上传，后端限制单张不超过 5MB，存储到服务器本地目录，Nginx 做静态资源映射。
• 视频：单独走一个上传接口，限制单个文件不超过 200MB，支持断点续传（前端把视频切片，后端用 MultipartFile 接收每个分片，最后合并）。
• 全景图：和普通图片处理方式一致，只是前端用 three.js 或 pannellum 做渲染。

后端关键配置在 application.yml：

yaml复制spring:
  servlet:
    multipart:
      max-file-size: 2048MB
      max-request-size: 2048MB

注意这里的 max-file-size 如果设得太小，前端传大视频会被直接拒绝，而且报错信息不够友好。我通常设成 2GB，让前端做更细粒度的分片判断。

3. Vue 前端的页面组织与关键功能实现

前端是整个平台的门面，也是甲方最直观感受到“好不好看”“顺不顺手”的部分。我用的 Vue 3 + Vite + Element Plus + Pinia + Vue Router 这套标准配置，下面挑几个有代表性的实现细节展开讲。

3.1 工程初始化与路由设计

用 Vite 创建 Vue 3 项目非常快：

bash复制npm create vite@latest rural-frontend -- --template vue
cd rural-frontend
npm install
npm install vue-router@4 pinia element-plus axios

路由设计上，我用了“公开页面 + 后台管理”两套布局：

• 公开页面（不需要登录）：首页、村情展示、旅游导览、文化传承、新闻动态。
• 后台页面（需要登录）：数据总览、内容管理、产业数据、媒体资源、系统设置。

Vue Router 配置的关键部分是路由守卫：

javascript复制router.beforeEach((to, from, next) => {
  const token = localStorage.getItem('adminToken')
  if (to.meta.requiresAuth && !token) {
    next({ path: '/login' })
  } else {
    next()
  }
})

3.2 首页大屏：用横向滚动卡片组展示多村风貌

农村风貌平台的首页是最花心思的。我的设计思路是：顶部是区域总览图，通过背景地图加标记点展示各个村庄的位置；中间是行政村列表，用横向滚动的卡片组件展示每个村的封面图、村名、人口和特色标签；底部是动态数据条，展示全域的土地面积、总人口、特色产业数量等统计数字。

首页的卡片滚动用 CSS 的 scroll-snap 实现了丝滑的分页滚动效果：

css复制.village-card-list {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  gap: 20px;
  padding: 20px;
}
.village-card {
  flex: 0 0 300px;
  scroll-snap-align: start;
}

点击具体村庄卡片，进入村庄详情页。详情页用了路由参数传递村庄 ID：

javascript复制router.push({ path: `/village/${id}` })

3.3 视频播放：m3u8 切片视频的播放方案

农村宣传片经常会上传为 m3u8 格式，因为这种格式支持自适应码率和切片加载，首屏速度快很多。Vue 里播放 m3u8 视频，我用的方案是 video.js 加 videojs-contrib-hls 插件（旧方案）或直接用 hls.js 的核心功能（新方案）。

最省事的做法是：

bash复制npm install video.js @videojs/http-streaming

在组件里这样初始化：

javascript复制import videojs from 'video.js'
import 'video.js/dist/video-js.css'

const player = videojs(this.$refs.videoPlayer, {
  controls: true,
  autoplay: false,
  preload: 'auto',
  sources: [{
    src: 'https://example.com/media/village-promo.m3u8',
    type: 'application/x-mpegURL'
  }]
})

这里要特别注意：如果 m3u8 视频地址和前端部署域名跨越了，需要在后端接口里配置跨域，否则播放器会报“MediaError”。我把视频地址统一放在 media_resource 表里，后端接口返回时自动拼接完整 URL，前端只管传 ID 给播放器。

3.4 地图点位展示：腾讯地图和标记点弹出框

旅游导览模块需要在地图上标注景点位置、停车场、公共卫生间等设施。我选的是腾讯地图 JavaScript API（因为微信生态和公众号里打开时兼容性更好）。注册腾讯地图开放平台后拿到 key，在 Vue 里用动态加载方式引入：

javascript复制const key = 'YOUR_TENCENT_MAP_KEY'
const script = document.createElement('script')
script.src = `https://map.qq.com/api/gljs?v=1.exp&key=${key}`
script.onload = () => {
  const map = new TMap.Map(document.getElementById('map'), {
    center: new TMap.LatLng(28.2278, 112.9388),
    zoom: 12
  })
  // 添加标记点和信息窗
}
document.head.appendChild(script)

地图标记点数据从后端接口获取，返回每个点位的经纬度、名称、类型、简介。点击标记点弹出一个信息窗体，展示景点缩略图和“去看看”按钮，按钮跳转到该景点的详情页。

这里有个坑：动态加载的脚本如果组件销毁时没清理，用户反复进出地图页面会重复创建地图实例，导致页面卡顿。我加了条件判断，如果地图实例已存在就直接更新数据，不再重新初始化。

3.5 Vue 开发中的高频问题：从报错到解决

“npm 无法加载 ps1 脚本”问题

在 Windows 上跑 npm 命令时报“无法加载 c:\program files\nodejs\npm.ps1，因为在此系统上禁止运行脚本”是很常见的坑。这是 PowerShell 执行策略限制导致的，解决办法是在管理员 PowerShell 里执行：

powershell复制Set-ExecutionPolicy -ExecutionPolicy RemoteSigned

或者临时绕过限制：

powershell复制powershell -ExecutionPolicy Bypass -Command "npm install"

“Vue 样式不生效”问题

排查 Vue 组件样式不生效问题时，先检查三件事：style 标签有没有写 scoped（scoped 会限制样式只作用于当前组件）、类名有没有拼写错误、样式是不是被覆盖了。如果需要修改子组件内部样式，用 :deep() 穿透选择器。

“路由参数变化但组件不刷新”问题

从村庄 A 详情页点击推荐位跳到村庄 B 详情页时，路由参数变了但页面内容没变。因为同一路由组件的实例被复用，需要监听路由参数变化重新拉数据：

javascript复制watch(() => route.params.id, (newId) => {
  fetchVillageDetail(newId)
})

4. Node.js 在项目里的具体任务与配置

前面提到 Node.js 在这套架构里是开发环境和工具链的“黏合剂”，这部分详细展开它究竟干了哪些活、怎么配。

4.1 Node.js 安装与环境变量配置

做这个项目的前提是装好 Node.js。这里要提醒一句：别装太新的版本，除非你确定项目里所有依赖都兼容。我用的是 Node.js 18 LTS，Vite 和 video.js 跑得都非常稳。

Windows 下安装完 Node.js 后在“系统属性-环境变量”里确认 PATH 里包含 Node 安装目录。验证是否装好：

bash复制node -v
npm -v

这两个命令能正常输出版本号就说明基础环境没问题。

4.2 用 Node.js 搭开发时的 Mock 数据服务

在实际项目的早期阶段，后端接口可能还没完全写好，前端不能干等。我在项目根目录加了一个 mock 文件夹，用 Node.js 的 http 模块搭了一个极简的 Mock 服务：

javascript复制// mock/server.js
const http = require('http')

const villages = [
  { id: 1, name: '李家村', population: 1280, area: 3200, cover: '/images/lijiacun.jpg' },
  { id: 2, name: '山水村', population: 980, area: 2100, cover: '/images/shanshui.jpg' }
]

http.createServer((req, res) => {
  res.setHeader('Content-Type', 'application/json; charset=utf-8')
  if (req.url === '/api/village/list') {
    res.end(JSON.stringify({ code: 200, data: villages }))
  } else {
    res.end(JSON.stringify({ code: 404, message: 'Not Found' }))
  }
}).listen(3001, () => {
  console.log('Mock server running at http://localhost:3001')
})

然后在前端的 Vite 配置里设置代理，把请求转发到 Mock 服务：

javascript复制// vite.config.js
server: {
  proxy: {
    '/api': {
      target: 'http://localhost:3001',
      changeOrigin: true
    }
  }
}

后端接口完成后，只需要把代理 target 改为后端服务地址，前端代码完全不用动，这个设计在联调阶段帮我省了无数沟通成本。

4.3 用 Node.js 写图片压缩脚本

农村风貌平台上线前，我收集了各个村报上来的照片，很多原图拍出来是十几 MB 的 RAW 或高清 JPG，直接传上去，页面加载会非常慢。我写了一个 Node.js 脚本，基于 sharp 库批量压缩图片：

bash复制npm install sharp

脚本核心逻辑：

javascript复制const sharp = require('sharp')
const fs = require('fs')
const path = require('path')

const inputDir = './raw-images'
const outputDir = './compressed-images'

if (!fs.existsSync(outputDir)) {
  fs.mkdirSync(outputDir)
}

fs.readdirSync(inputDir).forEach(file => {
  const inputPath = path.join(inputDir, file)
  const outputPath = path.join(outputDir, file.replace(/\.(jpg|jpeg|png)$/i, '.webp'))

  sharp(inputPath)
    .resize({ width: 1600, withoutEnlargement: true })
    .webp({ quality: 80 })
    .toFile(outputPath)
    .then(() => console.log(`Compressed ${file} -> ${outputPath}`))
    .catch(err => console.error(err))
})

把图片统一转成 WebP 格式并限制宽度最高 1600px，质量压到 80，基本能保证视觉无损的情况下大小缩小 60% 以上。这个脚本不依赖任何 GUI 工具，一个命令跑完所有图：

bash复制node scripts/compress-images.js

4.4 npm 依赖管理和脚本命令配置

项目根目录的 package.json 里，我会配置常用的执行脚本，避免团队成员记一堆命令：

json复制{
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview",
    "mock": "node mock/server.js",
    "compress": "node scripts/compress-images.js",
    "lint": "eslint src --ext .js,.vue"
  }
}

团队成员只需要执行 npm run dev 就能把前端开发服务器拉起来，npm run mock 起 Mock 服务，npm run compress 压缩图片。开发体验非常顺畅。

5. 前后端联调中的关键问题排查链

前后端联调是整个项目里问题最多、也最锻炼人的阶段。我梳理一下实际遇到的三个典型问题和完整排查思路，这些坑我相信很多做前后端分离的人都会踩到。

5.1 跨域问题：加注解还是加全局配置

开发阶段，Vue 前端跑在 5173 端口，Spring Boot 后端跑在 8080 端口，前端调用接口会直接跨域。Vite 代理可以在开发环境解决这个问题，但生产环境前端静态资源和后端接口通常在不同域名，必须在后端做跨域处理。

我用的方案是 Spring Boot 的全局配置类：

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

排查跨域问题时的判断逻辑是：浏览器控制台如果报 “No ‘Access-Control-Allow-Origin’ header is present”，那就是后端没配跨域或配的有问题；如果报 “Response to preflight request doesn’t pass access control check”，那通常是后端对 OPTIONS 请求的处理不正确，删掉自定义拦截器里对 OPTIONS 请求的拦截即可。

5.2 大字段传输超时：接口响应慢导致前端超时

旅游导览模块的“全村概况”接口返回的数据包含了村庄详情、景点列表、图片资源、视频资源，一次返回的 JSON 超过 5MB。刚开始的前端 axios 默认超时时间是 10 秒，接口在低配服务器上跑了 8 秒，但偶尔到了 15 秒，前端就报超时错误。

排查步骤：

1. 用 Postman 直接调接口，看实际返回耗时，发现确实要 8-15 秒。
2. 后端日志里查看慢 SQL，发现景点列表查询用了 N+1 次数据库查询，每次查一张子表。
3. 优化为一条 JOIN 查询，并给关联字段加索引，查询耗时降到 2 秒以内。
4. 前端 axios 超时时间调整为 30 秒，双重保障。

前后端联调时遇到超时，别急着改前端超时时间，先排查后端查询效率。很多时候是数据库查询或序列化耗时太长，前端再等也白搭。

5.3 上传文件的临时目录权限问题

项目部署到 Linux 服务器后，图片上传功能频频报错，提示 “Failed to parse multipart servlet request”。排查发现是 Tomcat 默认的上传临时目录没有写权限。

解决方式是在 application.yml 里显式指定上传临时目录：

yaml复制spring:
  servlet:
    multipart:
      location: /var/rural-platform/temp

然后在 Linux 下给目录权限：

bash复制mkdir -p /var/rural-platform/temp
chmod 777 /var/rural-platform/temp

这个问题在本地开发环境很难发现，因为 Windows 用户目录权限通常是开放的，一上服务器就暴露了。

5.4 微信内打开页面图片防盗链问题

平台上线后，村干部们喜欢把展示页面分享到微信群，结果在微信里打开时，很多图片加载不出来。排查发现是图片服务器做了防盗链校验，只允许特定域名访问，微信内置浏览器的 Referer 不合规。

在 Nginx 静态资源配置里放开微信域名的限制：

nginx复制location /images/ {
    alias /var/rural-platform/images/;
    valid_referers none blocked *.qq.com *.weixin.qq.com;
    if ($invalid_referer) {
        return 403;
    }
}

如果完全不做防盗链，直接去掉 valid_referers 相关配置就行。农村项目里，图片被引用的场景不多，我建议直接开放，省得各种“黑屏”问题。

6. 部署上线与性能优化

平台开发完成后，部署上线是整个项目压力最大的环节。我用的部署拓扑是：Nginx 托管 Vue 打包后的静态文件并做反向代理，Spring Boot 以 jar 包形式跑在服务器上，Node.js 负责静态资源服务器和后续脚本任务。

6.1 Spring Boot 打包与启动

用 Maven 打包：

bash复制mvn clean package -DskipTests

把生成的 jar 包上传到服务器后，用 nohup 启动：

bash复制nohup java -jar rural-platform.jar --spring.profiles.active=prod > /var/log/rural-platform.log 2>&1 &

如果服务器内存紧张，可以加 JVM 参数限制堆内存：

bash复制java -Xms512m -Xmx1024m -jar rural-platform.jar

注意：生产环境仓库里一定不要把数据库密码、密钥硬编码在 application.yml 里，我用的是 --spring.profiles.active=prod 加载独立的 prod 配置，或直接用环境变量注入。

6.2 Vue 前端打包与 Nginx 配置

前端打包：

bash复制npm run build

打包产物在 dist 目录，上传到 Nginx 的 html 目录即可。

Nginx 配置的关键点是接口反向代理和 history 路由的 fallback：

nginx复制server {
    listen 80;
    server_name rural.example.com;

    root /var/www/rural-platform/dist;
    index index.html;

    location / {
        try_files $uri $uri/ /index.html;
    }

    location /api/ {
        proxy_pass http://127.0.0.1:8080;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }

    location /media/ {
        proxy_pass http://127.0.0.1:3002;
        proxy_set_header Host $host;
    }
}

try_files 指令特别重要，否则 Vue Router 用 history 模式时刷新子页面会 404。

6.3 Node.js 静态资源服务器

Media 模块我单独用 Node.js 起了一个极简静态资源服务器，负责图片、视频、全景图等大文件的访问：

javascript复制// static-server.js
const http = require('http')
const fs = require('fs')
const path = require('path')

const mediaRoot = '/var/rural-platform/media'

http.createServer((req, res) => {
  const filePath = path.join(mediaRoot, req.url)
  if (!filePath.startsWith(mediaRoot)) {
    res.writeHead(403)
    res.end('Forbidden')
    return
  }
  fs.readFile(filePath, (err, data) => {
    if (err) {
      res.writeHead(404)
      res.end('Not Found')
      return
    }
    res.writeHead(200, { 'Content-Type': getContentType(filePath) })
    res.end(data)
  })
}).listen(3002, () => {
  console.log('Static server running at http://localhost:3002')
})

之所以不用 Nginx 直接服务静态文件，是因为后续还想在 Node.js 这里做图片鉴权和水印的扩展。Nginx 只做转发，Node.js 负责业务化的资源处理，这种分工在项目迭代中更灵活。

6.4 上线后的性能监控与优化清单

上线后我持续观察了一段时间，针对农村项目的低配服务器（2核4G）做了几项优化：

1. GIF/大图全部转 WebP，首页首屏图片加载体积从 8MB 降到 2MB 左右。
2. Vue 路由按需加载，把村情展示、智慧农业面板等不常用页面拆成独立 chunk。
3. 后端接口加 Redis 缓存，景点列表这类读多写少的数据缓存 5 分钟。
4. Nginx 开启 gzip 压缩，JSON 接口响应体积平均缩小 60%。

nginx复制gzip on;
gzip_types text/plain text/css application/json application/javascript text/xml application/xml image/svg+xml;

这些优化做完之后，整个平台的加载速度有了质的提升，即使在弱网环境下，首页也能在 3 秒内完成首屏加载。

7. 农村项目的特殊经验与避坑记录

这部分全是实操过程中积累下来的经验，偏向农村信息化项目的“另一面”——沟通、数据收集、内容运营。很多技术方案本身不难，难的是数据和素材从哪来、怎么保证质量。

7.1 图片收集与处理的经验

做农村风貌平台，最大的难点不是写代码，而是从村委、乡镇干部手里收图片素材。很多照片拍得歪歪扭扭，像素也参差不齐。我的经验是，定好一套图片规范发给对接人：“横幅照片，不低于 1920 像素宽，内容清晰，不要带手机日期水印”。收上来之后统一用 Node.js 脚本压缩和裁剪。

7.2 数据口径的确认方法

产业数据统计这一块，每个村报上来的数据口径可能不一致。比如“特色产业面积”，A 村报的是“种植面积”，B 村报的是“产业园区规划面积”，直接陈列就会闹笑话。我在后台做了一个“数据填报说明”弹窗，每个指标下面都写清楚统计口径和示范案例，同时在管理后台的数据列表里加了“数据来源”和“更新日期”字段，方便审核。

7.3 平台可维护性建议

农村项目一般没有专职运维，平台交出去之后，村干部能上手操作的后台尽量简单。我把后台的操作流程压缩到三个动作：登录、编辑内容、发布。所有复杂的数据关联都在代码层面处理掉了。技术上，我写了几个针对性的定时任务脚本，比如每天自动备份数据库、每周自动清理上传临时文件，避免“没人管就出问题”的情况。

基于这些经验，如果你也要做类似的农村风貌展示平台，我建议先把素材收集规范和后台操作流程想清楚再动手写代码。技术只是工具，最终交付的是“能让村里人用起来、爱用”的产品。

这几个月做下来，我最大的体会是：Spring Boot + Vue + Node.js 的组合在中小型展示项目中非常能打，关键是你得明确每个组件的职责边界。后端别矫枉过正设计过度，前端别堆积花哨不实用的效果，Node.js 就在工具链和资源处理上发光发热。最后再分享一个小技巧：给项目写一份“上线操作手册”放到服务器上，包含常用运维命令、备份方式和常见问题处理步骤。很多平台做完即失联，半年后服务器挂了都没人知道。把运维细节提前准备好，项目才能真正存活下去，而不是停留在演示阶段。