企业官网建设流程全解析

## 1. 项目背景与技术选型 宠物电商行业近年来保持年均20%以上的增速，2023年市场规模已突破3000亿元。这种背景下，一个采用SpringBoot+Vue技术栈的宠物商城管理系统，既符合当前企业级开发的主流技术趋势，又能满足实际商业场景需求。我在实际开发中发现，这套技术组合特别适合需要快速迭代的中小型项目。 技术栈选择上，后端采用SpringBoot 2.7 + MyBatis-Plus 3.5的组合，前端使用Vue 3 + Element Plus。这种搭配在保证开发效率的同时，也兼顾了性能需求。数据库选用MySQL 8.0，主要看中其事务处理能力和对JSON格式的良好支持——这在处理宠物商品的SKU属性时特别有用。 > 关键提示：新手常犯的错误是直接使用最新版本。实际建议SpringBoot用2.7.x稳定版（非3.0+），避免兼容性问题；Vue建议3.2.x版本，Element Plus需对应2.3.x版本。 ## 2. 系统架构设计解析 ### 2.1 前后端分离架构 采用经典的前后端分离模式，通过RESTful API进行数据交互。这种架构的优势在于： - 前端可独立部署，不影响后端服务 - 接口可复用（Web/App/小程序可共用） - 开发团队可并行工作 我在架构设计中特别加入了JWT鉴权机制（见代码示例），相比传统Session方式更适应分布式场景： ```java // JWT生成代码示例 public String generateToken(Long userId, String username, String role, String roleName) { Map<String, Object> claims = new HashMap<>(); claims.put("userId", userId); claims.put("role", role); claims.put("roleName", roleName); return Jwts.builder() .setClaims(claims) .setSubject(username) .setIssuedAt(new Date()) .setExpiration(new Date(System.currentTimeMillis() + expire * 1000)) .signWith(SignatureAlgorithm.HS512, secret) .compact(); }

2.2 数据库设计要点

核心表包括：

• 用户表（含宠物主人/商家双角色）
• 宠物商品表（支持多规格SKU）
• 订单表（关联支付和物流）
• 评价表（带图片附件）

特别注意了字段设计：

