1. 项目概述
作为一名长期从事企业级应用开发的工程师,我最近完成了一个面向高端西服定制行业的数字化管理系统。这个项目源于实际业务需求——传统定制流程中存在的效率低下、数据管理混乱等问题,促使我们开发一套完整的解决方案。
系统采用当前主流的技术栈:后端基于Spring Boot 2框架构建,前端使用Vue 3实现响应式交互,数据持久层采用MyBatis-Plus简化开发,数据库选用MySQL 8.0。这种技术组合既保证了系统性能,又具有良好的可维护性和扩展性。
2. 系统架构设计
2.1 技术选型考量
选择Spring Boot 2作为后端框架主要基于以下考虑:
- 自动配置特性大幅减少样板代码
- 内嵌Tomcat服务器简化部署
- 丰富的starter依赖方便集成各种组件
- 完善的生态和社区支持
前端选用Vue 3而非React或Angular,主要因为:
- 更轻量级,适合快速迭代
- Composition API更适合复杂业务逻辑
- 更好的TypeScript支持
- 更平缓的学习曲线
2.2 整体架构设计
系统采用经典的三层架构:
- 表现层:Vue 3 + Element Plus
- 业务逻辑层:Spring Boot
- 数据访问层:MyBatis-Plus + MySQL
前后端通过RESTful API交互,使用JWT进行身份认证。这种分离架构使得前后端可以独立开发和部署,提高了团队协作效率。
3. 核心功能实现
3.1 客户信息管理模块
客户信息表设计考虑了定制业务的特殊需求:
sql复制CREATE TABLE `client_info` (
`client_id` bigint NOT NULL AUTO_INCREMENT,
`client_name` varchar(50) NOT NULL,
`contact_phone` varchar(20) NOT NULL,
`email_address` varchar(100) DEFAULT NULL,
`body_shape` varchar(20) DEFAULT NULL,
`style_preference` varchar(100) DEFAULT NULL,
`register_time` datetime NOT NULL DEFAULT CURRENT_TIMESTAMP,
PRIMARY KEY (`client_id`),
UNIQUE KEY `idx_phone` (`contact_phone`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
关键实现点:
- 使用MyBatis-Plus的BaseMapper简化CRUD操作
- 手机号设置唯一索引避免重复注册
- 自动记录注册时间
- 体型特征和款式偏好字段为后续推荐算法预留空间
3.2 面料款式管理模块
面料数据表设计:
sql复制CREATE TABLE `fabric_info` (
`fabric_id` bigint NOT NULL AUTO_INCREMENT,
`fabric_name` varchar(100) NOT NULL,
`material_type` varchar(50) NOT NULL,
`color_options` varchar(200) DEFAULT NULL,
`price_per_meter` decimal(10,2) NOT NULL,
`stock_quantity` int NOT NULL DEFAULT '0',
`launch_time` datetime NOT NULL DEFAULT CURRENT_TIMESTAMP,
`image_url` varchar(255) DEFAULT NULL,
PRIMARY KEY (`fabric_id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
业务逻辑实现:
- 使用Redis缓存热门面料数据
- 实现分页查询接口支持大量数据展示
- 价格计算考虑面料用量和加工费
- 图片上传使用阿里云OSS存储
3.3 订单管理模块
订单表结构设计:
sql复制CREATE TABLE `order_info` (
`order_id` bigint NOT NULL AUTO_INCREMENT,
`client_id` bigint NOT NULL,
`fabric_id` bigint NOT NULL,
`measurements_data` text NOT NULL,
`order_status` varchar(20) NOT NULL DEFAULT 'pending',
`total_amount` decimal(12,2) NOT NULL,
`payment_method` varchar(50) DEFAULT NULL,
`order_time` datetime NOT NULL DEFAULT CURRENT_TIMESTAMP,
`delivery_date` date DEFAULT NULL,
`designer_notes` text,
PRIMARY KEY (`order_id`),
KEY `idx_client` (`client_id`),
KEY `idx_status` (`order_status`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
订单状态机设计:
java复制public enum OrderStatus {
PENDING("待支付"),
PAID("已支付"),
MEASURED("已量体"),
IN_PRODUCTION("制作中"),
SHIPPED("已发货"),
COMPLETED("已完成"),
CANCELLED("已取消");
// 状态转换校验逻辑
public static boolean isValidTransition(OrderStatus from, OrderStatus to) {
// 实现状态转换规则
}
}
4. 关键技术实现
4.1 量体数据存储方案
量体数据采用JSON格式存储,前端使用结构化表单采集:
json复制{
"shoulder_width": 45.5,
"chest_circumference": 102,
"waist_circumference": 86,
"arm_length": 63,
"pants_length": 105,
"special_requirements": "左肩略高,需要调整"
}
后端使用MyBatis-Plus的@TableField注解处理JSON映射:
java复制public class OrderInfo {
@TableField(typeHandler = JacksonTypeHandler.class)
private Map<String, Object> measurementsData;
}
4.2 权限控制实现
基于Spring Security + JWT的权限控制:
java复制@Configuration
@EnableWebSecurity
public class SecurityConfig extends WebSecurityConfigurerAdapter {
@Override
protected void configure(HttpSecurity http) throws Exception {
http.csrf().disable()
.authorizeRequests()
.antMatchers("/api/auth/**").permitAll()
.antMatchers("/api/admin/**").hasRole("ADMIN")
.antMatchers("/api/designer/**").hasAnyRole("DESIGNER", "ADMIN")
.anyRequest().authenticated()
.and()
.addFilter(new JwtAuthenticationFilter(authenticationManager()))
.addFilter(new JwtAuthorizationFilter(authenticationManager()));
}
}
4.3 支付集成方案
系统支持多种支付方式集成:
- 微信支付:使用官方SDK实现
- 支付宝:采用RSA2签名方式
- 银行转账:生成虚拟账户
支付状态回调处理:
java复制@RestController
@RequestMapping("/api/payment")
public class PaymentController {
@PostMapping("/callback/wechat")
public String wechatPayCallback(@RequestBody String notifyData) {
// 验证签名
// 更新订单状态
// 记录支付日志
return "<xml><return_code><![CDATA[SUCCESS]]></return_code></xml>";
}
}
5. 系统部署方案
5.1 开发环境配置
推荐开发环境:
- JDK 11
- Node.js 14+
- MySQL 8.0
- Redis 6.0+
使用Docker快速搭建环境:
bash复制# 启动MySQL
docker run --name mysql -e MYSQL_ROOT_PASSWORD=123456 -p 3306:3306 -d mysql:8.0
# 启动Redis
docker run --name redis -p 6379:6379 -d redis:6.0
5.2 生产环境部署
采用Nginx + Docker Compose部署方案:
yaml复制version: '3'
services:
backend:
build: ./backend
ports:
- "8080:8080"
depends_on:
- mysql
- redis
frontend:
build: ./frontend
ports:
- "80:80"
mysql:
image: mysql:8.0
environment:
MYSQL_ROOT_PASSWORD: ${DB_PASSWORD}
volumes:
- mysql_data:/var/lib/mysql
redis:
image: redis:6.0
volumes:
mysql_data:
Nginx配置示例:
nginx复制server {
listen 80;
server_name custom-suit.com;
location / {
root /usr/share/nginx/html;
try_files $uri $uri/ /index.html;
}
location /api {
proxy_pass http://backend:8080;
proxy_set_header Host $host;
}
}
6. 开发经验分享
6.1 前后端协作实践
- 使用Swagger生成API文档:
java复制@Configuration
@EnableSwagger2
public class SwaggerConfig {
@Bean
public Docket api() {
return new Docket(DocumentationType.SWAGGER_2)
.select()
.apis(RequestHandlerSelectors.basePackage("com.customsuit.controller"))
.paths(PathSelectors.any())
.build();
}
}
- 约定统一的响应格式:
java复制public class Result<T> {
private int 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;
}
}
6.2 性能优化技巧
- 使用二级缓存减少数据库压力:
java复制@CacheConfig(cacheNames = "fabric")
@Service
public class FabricServiceImpl implements FabricService {
@Cacheable(key = "#id")
public FabricInfo getById(Long id) {
return baseMapper.selectById(id);
}
}
- 前端采用懒加载和虚拟滚动优化长列表性能:
vue复制<template>
<el-table
:data="tableData"
style="width: 100%"
height="500"
row-key="id"
:load="load"
lazy>
<!-- 表格列定义 -->
</el-table>
</template>
6.3 常见问题排查
- MyBatis-Plus主键ID生成问题:
java复制// 实体类配置
public class OrderInfo {
@TableId(type = IdType.AUTO)
private Long orderId;
}
- Vue响应式数据更新问题:
javascript复制// 正确更新数组
this.$set(this.items, index, newValue)
// 或
this.items.splice(index, 1, newValue)
- 跨域问题解决方案:
java复制@Configuration
public class CorsConfig implements WebMvcConfigurer {
@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/**")
.allowedOrigins("*")
.allowedMethods("*")
.allowedHeaders("*");
}
}
7. 项目扩展方向
7.1 3D量体技术集成
探索使用计算机视觉技术实现远程量体:
- 用户上传正面/侧面照片
- 使用OpenPose等算法提取关键点
- 基于机器学习模型估算身体尺寸
7.2 智能推荐系统
基于用户偏好和历史订单的推荐算法:
- 协同过滤推荐相似用户喜欢的面料
- 内容基于推荐相似特性的面料
- 混合推荐提升准确率
7.3 移动端适配
开发微信小程序版本:
- 复用现有后端API
- 使用uni-app跨平台框架
- 集成微信支付和用户体系
在实际开发过程中,我发现定制业务系统最关键的不仅是技术实现,更重要的是对业务逻辑的准确把握。每个量体数据的字段、每个状态转换的规则,都需要与业务专家充分沟通。这让我深刻体会到,好的系统架构应该能够灵活适应业务变化,而不是让业务来适应技术限制。