1. 项目背景与核心价值
这个前后端分离的环保网站系统，是我去年为一个地方环保组织开发的实际项目。当时他们需要一套既能展示环保资讯，又能实现用户互动参与的平台。传统单体架构的网站在维护和扩展上都遇到了瓶颈，最终我们选择了SpringBoot+Vue这套技术栈，上线后运行效果超出预期。
这种架构最大的优势在于职责分离——后端专注数据接口和业务逻辑，前端负责展示和交互。开发效率提升明显，我们团队3个人用6周就完成了从需求分析到上线的全过程。特别适合需要快速迭代的中小型项目，比如环保类、公益类网站。
2. 技术选型解析
2.1 后端技术栈
选择SpringBoot不是偶然。相比传统SSM框架，它的自动配置特性让我们节省了至少30%的初始化时间。项目里我们用到了：
- Spring Security做权限控制
- MyBatis-Plus替代原生MyBatis（简化了80%的CRUD代码）
- Redis缓存热点数据
- 七牛云存储图片资源
数据库选MySQL 8.0，主要是考虑：
- 开源免费符合项目预算
- JSON类型支持方便存储动态表单数据
- 窗口函数简化了数据统计报表开发
2.2 前端技术栈
Vue 3的组合式API让代码组织更灵活。项目中值得分享的实践：
- 用Pinia替代Vuex做状态管理
- Element Plus按需引入减小打包体积
- ECharts实现数据可视化
- 自定义指令处理权限按钮显隐
特别说下axios封装技巧：
javascript复制// 在src/utils/request.js
const service = axios.create({
baseURL: import.meta.env.VITE_APP_BASE_API,
timeout: 15000
})
// 请求拦截器
service.interceptors.request.use(config => {
if (store.getters.token) {
config.headers['Authorization'] = `Bearer ${store.getters.token}`
}
return config
})
// 响应拦截器
service.interceptors.response.use(
response => {
const res = response.data
if (res.code !== 200) {
// 处理业务异常
return Promise.reject(new Error(res.message || 'Error'))
}
return res
}
)
3. 系统架构设计
3.1 前后端分离实践
我们采用最经典的分离方案：
- 前端部署在Nginx（端口80）
- 后端SpringBoot（端口8080）
- 通过Nginx反向代理解决跨域
nginx关键配置：
nginx复制server {
listen 80;
server_name localhost;
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;
}
}
3.2 数据库设计要点
环保网站特有的几个表设计：
- 活动报名表（activity_apply）
- 增加geo字段存储用户位置
- 使用status枚举值跟踪报名状态
- 环保资讯表（news）
- 采用MEDIUMTEXT存储富文本内容
- 添加fulltext索引支持搜索
- 碳积分表（carbon_credit）
- 使用DECIMAL(10,2)精确计算
- 建立用户行为类型联合索引
4. 核心功能实现
4.1 地图定位功能
集成高德地图API的关键步骤：
- 申请Web端Key
- 封装地图组件：
vue复制<template>
<div id="map-container"></div>
</template>
<script setup>
import AMapLoader from '@amap/amap-jsapi-loader'
const initMap = () => {
AMapLoader.load({
key: import.meta.env.VITE_AMAP_KEY,
version: '2.0'
}).then((AMap) => {
const map = new AMap.Map('map-container', {
viewMode: '3D',
zoom: 15,
center: [116.397428, 39.90923]
})
// 添加标记点
new AMap.Marker({
position: [116.397428, 39.90923],
map: map
})
})
}
</script>
4.2 文件上传方案
对比了三种方案后选择七牛云：
- 前端直传（节省服务器带宽）
- 后端生成临时token保障安全
- 采用分片上传大文件
后端关键代码：
java复制@GetMapping("/qiniu/token")
public Result<String> getUploadToken() {
StringMap policy = new StringMap();
policy.put("returnBody", "{\"key\":\"$(key)\",\"hash\":\"$(etag)\"}");
String token = auth.uploadToken(
bucket,
null,
3600L,
policy
);
return Result.success(token);
}
5. 部署实战指南
5.1 生产环境部署
推荐使用Docker Compose编排：
yaml复制version: '3'
services:
mysql:
image: mysql:8.0
environment:
MYSQL_ROOT_PASSWORD: ${DB_PASSWORD}
volumes:
- mysql_data:/var/lib/mysql
backend:
build: ./backend
ports:
- "8080:8080"
depends_on:
- mysql
nginx:
image: nginx:alpine
ports:
- "80:80"
volumes:
- ./frontend/dist:/usr/share/nginx/html
- ./nginx.conf:/etc/nginx/conf.d/default.conf
volumes:
mysql_data:
5.2 性能优化技巧
-
前端：
- 配置gzip压缩（节省60%流量）
- 路由懒加载
- 使用CDN加载第三方库
-
后端：
- 启用SpringBoot Actuator监控
- 配置MyBatis二级缓存
- 添加Druid连接池监控
6. 常见问题排坑
6.1 跨域问题终极方案
开发环境建议这样配置：
java复制@Configuration
public class CorsConfig implements WebMvcConfigurer {
@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/**")
.allowedOrigins("*")
.allowedMethods("*")
.maxAge(3600);
}
}
生产环境务必：
- 配置Nginx反向代理
- 设置精确的allowedOrigins
- 启用CORS过滤器
6.2 页面刷新404问题
这是Vue路由history模式的通病，解决方案：
- Nginx添加try_files规则（见3.1）
- 或者改用hash模式
- 配置错误页面重定向
7. 项目扩展方向
这个基础框架可以快速扩展：
- 添加微信小程序端（复用后端接口）
- 集成第三方登录（微信、支付宝）
- 接入IoT设备数据展示
- 开发管理员APP（使用Uniapp）
我在实际开发中最深的体会是：前后端分离项目一定要定义好接口规范。我们团队使用Swagger+YApi，接口变更时能自动同步文档，节省了大量沟通成本。