CREATE TABLE `pet_product` ( `id` bigint NOT NULL AUTO_INCREMENT, `name` varchar(100) COLLATE utf8mb4_bin NOT NULL, `category_id` int NOT NULL COMMENT '宠物分类', `specs` json DEFAULT NULL COMMENT '规格属性JSON', `price` decimal(10,2) NOT NULL, `stock` int NOT NULL DEFAULT '0', `detail` text COLLATE utf8mb4_bin, PRIMARY KEY (`id`) ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_bin;

避坑指南：宠物商品规格建议用JSON字段存储（MySQL 5.7+支持），比传统EAV模型更高效。但要注意建立合适的索引，比如我们对category_id和price建立了联合索引。

3. 核心功能实现细节

3.1 商品展示模块

前端采用Vue3的组合式API实现响应式商品列表：

// 商品筛选逻辑 const filterProducts = computed(() => { return products.value.filter(item => { return ( item.price >= priceRange.value[0] && item.price <= priceRange.value[1] && (selectedCategory.value ? item.category_id === selectedCategory.value : true) ) }) })

后端接口特别注意了分页优化：

@GetMapping("/products") public R list(@RequestParam Map<String, Object> params) { PageUtils page = productService.queryPage(params); return R.ok().put("data", page); } // MyBatis-Plus分页配置 @Configuration public class MybatisPlusConfig { @Bean public MybatisPlusInterceptor mybatisPlusInterceptor() { MybatisPlusInterceptor interceptor = new MybatisPlusInterceptor(); interceptor.addInnerInterceptor(new PaginationInnerInterceptor(DbType.MYSQL)); return interceptor; } }

3.2 购物车与订单系统

购物车设计采用Redis缓存+MySQL持久化的混合模式：

• 未登录用户：使用浏览器localStorage临时存储
• 已登录用户：同步到Redis（hash结构存储）

订单状态机设计是关键，我们定义了清晰的状态流转：

待支付 -> 已支付 -> 已发货 -> 已完成 ↘ 已取消

支付回调处理要点：一定要做签名验证和幂等处理。我们吃过亏——曾经因重复回调导致库存多扣。

4. 开发环境搭建指南

4.1 后端环境

1. JDK 17（注意配置JAVA_HOME）
2. Maven 3.8+
3. IDEA安装Lombok插件
4. 数据库配置（application.yml示例）：

spring: datasource: url: jdbc:mysql://localhost:3306/pet_store?useSSL=false&serverTimezone=Asia/Shanghai username: root password: 123456 driver-class-name: com.mysql.cj.jdbc.Driver

4.2 前端环境

1. Node.js 16.x
2. 推荐使用pnpm包管理器
3. VSCode安装Volar插件
4. 启动命令：

pnpm install pnpm dev

5. 常见问题解决方案

5.1 跨域问题

开发环境解决方案（后端配置）：

@Configuration public class CorsConfig implements WebMvcConfigurer { @Override public void addCorsMappings(CorsRegistry registry) { registry.addMapping("/**") .allowedOrigins("*") .allowedMethods("GET", "POST", "PUT", "DELETE") .maxAge(3600); } }

生产环境建议通过Nginx反向代理解决。

5.2 图片上传处理

采用七牛云OSS存储方案：

public String upload(MultipartFile file) { String fileName = UUID.randomUUID() + "." + FileUtil.extName(file.getOriginalFilename()); Configuration cfg = new Configuration(Region.autoRegion()); UploadManager uploadManager = new UploadManager(cfg); uploadManager.put(file.getBytes(), fileName, token); return domain + "/" + fileName; }

安全提示：一定要做文件类型校验！我们曾遭遇过用户上传恶意脚本文件的情况。

6. 项目扩展建议

1. 微信小程序端：使用uni-app框架可快速移植
2. 数据分析：接入ELK日志分析系统
3. 推荐系统：基于用户行为实现协同过滤
4. 即时通讯：集成WebSocket实现客服功能

实际开发中，我们遇到最棘手的问题是库存超卖。最终解决方案是：

@Transactional public boolean decreaseStock(Long productId, int quantity) { // 使用乐观锁 int rows = productMapper.updateStock(productId, quantity); return rows > 0; } // Mapper中的SQL <update id="updateStock"> UPDATE pet_product SET stock = stock - #{quantity} WHERE id = #{productId} AND stock >= #{quantity} </update>

这个项目最让我自豪的是支付模块的设计——支持了支付宝、微信支付和余额支付三种方式，通过策略模式实现支付方式的灵活扩展。核心接口设计如下：

public interface PaymentStrategy { PaymentResult pay(PaymentRequest request); boolean supports(PaymentType type); } // 使用示例 @Service public class PaymentService { private final List<PaymentStrategy> strategies; public PaymentResult pay(PaymentRequest request) { return strategies.stream() .filter(s -> s.supports(request.getType())) .findFirst() .orElseThrow(() -> new BizException("不支持的支付方式")) .pay(request); } }

整个项目从技术选型到最终上线历时3个月，期间最大的收获是深刻理解了分布式事务的应用场景。比如订单创建时需要同时操作订单表、库存表和支付记录，我们最终采用本地消息表+定时任务补偿的方案保证了数据一致性。

对于准备用这个项目做毕设的同学，我的建议是：重点突出你解决的具体技术难点，比如：

• 如何实现高性能的商品搜索
• 优惠券系统的设计
• 分布式Session的处理方案
• 接口幂等性保障

这些才是答辩时老师最关注的技术亮点。完整源码中我已经加入了详尽的代码注释，特别标注了各核心功能的实现原理和优化思路，相信能帮助大家快速理解项目架构。