1. 项目背景与核心需求
便民物资采购系统是面向社区居民的日常采购需求设计的数字化解决方案。这个系统需要解决三个核心痛点：
- 采购流程繁琐：传统社区采购依赖人工登记、电话沟通，效率低下且易出错
- 物资管理混乱：纸质记录难以追踪库存变化和采购历史
- 信息不对称：居民难以及时获取物资供应情况和价格变动
我在实际开发中发现，采用SpringBoot+Vue+Node.js的技术组合能完美应对这些挑战。SpringBoot提供稳定的后端服务，Vue构建响应式前端界面，Node.js则处理实时通信需求。
2. 技术架构设计
2.1 后端技术选型
SpringBoot 2.7.x作为后端框架，主要基于以下考虑：
- 自动配置简化了Spring应用的初始搭建
- 内嵌Tomcat服务器，无需额外部署
- 完善的生态支持（Spring Security, Spring Data JPA等）
关键配置示例：
java复制@SpringBootApplication
@EnableJpaRepositories
public class ProcurementApplication {
public static void main(String[] args) {
SpringApplication.run(ProcurementApplication.class, args);
}
}
2.2 前端技术方案
Vue 3.x + Element Plus构建管理后台，考虑点包括：
- 组件化开发提高代码复用率
- Composition API更适合复杂业务逻辑
- TypeScript支持增强代码健壮性
典型页面结构：
vue复制<template>
<el-table :data="goodsList">
<el-table-column prop="name" label="商品名称"/>
<el-table-column prop="price" label="单价"/>
</el-table>
</template>
2.3 实时通信层
Node.js + Socket.io处理实时通知：
- 轻量级事件驱动架构适合高并发场景
- WebSocket协议实现双向实时通信
- 与SpringBoot服务通过REST API交互
核心代码片段：
javascript复制io.on('connection', (socket) => {
socket.on('orderUpdate', (data) => {
io.emit('notification', data);
});
});
3. 核心功能实现
3.1 物资管理模块
采用JPA实现CRUD操作，特别注意：
- 使用@Version实现乐观锁，防止库存超卖
- 软删除设计保留历史数据
- 多条件动态查询支持
实体类示例：
java复制@Entity
public class Goods {
@Id
@GeneratedValue
private Long id;
@Version
private Integer version;
private String name;
private BigDecimal price;
private Integer stock;
}
3.2 采购订单流程
订单状态机设计要点：
- 使用枚举定义订单状态（待支付/已支付/配送中/已完成）
- 状态变更记录审计日志
- 分布式事务处理支付与库存扣减
状态转换示例：
java复制public enum OrderStatus {
PENDING_PAYMENT,
PAID,
DELIVERING,
COMPLETED;
}
3.3 实时通知系统
关键技术实现：
- WebSocket保持长连接
- 消息确认机制保证送达
- 离线消息存储与补发
前端订阅代码：
javascript复制socket.on('notification', (msg) => {
ElNotification({
title: '系统通知',
message: msg.content
})
})
4. 系统安全设计
4.1 认证与授权
Spring Security配置要点：
- JWT无状态认证
- RBAC权限模型
- 接口级权限控制
安全配置示例：
java复制@Configuration
@EnableWebSecurity
public class SecurityConfig {
@Bean
public SecurityFilterChain filterChain(HttpSecurity http) throws Exception {
http.authorizeRequests()
.antMatchers("/api/admin/**").hasRole("ADMIN")
.anyRequest().authenticated();
return http.build();
}
}
4.2 数据安全
关键防护措施：
- 敏感字段加密存储
- SQL注入防护
- XSS攻击防范
密码加密示例：
java复制@Bean
public PasswordEncoder passwordEncoder() {
return new BCryptPasswordEncoder();
}
5. 性能优化实践
5.1 数据库优化
实测有效的策略：
- 合理设计索引（组合索引优于单列索引）
- 查询结果分页处理
- 二级缓存应用
索引配置示例：
java复制@Entity
@Table(indexes = @Index(name = "idx_category", columnList = "categoryId"))
public class Goods {
//...
}
5.2 前端性能提升
关键优化点：
- 组件懒加载
- 路由级别代码分割
- 图片压缩与CDN加速
懒加载配置：
javascript复制const UserCenter = () => import('./views/UserCenter.vue')
6. 部署方案
6.1 容器化部署
Docker compose编排方案：
yaml复制version: '3'
services:
backend:
image: procurement-backend
ports:
- "8080:8080"
frontend:
image: procurement-frontend
ports:
- "80:80"
6.2 CI/CD流程
GitLab Runner配置要点：
- 多阶段构建（test/build/deploy）
- 自动化测试保障
- 滚动更新策略
7. 踩坑实录
7.1 跨域问题解决
实际遇到的CORS问题及解决方案：
java复制@Configuration
public class CorsConfig implements WebMvcConfigurer {
@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/**")
.allowedOrigins("*")
.allowedMethods("*");
}
}
7.2 文件上传限制
SpringBoot默认文件大小限制调整：
properties复制spring.servlet.multipart.max-file-size=10MB
spring.servlet.multipart.max-request-size=10MB
7.3 Vue路由模式选择
history模式需要后端配合：
javascript复制const router = createRouter({
history: createWebHistory(),
routes
})
8. 扩展方向
基于现有系统可扩展：
- 移动端小程序接入
- 智能推荐算法
- 供应链管理系统对接
我在实际开发中发现，良好的模块划分能大幅降低后期扩展成本。建议采用领域驱动设计（DDD）思想组织代码结构，将核心业务逻辑与基础设施分离。