Java+SpringBoot+Vue微信小程序护肤购物系统开发实践

这次我们来看一个基于Java+SpringBoot+Vue的护肤购物系统小程序项目，这是一个完整的计算机毕业设计解决方案。项目采用前后端分离架构，后端使用SpringBoot框架，前端使用Vue.js和UniApp开发微信小程序，专门针对护肤产品的个性化推荐和购物需求。

这个项目的核心价值在于解决了传统电商平台护肤产品推荐不精准的问题，通过整合肤质分析、产品展示、专业推荐和社交分享功能，为消费者提供个性化的护肤解决方案。系统支持AI肤质检测算法，能够根据用户肤质特征智能推荐合适的产品，降低用户决策成本。

1. 核心能力速览

能力项	说明
项目类型	微信小程序购物系统
技术栈	Java + SpringBoot + Vue.js + UniApp + MySQL
主要功能	产品展示、肤质分析、智能推荐、社交分享、购物车、订单管理
开发环境	Windows 10 + IDEA + 微信开发者工具/VSCode
数据库	MySQL
项目管理	Maven
适合场景	计算机毕业设计、电商系统学习、微信小程序开发实践

2. 适用场景与使用边界

这个护肤购物系统小程序特别适合以下几类用户：

适合场景：

• 计算机专业学生的毕业设计项目
• 想要学习微信小程序开发的开发者
• 需要了解前后端分离架构的初学者
• 对电商系统开发感兴趣的技术人员
• 希望快速搭建护肤类小程序的原型验证

使用边界：

• 系统主要面向护肤产品购物场景，其他品类需要二次开发
• AI肤质检测功能需要接入具体的算法服务
• 微信小程序上线需要遵循平台审核规范
• 商业使用时需要考虑支付接口的合规性
• 高并发场景需要进一步优化数据库和缓存策略

3. 环境准备与前置条件

在开始部署之前，需要确保开发环境满足以下要求：

3.1 基础软件环境

• 操作系统：Windows 10或更高版本（支持macOS和Linux）
• Java环境：JDK 8或11（推荐JDK 11）
• Node.js：版本14.x或16.x（用于前端构建）
• MySQL：版本5.7或8.0
• 开发工具：IntelliJ IDEA（后端）、HBuilderX/VSCode（前端）

3.2 微信小程序环境

• 微信开发者工具（最新版本）
• 已注册的微信小程序账号
• 配置小程序AppID

3.3 项目依赖检查

确保系统中已安装以下关键组件：

• Maven 3.6+
• Git（用于代码版本管理）
• Redis（可选，用于缓存优化）

4. 安装部署与启动方式

4.1 后端SpringBoot项目部署

首先克隆或下载项目源码，然后按照以下步骤配置后端服务：

# 进入后端项目目录 cd skincare-backend # 使用Maven安装依赖 mvn clean install # 配置数据库 # 在MySQL中创建数据库 CREATE DATABASE skincare_db CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci; # 修改application.yml中的数据库配置 spring: datasource: url: jdbc:mysql://localhost:3306/skincare_db?useSSL=false&serverTimezone=Asia/Shanghai username: your_username password: your_password

启动SpringBoot应用：

# 方式1：使用Maven启动 mvn spring-boot:run # 方式2：打包后运行 mvn clean package java -jar target/skincare-backend-1.0.0.jar

4.2 前端Vue项目部署

前端项目使用UniApp框架，需要先安装依赖：

# 进入前端项目目录 cd skincare-frontend # 安装依赖 npm install # 开发环境运行 npm run dev:mp-weixin # 构建生产版本 npm run build:mp-weixin

4.3 微信小程序配置

1. 打开微信开发者工具
2. 导入项目，选择skincare-frontend/dist/dev/mp-weixin目录
3. 配置AppID（测试可使用测试号）
4. 点击编译运行

5. 功能测试与效果验证

5.1 用户管理功能测试

测试目的：验证用户注册、登录、退出等基础功能

操作步骤：

1. 访问小程序首页
2. 点击"注册"按钮，填写用户信息
3. 使用注册的账号登录系统
4. 测试退出登录功能

预期结果：

• 注册成功后可正常登录
• 登录后显示用户个性化页面
• 退出后清除用户状态

核心代码验证：

// 登录接口测试 @IgnoreAuth @RequestMapping(value = "/login") public R login(String username, String password, String captcha, HttpServletRequest request) { UsersEntity user = userService.selectOne(new EntityWrapper<UsersEntity>().eq("username", username)); if(user==null || !user.getPassword().equals(password)) { return R.error("账号或密码不正确"); } String token = tokenService.generateToken(user.getId(),username, "users", user.getRole()); return R.ok().put("token", token); }

