基于Spring Boot + React的纺织品ERP管理系统全栈开发实战

本文详细介绍了一个企业级纺织品ERP管理系统的完整开发过程,涵盖需求分析、技术选型、架构设计、核心功能实现等方面。该系统采用前后端分离架构,后端使用Spring Boot + MyBatis + MySQL,前端使用React + Tailwind CSS,实现了用户管理、库存管理、采购管理、销售管理、质检管理等核心功能,特别针对纺织行业的卷级库存追踪需求进行了深度定制。

标签: Spring Boot, React, ERP系统, 前后端分离, 纺织行业

目录

文章目录

• 基于Spring Boot + React的纺织品ERP管理系统全栈开发实战
• • 目录
  • @[toc]
  • 一、项目背景与需求分析
  • • 1.1 项目背景
    • 1.2 核心需求
    • 1.3 技术挑战
  • 二、技术选型与架构���计
  • • 2.1 技术栈选型
    • • 后端技术栈
      • 前端技术栈
    • 2.2 系统架构设计
    • 2.3 项目目录结构
  • 三、核心功能实现
  • • 3.1 用户认证与JWT实现
    • • 3.1.1 JWT工具类
      • 3.1.2 登录控制器实现
    • 3.2 密码加密与安全
    • 3.3 卷级库存管理(纺织行业特色)
    • • 3.3.1 卷级库存实体
  • 四、数据库设计
  • • 4.1 核心表结构
    • • 4.1.1 用户表(sys_user)
      • 4.1.2 卷级库存表(inventory_roll)
    • 4.2 数据库设计亮点
  • 五、前端实现
  • • 5.1 React组件设计
    • 5.2 Tailwind CSS样式设计
  • 六、系统配置与部署
  • • 6.1 后端配置文件
    • 6.2 部署步骤
    • • 环境要求
      • 后端部署
      • 前端部署
  • 七、性能优化与最佳实践
  • • 7.1 数据库优化
    • 7.2 安全最佳实践
  • 八、项目总结与展望
  • • 8.1 项目成果
    • 8.2 技术收获
    • 8.3 后续优化方向

一、项目背景与需求分析

1.1 项目背景

纺织行业作为传统制造业的重要组成部分,在库存管理、采购管理、质检管理等方面有着独特的业务需求。传统的ERP系统往往无法满足纺织品行业的特殊需求,例如:

• 卷级库存管理: 纺织品通常以卷为单位进行管理,每卷都有独特的批次号、缸号、幅宽、克重等属性
• 质检等级评定: 需要对每卷面料进行质检评分,记录质检等级
• 花色款式管理: 需要管理复杂的颜色、花色、款式编号体系
• 高利润率追踪: 纺织品行业利润率较高,需要精确的成本和利润分析

基于以上背景,我们开发了这套智纺云ERP管理系统,旨在为纺织品企业提供一套完整的信息化解决方案。

1.2 核心需求

根据业务调研,系统需要实现以下核心功能:

1.3 技术挑战

在开发过程中,我们面临以下技术挑战:

1. 数据安全性: 如何保证用户密码安全、防止SQL注入和XSS攻击
2. 性能优化: 大量库存数据的分页查询和统计分析
3. 前后端分离: 如何设计清晰的API接口和统一的响应格式
4. 权限控制: 如何实现灵活的RBAC权限体系
5. 业务复杂度: 纺织品行业特有的业务逻辑如何抽象和实现

二、技术选型与架构���计

2.1 技术栈选型

经过充分的技术调研和对比,我们最终选择了以下技术栈:

后端技术栈

前端技术栈

2.2 系统架构设计

系统采用经典的前后端分离架构,具体分层如下:

┌─────────────────────────────────────────┐ │ 前端层 (React) │ │ 登录页面 | 仪表板 | 库存管理 | 用户管理 │ └─────────────────────────────────────────┘ ↓ HTTP/HTTPS (JWT Token) ┌─────────────────────────────────────────┐ │ 后端层 (Spring Boot) │ │ ┌─────────────────────────────────┐ │ │ │ Controller 层 (控制器) │ │ │ └─────────────────────────────────┘ │ │ ↓ │ │ ┌─────────────────────────────────┐ │ │ │ Service 层 (业务逻辑) │ │ │ └─────────────────────────────────┘ │ │ ↓ │ │ ┌─────────────────────────────────┐ │ │ │ Mapper 层 (数据访问) │ │ │ └─────────────────────────────────┘ │ └─────────────────────────────────────────┘ ↓ JDBC ┌─────────────────────────────────────────┐ │ 数据库层 (MySQL) │ │ sys_user | goods | inventory_roll │ └─────────────────────────────────────────┘

架构特点:

1. 前后端分离: 前端和后端独立开发、独立部署
2. RESTful API: 统一的API接口规范
3. JWT认证: 无状态Token认证,支持分布式部署
4. 分层架构: Controller-Service-Mapper三层架构,职责清晰

2.3 项目目录结构

智纺云ERP/ ├── backend/ # 后端项目 │ ├── src/main/java/ │ │ ├── controller/ # 控制器层 │ │ ├── service/ # 业务逻辑层 │ │ ├── mapper/ # 数据访问层 │ │ ├── entity/ # 实体类 │ │ ├── config/ # 配置类 │ │ └── util/ # 工具类 │ ├── src/main/resources/ │ │ ├── application.yml # 配置文件 │ │ └── mapper/ # MyBatis XML │ └── pom.xml # Maven配置 ├── frontend-react/ # 前端项目 │ ├── src/ │ │ ├── App.js # 主应用 │ │ ├── components/ # 组件 │ │ └── index.js # 入口文件 │ └── package.json # NPM配置 └── database/ # 数据库脚本 └── init.sql # 初始化脚本

三、核心功能实现

3.1 用户认证与JWT实现

3.1.1 JWT工具类

JWT(JSON Web Token)是一种无状态的认证方案,非常适合前后端分离架构。

