智纺云ERP开发实战

基于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 技术挑战

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

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

2.1 技术栈选型

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

后端技术栈

前端技术栈

2.2 系统架构设计

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

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

架构特点:

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)是一种无状态的认证方案,非常适合前后端分离架构。

@Component
public class JwtUtil {

@Value("${jwt.secret}")
private String secret;

@Value("${jwt.expiration}")
private Long expiration;

// 生成Token
public String generateToken(String username) {
Map<String, Object> claims = new HashMap<>();
claims.put("sub", username);
claims.put("created", new Date());

return Jwts.builder()
.setClaims(claims)
.setExpiration(new Date(System.currentTimeMillis() + expiration))
.signWith(SignatureAlgorithm.HS512, secret)
.compact();
}

// 从Token中获取用户名
public String getUsernameFromToken(String token) {
Claims claims = Jwts.parser()
.setSigningKey(secret)
.parseClaimsJws(token)
.getBody();
return claims.getSubject();
}

// 验证Token是否有效
public boolean validateToken(String token) {
try {
Jwts.parser().setSigningKey(secret).parseClaimsJws(token);
return true;
} catch (Exception e) {
return false;
}
}
}

关键点说明:

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

3.1.2 登录控制器实现

@RestController
@RequestMapping("/auth")
public class LoginController {

@Autowired
private ISysUserService userService;

@Autowired
private JwtUtil jwtUtil;

@PostMapping("/login")
public AjaxResult login(@RequestBody LoginRequest request) {
// 查询用户
SysUser user = userService.selectUserByLoginName(request.getUsername());
if (user == null) {
return AjaxResult.error("用户不存在");
}

// 检查用户状态
if ("1".equals(user.getStatus())) {
return AjaxResult.error("账号已被停用");
}

// 验证密码
if (!PasswordUtil.matches(request.getPassword(), user.getPassword())) {
return AjaxResult.error("密码错误");
}

// 生成token
String token = jwtUtil.generateToken(request.getUsername());

Map<String, Object> result = new HashMap<>();
result.put("token", token);
result.put("user", user);

return AjaxResult.success("登录成功", result);
}
}

3.2 密码加密与安全

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

public class PasswordUtil {

private static final BCryptPasswordEncoder encoder = new BCryptPasswordEncoder();

// 加密密码
public static String encode(String rawPassword) {
return encoder.encode(rawPassword);
}

// 验证密码
public static boolean matches(String rawPassword, String encodedPassword) {
return encoder.matches(rawPassword, encodedPassword);
}
}

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

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

3.3.1 卷级库存实体

@Data
public class InventoryRoll {
private Long rollId; // 卷ID
private String rollBarcode; // 卷条码
private String productCode; // 商品编码
private String color; // 颜色
private String pattern; // 花色
private String lotNo; // 批次号/缸号
private Integer rollNo; // 卷号
private BigDecimal width; // 幅宽(cm)
private BigDecimal gsm; // 克重(gsm)
private BigDecimal quantity; // 数量
private String unit; // 单位
private String qcGrade; // 质检等级
private BigDecimal qcScore; // 质检得分
private String location; // 库位
private String status; // 状态
}

核心特点:

四、数据库设计

4.1 核心表结构

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

4.1.1 用户表(sys_user)

CREATE TABLE sys_user (
user_id BIGINT(20) NOT NULL AUTO_INCREMENT COMMENT '用户ID',
login_name VARCHAR(30) NOT NULL COMMENT '登录账号',
user_name VARCHAR(30) NOT NULL COMMENT '用户昵称',
email VARCHAR(50) DEFAULT '' COMMENT '用户邮箱',
phonenumber VARCHAR(11) DEFAULT '' COMMENT '手机号码',
password VARCHAR(100) DEFAULT '' COMMENT '密码',
status CHAR(1) DEFAULT '0' COMMENT '帐号状态(0正常 1停用)',
del_flag CHAR(1) DEFAULT '0' COMMENT '删除标志',
create_time DATETIME DEFAULT CURRENT_TIMESTAMP,
update_time DATETIME DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
PRIMARY KEY (user_id),
UNIQUE KEY uk_login_name (login_name)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COMMENT='用户信息表';

4.1.2 卷级库存表(inventory_roll)

CREATE TABLE inventory_roll (
roll_id BIGINT(20) NOT NULL AUTO_INCREMENT COMMENT '卷ID',
roll_barcode VARCHAR(50) NOT NULL COMMENT '卷条码',
product_code VARCHAR(50) NOT NULL COMMENT '商品编码',
color VARCHAR(50) COMMENT '颜色',
lot_no VARCHAR(50) COMMENT '批次号/缸号',
width DECIMAL(10,2) COMMENT '幅宽(cm)',
gsm DECIMAL(10,2) COMMENT '克重(gsm)',
quantity DECIMAL(10,2) NOT NULL COMMENT '数量',
qc_grade VARCHAR(10) COMMENT '质检等级',
location VARCHAR(50) COMMENT '库位',
status VARCHAR(20) DEFAULT 'Available',
create_time DATETIME DEFAULT CURRENT_TIMESTAMP,
PRIMARY KEY (roll_id),
UNIQUE KEY uk_roll_barcode (roll_barcode),
KEY idx_product_code (product_code)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COMMENT='卷级库存表';

4.2 数据库设计亮点

五、前端实现

5.1 React组件设计

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

// 主应用组件
export default function App() {
const [isLoggedIn, setIsLoggedIn] = useState(false);
const [token, setToken] = useState('');

const handleLogin = async (username, password) => {
const response = await fetch('http://localhost:8080/api/auth/login', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ username, password })
});

const data = await response.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样式设计

// 卡片组件示例
const Card = ({ 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.yml
server:
port: 8080

spring:
datasource:
url: jdbc:mysql://localhost:3306/textile_erp
username: root
password: your_password
driver-class-name: com.mysql.cj.jdbc.Driver

mybatis:
mapper-locations: classpath:mapper/*.xml
type-aliases-package: com.erp.entity

jwt:
secret: your–secret–key–here
expiration: 604800000 # 7天

6.2 部署步骤

环境要求

后端部署

# 1. 进入后端目录
cd backend

# 2. 编译打包
mvn clean package

# 3. 运行项目
java -jar target/textile-erp-1.0.0.jar

前端部署

# 1. 进入前端目录
cd frontend-react

# 2. 安装依赖
npm install

# 3. 启动开发服务器
npm start

# 4. 生产环境构建
npm run build

七、性能优化与最佳实践

7.1 数据库优化

7.2 安全最佳实践

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

八、项目总结与展望

8.1 项目成果

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

8.2 技术收获

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

8.3 后续优化方向