5.2 产品浏览与搜索测试

测试目的：验证商品展示、分类筛选、搜索功能

操作步骤：

1. 进入产品列表页面
2. 测试按分类筛选产品
3. 使用搜索功能查找特定产品
4. 查看产品详情页面

预期结果：

• 产品列表加载正常
• 分类筛选准确
• 搜索功能返回相关结果
• 产品详情信息完整

5.3 购物车与订单测试

测试目的：验证购物流程完整性

操作步骤：

1. 添加商品到购物车
2. 调整商品数量
3. 生成订单
4. 查看订单状态

预期结果：

• 购物车商品管理正常
• 订单生成成功
• 订单状态更新及时

6. 数据库设计与优化

6.1 核心表结构

系统包含以下主要数据表：

-- 用户表 CREATE TABLE users ( id BIGINT PRIMARY KEY AUTO_INCREMENT, username VARCHAR(50) UNIQUE NOT NULL, password VARCHAR(100) NOT NULL, skin_type VARCHAR(20), -- 肤质类型 created_time DATETIME DEFAULT CURRENT_TIMESTAMP ); -- 商品表 CREATE TABLE products ( id BIGINT PRIMARY KEY AUTO_INCREMENT, name VARCHAR(100) NOT NULL, description TEXT, price DECIMAL(10,2) NOT NULL, skin_type_suitable VARCHAR(20), -- 适用肤质 stock INT DEFAULT 0, status TINYINT DEFAULT 1 ); -- 订单表 CREATE TABLE orders ( id BIGINT PRIMARY KEY AUTO_INCREMENT, user_id BIGINT NOT NULL, total_amount DECIMAL(10,2) NOT NULL, status VARCHAR(20) DEFAULT 'pending', created_time DATETIME DEFAULT CURRENT_TIMESTAMP );

6.2 性能优化建议

1. 索引优化：为经常查询的字段添加索引
2. 查询优化：避免SELECT *，使用分页查询
3. 缓存策略：使用Redis缓存热点数据
4. 数据库连接池：配置合适的连接池参数

7. 接口API设计与调用

7.1 RESTful API设计

系统采用标准的RESTful API设计风格：