@ComponentpublicclassJwtUtil{@Value("${jwt.secret}")privateStringsecret;@Value("${jwt.expiration}")privateLongexpiration;// 生成TokenpublicStringgenerateToken(Stringusername){Map<String,Object>claims=newHashMap<>();claims.put("sub",username);claims.put("created",newDate());returnJwts.builder().setClaims(claims).setExpiration(newDate(System.currentTimeMillis()+expiration)).signWith(SignatureAlgorithm.HS512,secret).compact();}// 从Token中获取用户名publicStringgetUsernameFromToken(Stringtoken){Claimsclaims=Jwts.parser().setSigningKey(secret).parseClaimsJws(token).getBody();returnclaims.getSubject();}// 验证Token是否有效publicbooleanvalidateToken(Stringtoken){try{Jwts.parser().setSigningKey(secret).parseClaimsJws(token);returntrue;}catch(Exceptione){returnfalse;}}}

关键点说明:

• 使用HS512算法进行签名,保证Token不被篡改
• Token有效期设置为7天(604800000毫秒)
• 密钥存储在配置文件中,不硬编码在代码里

3.1.2 登录控制器实现

@RestController@RequestMapping("/auth")publicclassLoginController{@AutowiredprivateISysUserServiceuserService;@AutowiredprivateJwtUtiljwtUtil;@PostMapping("/login")publicAjaxResultlogin(@RequestBodyLoginRequestrequest){// 查询用户SysUseruser=userService.selectUserByLoginName(request.getUsername());if(user==null){returnAjaxResult.error("用户不存在");}// 检查用户状态if("1".equals(user.getStatus())){returnAjaxResult.error("账号已被停用");}// 验证密码if(!PasswordUtil.matches(request.getPassword(),user.getPassword())){returnAjaxResult.error("密码错误");}// 生成tokenStringtoken=jwtUtil.generateToken(request.getUsername());Map<String,Object>result=newHashMap<>();result.put("token",token);result.put("user",user);returnAjaxResult.success("登录成功",result);}}

3.2 密码加密与安全

系统使用BCrypt算法对用户密码进行加密,这是一种单向哈希算法,即使数据库泄露也无法反推出原始密码。

publicclassPasswordUtil{privatestaticfinalBCryptPasswordEncoderencoder=newBCryptPasswordEncoder();// 加密密码publicstaticStringencode(StringrawPassword){returnencoder.encode(rawPassword);}// 验证密码publicstaticbooleanmatches(StringrawPassword,StringencodedPassword){returnencoder.matches(rawPassword,encodedPassword);}}

3.3 卷级库存管理(纺织行业特色)

这是系统最具特色的功能,专门针对纺织品行业的库存管理需求设计。

3.3.1 卷级库存实体

@DatapublicclassInventoryRoll{privateLongrollId;// 卷IDprivateStringrollBarcode;// 卷条码privateStringproductCode;// 商品编码privateStringcolor;// 颜色privateStringpattern;// 花色privateStringlotNo;// 批次号/缸号privateIntegerrollNo;// 卷号privateBigDecimalwidth;// 幅宽(cm)privateBigDecimalgsm;// 克重(gsm)privateBigDecimalquantity;// 数量privateStringunit;// 单位privateStringqcGrade;// 质检等级privateBigDecimalqcScore;// 质检得分privateStringlocation;// 库位privateStringstatus;// 状态}

核心特点:

1. 唯一标识: 每卷面料都有唯一的卷条码
2. 详细属性: 记录幅宽、克重、批次号等纺织品特有属性
3. 质检信息: 支持质检等级和得分记录
4. 状态管理: 区分可用、预留、已售等状态

四、数据库设计

4.1 核心表结构

系统共设计了9张核心数据表,采用RuoYi架构的标准设计规范。

4.1.1 用户表(sys_user)

CREATETABLEsys_user(user_idBIGINT(20)NOTNULLAUTO_INCREMENTCOMMENT'用户ID',login_nameVARCHAR(30)NOTNULLCOMMENT'登录账号',user_nameVARCHAR(30)NOTNULLCOMMENT'用户昵称',emailVARCHAR(50)DEFAULT''COMMENT'用户邮箱',phonenumberVARCHAR(11)DEFAULT''COMMENT'手机号码',passwordVARCHAR(100)DEFAULT''COMMENT'密码',statusCHAR(1)DEFAULT'0'COMMENT'帐号状态(0正常 1停用)',del_flagCHAR(1)DEFAULT'0'COMMENT'删除标志',create_timeDATETIMEDEFAULTCURRENT_TIMESTAMP,update_timeDATETIMEDEFAULTCURRENT_TIMESTAMPONUPDATECURRENT_TIMESTAMP,PRIMARYKEY(user_id),UNIQUEKEYuk_login_name(login_name))ENGINE=InnoDBDEFAULTCHARSET=utf8mb4COMMENT='用户信息表';

4.1.2 卷级库存表(inventory_roll)

CREATETABLEinventory_roll(roll_idBIGINT(20)NOTNULLAUTO_INCREMENTCOMMENT'卷ID',roll_barcodeVARCHAR(50)NOTNULLCOMMENT'卷条码',product_codeVARCHAR(50)NOTNULLCOMMENT'商品编码',colorVARCHAR(50)COMMENT'颜色',lot_noVARCHAR(50)COMMENT'批次号/缸号',widthDECIMAL(10,2)COMMENT'幅宽(cm)',gsmDECIMAL(10,2)COMMENT'克重(gsm)',quantityDECIMAL(10,2)NOTNULLCOMMENT'数量',qc_gradeVARCHAR(10)COMMENT'质检等级',locationVARCHAR(50)COMMENT'库位',statusVARCHAR(20)DEFAULT'Available',create_timeDATETIMEDEFAULTCURRENT_TIMESTAMP,PRIMARYKEY(roll_id),UNIQUEKEYuk_roll_barcode(roll_barcode),KEYidx_product_code(product_code))ENGINE=InnoDBDEFAULTCHARSET=utf8mb4COMMENT='卷级库存表';

4.2 数据库设计亮点

1. 字符集选择: 使用utf8mb4字符集,支持存储emoji等特殊字符
2. 索引优化: 在常用查询字段上建立索引,提升查询性能
3. 时间戳: 使用CURRENT_TIMESTAMP自动记录创建和更新时间
4. 逻辑删除: 使用del_flag字段实现逻辑删除,保留数据历史
5. 唯一约束: 在登录名、卷条码等字段上设置唯一约束

五、前端实现

5.1 React组件设计

前端采用React 18.2.0 + Tailwind CSS构建,实现了现代化的响应式UI。

// 主应用组件exportdefaultfunctionApp(){const[isLoggedIn,setIsLoggedIn]=useState(false);const[token,setToken]=useState('');consthandleLogin=async(username,password)=>{constresponse=awaitfetch('http://localhost:8080/api/auth/login',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({username,password})});constdata=awaitresponse.json();if(data.code===200){setToken(data.data.token);setIsLoggedIn(true);localStorage.setItem('token',data.data.token);}};return(<div className="min-h-screen bg-gray-50">{!isLoggedIn?(<LoginPage onLogin={handleLogin}/>):(<Dashboard token={token}/>)}</div>);}

5.2 Tailwind CSS样式设计

// 卡片组件示例constCard=({title,value,icon:Icon})=>(<div className="bg-white p-6 rounded-xl shadow-sm hover:shadow-md transition-shadow"><div className="flex justify-between items-start"><div><p className="text-sm font-medium text-slate-500">{title}</p><h3 className="text-2xl font-bold text-slate-800">{value}</h3></div><Icon className="w-6 h-6 text-blue-500"/></div></div>);

六、系统配置与部署

6.1 后端配置文件

# application.ymlserver:port:8080spring:datasource:url:jdbc:mysql://localhost:3306/textile_erpusername:rootpassword:your_passworddriver-class-name:com.mysql.cj.jdbc.Drivermybatis:mapper-locations:classpath:mapper/*.xmltype-aliases-package:com.erp.entityjwt:secret:your-secret-key-hereexpiration:604800000# 7天

6.2 部署步骤

环境要求

后端部署

# 1. 进入后端目录cdbackend# 2. 编译打包mvn clean package# 3. 运行项目java -jar target/textile-erp-1.0.0.jar

前端部署

# 1. 进入前端目录cdfrontend-react# 2. 安装依赖npminstall# 3. 启动开发服务器npmstart# 4. 生产环境构建npmrun build

七、性能优化与最佳实践

7.1 数据库优化

1. 索引优化: 在高频查询字段上建立索引
2. 分页查询: 使用PageHelper插件避免全表扫描
3. 连接池配置: 合理配置HikariCP连接池参数

7.2 安全最佳实践

1. 密码加密: 使用BCrypt算法
2. SQL注入防护: 使用MyBatis的#{}参数绑定
3. XSS防护: 前端对用户输入进行转义
4. CORS配置: 限制允许的跨域来源

安全提示: 生产环境中务必修改JWT密钥,使用强密码策略,定期更新依赖库版本。

八、项目总结与展望

8.1 项目成果

通过本项目的开发,我们成功实现了一个功能完整的纺织品ERP管理系统:

1. 技术架构: 采用前后端分离架构,技术栈成熟稳定
2. 核心功能: 实现了用户管理、库存管理、采购管理等核心模块
3. 行业特色: 针对纺织行业的卷级库存管理进行了深度定制
4. 安全性: 实现了JWT认证、BCrypt密码加密等安全机制
5. 可扩展性: 采用分层架构,易于扩展新功能

8.2 技术收获

• Spring Boot快速开发企业级应用的最佳实践
• MyBatis复杂SQL查询和动态SQL的使用技巧
• React Hooks的使用和状态管理
• JWT无状态认证的实现原理
• 前后端分离架构的API设计规范

8.3 后续优化方向

1. 功能扩展: 完善角色权限管理、添加操作日志、实现数据导入导出
2. 性能优化: 引入Redis缓存、实现数据库读写分离
3. 用户体验: 优化移动端适配、添加数据可视化图表
4. 运维部署: Docker容器化部署、CI/CD自动化流水线