@RestController @RequestMapping("/api") public class ProductController { @Autowired private ProductService productService; // 获取产品列表 @GetMapping("/products") public R listProducts(@RequestParam Map<String, Object> params) { PageUtils page = productService.queryPage(params); return R.ok().put("data", page); } // 获取产品详情 @GetMapping("/products/{id}") public R getProduct(@PathVariable("id") Long id) { ProductEntity product = productService.getById(id); return R.ok().put("data", product); } // 添加商品到购物车 @PostMapping("/cart") public R addToCart(@RequestBody CartItem cartItem) { cartService.addToCart(cartItem); return R.ok(); } }

7.2 接口调用示例

前端调用API的示例代码：

// 获取产品列表 const getProducts = async (params) => { try { const response = await uni.request({ url: 'http://localhost:8080/api/products', method: 'GET', data: params }); return response.data; } catch (error) { console.error('获取产品列表失败:', error); } }; // 用户登录 const userLogin = async (username, password) => { const response = await uni.request({ url: 'http://localhost:8080/api/users/login', method: 'POST', data: { username, password } }); if (response.data.code === 0) { // 保存token uni.setStorageSync('token', response.data.token); } return response.data; };

8. 系统安全与权限控制

8.1 JWT令牌认证

系统使用JWT进行用户认证和权限控制：

@Component public class TokenService { // 生成token public String generateToken(Long userId, String username, String loginType, String role) { Date now = new Date(); Date expireTime = new Date(now.getTime() + EXPIRE * 1000); return Jwts.builder() .setHeaderParam("typ", "JWT") .setSubject(userId.toString()) .setIssuedAt(now) .setExpiration(expireTime) .claim("username", username) .claim("role", role) .signWith(SignatureAlgorithm.HS512, SECRET) .compact(); } // 验证token public Claims getClaimByToken(String token) { try { return Jwts.parser() .setSigningKey(SECRET) .parseClaimsJws(token) .getBody(); } catch (Exception e) { return null; } } }

8.2 权限拦截器配置

@Configuration public class InterceptorConfig implements WebMvcConfigurer { @Override public void addInterceptors(InterceptorRegistry registry) { registry.addInterceptor(authenticationInterceptor()) .addPathPatterns("/api/**") .excludePathPatterns("/api/users/login", "/api/users/register"); } @Bean public AuthenticationInterceptor authenticationInterceptor() { return new AuthenticationInterceptor(); } }

9. 性能测试与优化策略

9.1 压力测试指标

对系统进行性能测试时，需要关注以下关键指标：

• 响应时间：API接口平均响应时间应小于200ms
• 并发用户数：系统应支持至少100个并发用户
• 吞吐量：每秒处理的请求数量
• 错误率：请求失败率应低于1%

9.2 数据库性能优化

// 使用分页查询避免一次性加载大量数据 @Override public PageUtils queryPage(Map<String, Object> params) { Page<ProductEntity> page = new Query<ProductEntity>(params).getPage(); IPage<ProductEntity> iPage = this.page( page, new QueryWrapper<ProductEntity>() .like(StringUtils.isNotBlank((String)params.get("name")), "name", params.get("name")) .eq(params.get("status") != null, "status", params.get("status")) ); return new PageUtils(iPage); }

9.3 缓存策略实现

@Service public class ProductServiceImpl extends ServiceImpl<ProductMapper, ProductEntity> implements ProductService { @Autowired private RedisTemplate<String, Object> redisTemplate; private static final String PRODUCT_CACHE_KEY = "product:"; @Override @Cacheable(value = "products", key = "#id") public ProductEntity getById(Serializable id) { // 先查缓存 String cacheKey = PRODUCT_CACHE_KEY + id; ProductEntity product = (ProductEntity) redisTemplate.opsForValue().get(cacheKey); if (product != null) { return product; } // 缓存未命中，查询数据库 product = super.getById(id); if (product != null) { redisTemplate.opsForValue().set(cacheKey, product, Duration.ofHours(1)); } return product; } }

10. 常见问题与排查方法

10.1 启动问题排查

问题现象	可能原因	解决方案
应用启动失败	端口被占用	修改application.yml中的server.port配置
数据库连接失败	配置错误	检查数据库URL、用户名、密码是否正确
依赖下载失败	网络问题	配置国内Maven镜像源

10.2 运行时问题排查

问题1：微信小程序无法访问后端接口

• 检查后端服务是否正常启动
• 确认接口地址配置正确
• 查看微信开发者工具控制台错误信息

问题2：页面加载缓慢

• 检查网络连接
• 优化图片资源大小
• 使用CDN加速静态资源

问题3：数据库查询超时

• 检查数据库连接池配置
• 优化SQL查询语句
• 添加合适的数据库索引

10.3 部署问题排查

# 检查服务状态 netstat -ano | findstr :8080 # 查看应用日志 tail -f logs/application.log # 检查数据库连接 mysql -u username -p -h localhost skincare_db

11. 项目扩展与二次开发

11.1 功能扩展建议

1. AI肤质分析：集成机器学习算法实现智能肤质检测
2. 社交功能：添加用户评价、分享、关注等功能
3. 推荐算法：基于用户行为实现个性化推荐
4. 多商户支持：扩展为平台型电商系统
5. 数据分析：添加用户行为分析和销售统计功能

11.2 技术架构优化

1. 微服务化：将系统拆分为用户服务、商品服务、订单服务等微服务
2. 容器化部署：使用Docker和Kubernetes进行容器化部署
3. 前后端分离：进一步优化前后端分离架构
4. 监控告警：集成Prometheus和Grafana实现系统监控

11.3 代码结构优化

src/ ├── main/ │ ├── java/ │ │ └── com/ │ │ └── skincare/ │ │ ├── controller/ # 控制器层 │ │ ├── service/ # 服务层 │ │ ├── mapper/ # 数据访问层 │ │ ├── entity/ # 实体类 │ │ ├── config/ # 配置类 │ │ └── SkincareApplication.java │ └── resources/ │ ├── application.yml # 应用配置 │ ├── mapper/ # MyBatis映射文件 │ └── static/ # 静态资源 └── test/ └── java/ └── com/ └── skincare/ ├── controller/ # 控制器测试 └── service/ # 服务层测试

这个护肤购物系统小程序项目为计算机专业学生提供了一个完整的前后端分离开发实践案例，涵盖了从需求分析、技术选型、系统设计到编码实现的全过程。项目采用主流的技术栈，代码结构清晰，文档完整，非常适合作为毕业设计或微信小程序开发的学习资料。

在实际部署和使用过程中，建议先从基础功能开始验证，逐步扩展到高级功能。遇到问题时，可以优先检查环境配置和日志信息，大多数问题都能通过仔细的排查得到解决。