最近在辅导学生毕业设计和指导新人项目时发现一个普遍痛点从选题、开题到撰写开题报告、制作答辩PPT整个过程耗时耗力资料零散技术栈选择困难。特别是对于“SpringBoot 微信小程序”这类热门组合如何快速搭建一个结构清晰、功能完整、能跑起来的项目原型是很多同学和初级开发者的核心需求。本文将以一个完整的“喵喵零食微信小程序”项目为例手把手带你从零开始快速完成一个毕业设计或课程项目的核心构建。你将掌握如何利用SpringBoot高效搭建后端API如何开发一个功能完整的微信小程序前端以及如何将两者无缝对接。整个过程注重“可复现性”提供完整的代码、配置和避坑指南确保你不仅能看懂更能亲手做出来。1. 项目背景与核心概念在移动互联网时代微信小程序以其“无需下载、即用即走”的特性成为连接线上线下的重要桥梁。而零食电商作为高频、低客单价的消费场景非常适合通过小程序来触达用户。一个典型的零食小程序需要具备商品展示、分类浏览、购物车、订单管理、用户登录等核心功能。SpringBoot作为Java领域最流行的后端框架之一其“约定大于配置”的理念极大地简化了项目的初始搭建和开发过程。它内嵌了Tomcat等Web服务器无需打包成WAR文件即可独立运行并且提供了强大的自动配置和起步依赖Starter让开发者能快速集成数据库、安全、缓存等各种组件。微信小程序则是一套运行在微信内的应用框架使用JavaScript、WXML类似HTML和WXSS类似CSS进行开发。它提供了丰富的原生API如网络请求、本地存储、地理位置、支付等能够实现接近原生App的体验。将两者结合SpringBoot负责提供稳定、安全的数据接口和业务逻辑处理微信小程序负责提供流畅、友好的用户交互界面构成了一个典型且实用的前后端分离架构。理解这种分工协作模式是完成本项目乃至任何类似全栈项目的基础。2. 环境准备与版本说明在开始编码之前请确保你的开发环境已就绪。以下版本是经过验证的稳定组合建议保持一致以避免不必要的兼容性问题。后端开发环境操作系统Windows 10/11 macOS 或 Linux (如 Ubuntu 20.04) 均可。Java JDK版本 8 或 11 (LTS长期支持版)。推荐 OpenJDK 11。开发工具 (IDE)IntelliJ IDEA (社区版或旗舰版) 或 Eclipse with STS 插件。本文示例使用 IntelliJ IDEA。构建工具Apache Maven 3.6.3 或以上版本。数据库MySQL 5.7 或 8.0。我们将使用MySQL作为主数据库。API测试工具Postman 或 Insomnia用于测试后端接口。前端开发环境微信开发者工具稳定版。这是开发、调试、预览小程序的官方必备工具。Node.js非必须但部分构建工具可能需要。建议安装 LTS 版本。关键依赖版本 (在pom.xml中指定)SpringBoot2.7.x 或 3.x.x。注意SpringBoot 3.x 需要 JDK 17。本文为兼顾广泛性使用2.7.18。MyBatis-Plus3.5.x一款强大的MyBatis增强工具极大简化CRUD操作。MySQL Connector8.0.x用于连接MySQL 8。如果使用MySQL 5.7可对应调整。Lombok减少Java Bean的模板代码。Hutool国产工具类库提供各种便捷方法。版本兼容性提示技术栈迭代很快如果遇到依赖冲突或启动问题首先检查各依赖库的版本是否与SpringBoot主版本兼容。SpringBoot官方提供了版本依赖管理通常使用其指定的版本是最稳妥的。3. 项目初始化与后端架构搭建3.1 使用 Spring Initializr 快速创建项目最快捷的方式是使用 start.spring.io 或 IDEA 内置的 Spring Initializr。打开 IDEA选择File-New-Project。选择Spring Initializr填写项目信息Project SDK选择你的 JDK 11。Namemiaomiao-snack(项目名)Groupcom.example(组织名可按需修改)Artifactmiaomiao-snackTypeMavenJava Version11PackagingJar选择依赖在Dependencies中搜索并添加以下起步依赖Spring Web(构建Web应用包含RESTful API支持)MyBatis Framework(或直接添加MyBatis-Plus依赖稍后手动配置)MySQL Driver(数据库驱动)Lombok(简化代码)点击FinishIDEA会自动生成项目并下载依赖。3.2 手动补充关键依赖与配置生成的pom.xml可能不包含我们需要的所有库。我们需要手动添加 MyBatis-Plus 和 Hutool。打开pom.xml在dependencies节点内添加!-- MyBatis-Plus 增强启动器 -- dependency groupIdcom.baomidou/groupId artifactIdmybatis-plus-boot-starter/artifactId version3.5.3.1/version /dependency !-- Hutool 工具包 -- dependency groupIdcn.hutool/groupId artifactIdhutool-all/artifactId version5.8.20/version /dependency !-- JWT 用于生成Token (用户认证) -- dependency groupIdio.jsonwebtoken/groupId artifactIdjjwt/artifactId version0.9.1/version /dependency配置数据库连接打开src/main/resources/application.properties文件重命名为application.yml(YAML格式更清晰)并配置server: port: 8080 # 服务端口 spring: datasource: driver-class-name: com.mysql.cj.jdbc.Driver url: jdbc:mysql://localhost:3306/miaomiao_snack_db?useUnicodetruecharacterEncodingutf8useSSLfalseserverTimezoneAsia/Shanghai username: root # 你的数据库用户名 password: 123456 # 你的数据库密码 jackson: date-format: yyyy-MM-dd HH:mm:ss time-zone: GMT8 # MyBatis-Plus 配置 mybatis-plus: configuration: log-impl: org.apache.ibatis.logging.stdout.StdOutImpl # 控制台打印SQL生产环境关闭 global-config: db-config: id-type: auto # 主键策略数据库自增 logic-delete-field: deleted # 全局逻辑删除字段名 logic-delete-value: 1 # 逻辑已删除值 logic-not-delete-value: 0 # 逻辑未删除值3.3 项目目录结构规划一个清晰的项目结构是良好开发的开始。创建以下核心包src/main/java/com/example/miaomiaosnack/ ├── MiaomiaoSnackApplication.java # SpringBoot 启动类 ├── config/ # 配置类包 │ ├── MybatisPlusConfig.java │ ├── WebMvcConfig.java # 跨域配置 │ └── JwtConfig.java ├── controller/ # 控制器层接收请求返回响应 │ ├── api/ │ │ ├── UserController.java │ │ ├── ProductController.java │ │ └── OrderController.java ├── service/ # 业务逻辑层 │ ├── IUserService.java │ ├── impl/ │ │ └── UserServiceImpl.java ├── mapper/ # 数据访问层 (MyBatis-Plus 的 Mapper) │ ├── UserMapper.java ├── entity/ # 实体类对应数据库表 │ ├── User.java │ ├── Product.java │ └── Order.java ├── dto/ # 数据传输对象用于前后端交互 │ ├── UserDTO.java │ └── LoginDTO.java ├── vo/ # 视图对象用于接口返回数据封装 │ ├── ResultVO.java # 统一响应格式 │ └── ProductVO.java └── utils/ # 工具类 ├── JwtUtil.java └── HttpContextUtil.java4. 数据库设计与实体类创建根据“喵喵零食”的业务需求我们设计几个核心表。1. 用户表 (user)CREATE TABLE user ( id bigint(20) NOT NULL AUTO_INCREMENT COMMENT 主键ID, openid varchar(100) DEFAULT NULL COMMENT 微信用户唯一标识, nickname varchar(100) DEFAULT NULL COMMENT 用户昵称, avatar_url varchar(500) DEFAULT NULL COMMENT 用户头像, phone varchar(20) DEFAULT NULL COMMENT 手机号, create_time datetime DEFAULT CURRENT_TIMESTAMP COMMENT 创建时间, update_time datetime DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP COMMENT 更新时间, deleted tinyint(1) DEFAULT 0 COMMENT 逻辑删除(0未删1已删), PRIMARY KEY (id), UNIQUE KEY uk_openid (openid) ) ENGINEInnoDB DEFAULT CHARSETutf8mb4 COMMENT用户表;2. 商品表 (product)CREATE TABLE product ( id bigint(20) NOT NULL AUTO_INCREMENT COMMENT 商品ID, name varchar(200) NOT NULL COMMENT 商品名称, description text COMMENT 商品描述, price decimal(10,2) NOT NULL COMMENT 商品价格, stock int(11) NOT NULL DEFAULT 0 COMMENT 库存, category_id int(11) DEFAULT NULL COMMENT 分类ID, image_url varchar(500) DEFAULT NULL COMMENT 主图URL, detail_images text COMMENT 详情图URL列表(JSON数组), status tinyint(4) DEFAULT 1 COMMENT 状态(1上架0下架), create_time datetime DEFAULT CURRENT_TIMESTAMP, update_time datetime DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP, PRIMARY KEY (id) ) ENGINEInnoDB DEFAULT CHARSETutf8mb4 COMMENT商品表;3. 订单表 (order) 和订单项表 (order_item)订单设计相对复杂通常拆分为订单主表和订单明细表这里给出简化的主表结构。CREATE TABLE order ( id varchar(64) NOT NULL COMMENT 订单号(自定义生成), user_id bigint(20) NOT NULL COMMENT 用户ID, total_amount decimal(10,2) NOT NULL COMMENT 订单总金额, status tinyint(4) NOT NULL DEFAULT 0 COMMENT 状态(0待支付1已支付2已发货3已完成4已取消), address varchar(500) NOT NULL COMMENT 收货地址, receiver varchar(50) NOT NULL COMMENT 收货人, phone varchar(20) NOT NULL COMMENT 收货电话, create_time datetime DEFAULT CURRENT_TIMESTAMP, update_time datetime DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP, PRIMARY KEY (id), KEY idx_user_id (user_id) ) ENGINEInnoDB DEFAULT CHARSETutf8mb4 COMMENT订单表;在Java中使用MyBatis-Plus的注解来映射实体类。以User实体为例// 文件路径src/main/java/com/example/miaomiaosnack/entity/User.java package com.example.miaomiaosnack.entity; import com.baomidou.mybatisplus.annotation.*; import lombok.Data; import java.util.Date; Data TableName(user) // 指定表名 public class User { TableId(type IdType.AUTO) // 主键自增 private Long id; private String openid; private String nickname; private String avatarUrl; private String phone; TableField(fill FieldFill.INSERT) // 插入时自动填充 private Date createTime; TableField(fill FieldFill.INSERT_UPDATE) // 插入和更新时自动填充 private Date updateTime; TableLogic // 逻辑删除注解 private Integer deleted; }注意需要创建一个MetaObjectHandler的实现类来自动填充createTime和updateTime字段。5. 核心业务功能实现5.1 用户登录与认证 (微信小程序登录流程)微信小程序登录流程是前后端协作的典型场景。流程如下小程序端调用wx.login()获取临时code。小程序将code发送给我们的后端服务器。后端服务器用appid、secret和code调用微信接口服务换取openid和session_key。后端根据openid查询或创建用户并生成自定义的JWT Token返回给小程序。小程序后续请求在header中携带此Token后端进行验证。后端核心代码1. 统一响应封装 (ResultVO)// 文件路径src/main/java/com/example/miaomiaosnack/vo/ResultVO.java package com.example.miaomiaosnack.vo; import lombok.Data; import java.io.Serializable; Data public class ResultVOT implements Serializable { private Integer code; // 状态码0成功非0失败 private String msg; // 提示信息 private T data; // 响应数据 public static T ResultVOT success(T data) { ResultVOT resultVO new ResultVO(); resultVO.setCode(0); resultVO.setMsg(success); resultVO.setData(data); return resultVO; } public static T ResultVOT success() { return success(null); } public static T ResultVOT error(Integer code, String msg) { ResultVOT resultVO new ResultVO(); resultVO.setCode(code); resultVO.setMsg(msg); return resultVO; } }2. 微信登录服务层 (UserServiceImpl)// 文件路径src/main/java/com/example/miaomiaosnack/service/impl/UserServiceImpl.java package com.example.miaomiaosnack.service.impl; import cn.hutool.http.HttpUtil; import cn.hutool.json.JSONObject; import cn.hutool.json.JSONUtil; import com.baomidou.mybatisplus.core.conditions.query.LambdaQueryWrapper; import com.example.miaomiaosnack.entity.User; import com.example.miaomiaosnack.mapper.UserMapper; import com.example.miaomiaosnack.service.IUserService; import com.example.miaomiaosnack.utils.JwtUtil; import com.example.miaomiaosnack.vo.LoginVO; import lombok.extern.slf4j.Slf4j; import org.springframework.beans.factory.annotation.Value; import org.springframework.stereotype.Service; import javax.annotation.Resource; import java.util.HashMap; import java.util.Map; Slf4j Service public class UserServiceImpl implements IUserService { Resource private UserMapper userMapper; Value(${wechat.appid}) // 从配置文件中读取 private String appid; Value(${wechat.secret}) private String secret; Override public LoginVO wxLogin(String code) { // 1. 构建请求URL调用微信接口 String url https://api.weixin.qq.com/sns/jscode2session; MapString, Object params new HashMap(); params.put(appid, appid); params.put(secret, secret); params.put(js_code, code); params.put(grant_type, authorization_code); String result HttpUtil.get(url, params); log.info(微信接口返回: {}, result); JSONObject jsonObject JSONUtil.parseObj(result); // 2. 处理微信返回 String openid jsonObject.getStr(openid); String sessionKey jsonObject.getStr(session_key); String errcode jsonObject.getStr(errcode); if (errcode ! null !0.equals(errcode)) { throw new RuntimeException(微信登录失败: jsonObject.getStr(errmsg)); } // 3. 根据openid查询或创建用户 LambdaQueryWrapperUser queryWrapper new LambdaQueryWrapper(); queryWrapper.eq(User::getOpenid, openid); User user userMapper.selectOne(queryWrapper); if (user null) { user new User(); user.setOpenid(openid); // 初始昵称和头像可以留空或由小程序端上传 userMapper.insert(user); } // 4. 生成JWT Token (Payload中可以放入userId, openid等) String token JwtUtil.generateToken(user.getId().toString(), openid); // 5. 封装返回结果 LoginVO loginVO new LoginVO(); loginVO.setUserId(user.getId()); loginVO.setToken(token); loginVO.setOpenid(openid); // 可以返回用户基本信息 loginVO.setNickname(user.getNickname()); loginVO.setAvatarUrl(user.getAvatarUrl()); return loginVO; } }3. 控制器 (UserController)// 文件路径src/main/java/com/example/miaomiaosnack/controller/api/UserController.java package com.example.miaomiaosnack.controller.api; import com.example.miaomiaosnack.service.IUserService; import com.example.miaomiaosnack.vo.LoginVO; import com.example.miaomiaosnack.vo.ResultVO; import org.springframework.web.bind.annotation.PostMapping; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RequestParam; import org.springframework.web.bind.annotation.RestController; import javax.annotation.Resource; RestController RequestMapping(/api/user) public class UserController { Resource private IUserService userService; PostMapping(/login) public ResultVOLoginVO login(RequestParam String code) { try { LoginVO loginVO userService.wxLogin(code); return ResultVO.success(loginVO); } catch (Exception e) { return ResultVO.error(500, 登录失败: e.getMessage()); } } }4. 跨域与JWT拦截器配置微信小程序发出的请求会涉及跨域需要在后端配置。同时我们需要一个拦截器来验证JWT Token。// 文件路径src/main/java/com/example/miaomiaosnack/config/WebMvcConfig.java package com.example.miaomiaosnack.config; import org.springframework.context.annotation.Configuration; import org.springframework.web.servlet.config.annotation.CorsRegistry; import org.springframework.web.servlet.config.annotation.InterceptorRegistry; import org.springframework.web.servlet.config.annotation.WebMvcConfigurer; import javax.annotation.Resource; Configuration public class WebMvcConfig implements WebMvcConfigurer { Resource private JwtInterceptor jwtInterceptor; // 需要自己实现JwtInterceptor Override public void addCorsMappings(CorsRegistry registry) { registry.addMapping(/**) // 允许所有路径 .allowedOriginPatterns(*) // 允许所有来源生产环境应指定小程序域名 .allowedMethods(GET, POST, PUT, DELETE, OPTIONS) .allowedHeaders(*) .allowCredentials(true) .maxAge(3600); } Override public void addInterceptors(InterceptorRegistry registry) { // 注册JWT拦截器并排除登录等不需要验证的接口 registry.addInterceptor(jwtInterceptor) .addPathPatterns(/api/**) .excludePathPatterns(/api/user/login, /api/product/list); } }5.2 商品模块实现商品模块主要包括列表查询、详情查询、分类查询等。这里展示分页查询商品列表的实现。1. ProductController// 文件路径src/main/java/com/example/miaomiaosnack/controller/api/ProductController.java package com.example.miaomiaosnack.controller.api; import com.baomidou.mybatisplus.core.conditions.query.LambdaQueryWrapper; import com.baomidou.mybatisplus.extension.plugins.pagination.Page; import com.example.miaomiaosnack.entity.Product; import com.example.miaomiaosnack.service.ProductService; import com.example.miaomiaosnack.vo.ProductVO; import com.example.miaomiaosnack.vo.ResultVO; import org.springframework.beans.BeanUtils; import org.springframework.web.bind.annotation.GetMapping; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RequestParam; import org.springframework.web.bind.annotation.RestController; import javax.annotation.Resource; import java.util.List; import java.util.stream.Collectors; RestController RequestMapping(/api/product) public class ProductController { Resource private ProductService productService; GetMapping(/list) public ResultVOPageProductVO list( RequestParam(defaultValue 1) Integer pageNum, RequestParam(defaultValue 10) Integer pageSize, RequestParam(required false) Integer categoryId) { PageProduct page new Page(pageNum, pageSize); LambdaQueryWrapperProduct queryWrapper new LambdaQueryWrapper(); queryWrapper.eq(Product::getStatus, 1); // 只查询上架商品 if (categoryId ! null categoryId 0) { queryWrapper.eq(Product::getCategoryId, categoryId); } queryWrapper.orderByDesc(Product::getCreateTime); // 按创建时间倒序 PageProduct productPage productService.page(page, queryWrapper); // 转换为VO对象可以过滤或加工字段 PageProductVO voPage new Page(); BeanUtils.copyProperties(productPage, voPage, records); ListProductVO voList productPage.getRecords().stream().map(product - { ProductVO vo new ProductVO(); BeanUtils.copyProperties(product, vo); // 可以在这里进行额外的数据处理例如处理图片URL return vo; }).collect(Collectors.toList()); voPage.setRecords(voList); return ResultVO.success(voPage); } GetMapping(/detail) public ResultVOProductVO detail(RequestParam Long id) { Product product productService.getById(id); if (product null || product.getStatus() 0) { return ResultVO.error(404, 商品不存在或已下架); } ProductVO vo new ProductVO(); BeanUtils.copyProperties(product, vo); return ResultVO.success(vo); } }5.3 购物车与订单模块购物车通常设计为存储在客户端小程序本地存储或服务端。对于简单项目可以先使用本地存储。订单模块涉及库存扣减、状态流转是业务核心。创建订单的核心逻辑 (伪代码在Service层)Service public class OrderServiceImpl implements OrderService { Resource private ProductService productService; Resource private OrderMapper orderMapper; Resource private OrderItemMapper orderItemMapper; Transactional(rollbackFor Exception.class) // 开启事务 Override public String createOrder(CreateOrderDTO orderDTO) { // 1. 参数校验收货地址等 // 2. 校验并锁定库存防止超卖 for (OrderItemDTO item : orderDTO.getItems()) { Product product productService.getById(item.getProductId()); if (product null || product.getStatus() 0) { throw new RuntimeException(商品[ product.getName() ]已下架或不存在); } if (product.getStock() item.getQuantity()) { throw new RuntimeException(商品[ product.getName() ]库存不足); } // 使用数据库乐观锁或悲观锁更新库存 boolean updateSuccess productService.reduceStock(item.getProductId(), item.getQuantity()); if (!updateSuccess) { throw new RuntimeException(商品[ product.getName() ]库存扣减失败请重试); } } // 3. 生成唯一订单号如时间戳随机数 String orderNo generateOrderNo(); // 4. 计算总金额组装订单主表数据并保存 Order order new Order(); order.setId(orderNo); order.setUserId(orderDTO.getUserId()); order.setTotalAmount(calculateTotal(orderDTO.getItems())); // ... 设置其他字段 orderMapper.insert(order); // 5. 保存订单明细 for (OrderItemDTO item : orderDTO.getItems()) { OrderItem orderItem new OrderItem(); // ... 填充明细数据 orderItemMapper.insert(orderItem); } // 6. (可选) 清除用户购物车中对应的商品 return orderNo; } }6. 微信小程序前端开发要点后端API准备好后就可以开发小程序前端了。使用微信开发者工具创建项目。1. 项目结构miniprogram/ ├── pages/ # 页面文件 │ ├── index/ # 首页 │ ├── category/ # 分类页 │ ├── product/ # 商品详情页 │ ├── cart/ # 购物车页 │ └── my/ # 我的页面 ├── components/ # 自定义组件 ├── utils/ # 工具类 │ └── request.js # 封装网络请求 ├── app.js # 小程序逻辑 ├── app.json # 小程序配置 ├── app.wxss # 全局样式 └── project.config.json # 项目配置2. 封装网络请求 (utils/request.js)统一处理请求、Token、错误码。// utils/request.js const BASE_URL http://localhost:8080; // 你的后端地址上线需改为HTTPS域名 const request (url, method, data) { return new Promise((resolve, reject) { const token wx.getStorageSync(token); const header { content-type: application/json }; if (token) { header[Authorization] Bearer token; } wx.request({ url: BASE_URL url, method: method, data: data, header: header, success: (res) { if (res.statusCode 200) { const result res.data; if (result.code 0) { resolve(result.data); } else { wx.showToast({ title: result.msg || 请求失败, icon: none }); reject(result); } } else { wx.showToast({ title: 网络错误: ${res.statusCode}, icon: none }); reject(res); } }, fail: (err) { wx.showToast({ title: 网络请求失败, icon: none }); reject(err); } }); }); }; // 导出便捷方法 export const get (url, data) request(url, GET, data); export const post (url, data) request(url, POST, data);3. 用户登录 (pages/login/login.js)// pages/login/login.js import { post } from ../../utils/request.js; Page({ onLoad() { this.wxLogin(); }, wxLogin() { wx.login({ success: (res) { if (res.code) { this.loginToServer(res.code); } else { console.log(登录失败 res.errMsg); } } }); }, loginToServer(code) { post(/api/user/login, { code: code }).then(res { // 登录成功保存token和用户信息 wx.setStorageSync(token, res.token); wx.setStorageSync(userInfo, { userId: res.userId, nickname: res.nickname, avatarUrl: res.avatarUrl }); // 跳转到首页 wx.switchTab({ url: /pages/index/index }); }).catch(err { console.error(服务器登录失败, err); }); } });4. 首页获取商品列表 (pages/index/index.js)// pages/index/index.js import { get } from ../../utils/request.js; Page({ data: { productList: [], pageNum: 1, pageSize: 10, hasMore: true, loading: false }, onLoad() { this.loadProductList(); }, onReachBottom() { if (this.data.hasMore !this.data.loading) { this.loadProductList(); } }, loadProductList() { if (this.data.loading) return; this.setData({ loading: true }); const { pageNum, pageSize } this.data; get(/api/product/list, { pageNum, pageSize }).then(res { const oldList this.data.productList; const newList res.records; const total res.total; this.setData({ productList: oldList.concat(newList), pageNum: pageNum 1, hasMore: this.data.productList.length total, loading: false }); }).catch(err { this.setData({ loading: false }); console.error(加载商品失败, err); }); }, // 跳转到商品详情 goToDetail(e) { const productId e.currentTarget.dataset.id; wx.navigateTo({ url: /pages/product/detail?id${productId} }); } });7. 项目部署与上线注意事项开发完成后需要将项目部署到服务器供小程序真机调试和上线。后端部署打包在项目根目录执行mvn clean package -DskipTests会在target目录生成miaomiao-snack-0.0.1-SNAPSHOT.jar。上传服务器将JAR包上传到Linux服务器如使用CentOS或Ubuntu。运行在服务器上安装Java环境使用命令nohup java -jar miaomiao-snack-0.0.1-SNAPSHOT.jar --spring.profiles.activeprod app.log 21 后台运行。配置生产环境创建application-prod.yml配置生产数据库、Redis如需缓存、文件存储路径等。使用Nginx反向代理配置Nginx将域名请求转发到服务器的8080端口并配置SSL证书小程序要求HTTPS。小程序上线前配置小程序后台配置在微信公众平台将你的服务器域名必须是HTTPS添加到request合法域名、uploadFile合法域名等列表中。AppID和AppSecret将小程序后台的AppID和AppSecret正确配置到后端的application.yml中。代码上传与审核使用微信开发者工具上传代码提交审核。8. 常见问题与排查思路在开发过程中你可能会遇到以下典型问题问题现象可能原因排查思路与解决方案后端启动失败端口被占用8080端口已被其他程序使用netstat -ano | findstr :8080查找进程并终止或修改server.port。数据库连接失败1. 数据库服务未启动2. 连接URL、用户名、密码错误3. 驱动版本不匹配1. 检查MySQL服务状态。2. 仔细核对application.yml配置。3. MySQL 8需要com.mysql.cj.jdbc.Driver和serverTimezone参数。微信登录接口返回40029(invalid code)1.code已使用过或过期5分钟2. AppID或AppSecret错误3. 服务器时间不同步1. 确保每次登录使用新的code。2. 核对小程序后台的AppID和AppSecret。3. 检查服务器系统时间。小程序请求后端接口报403(跨域错误)1. 后端未配置跨域2. 请求头中未携带允许的字段1. 检查WebMvcConfig中的跨域配置。2. 确保OPTIONS预检请求被允许。请求接口返回401(未授权)1. 未登录或Token过期2. Token未在请求头中正确携带1. 检查小程序登录流程重新获取Token。2. 检查request.js中是否将Token正确放入Authorization头。MyBatis-Plus 插入时字段为null1. 实体类字段名与数据库列名未正确映射下划线转驼峰2. 字段未设置TableField注解1. 确保配置了mybatis-plus.configuration.map-underscore-to-camel-casetrue。2. 对于非驼峰命名字段使用TableField(column_name)指定。事务不生效1. 方法不是public2. 异常被捕获未抛出3. 数据库引擎不支持事务如MyISAM1. 确保Transactional注解的方法为public。2. 确保异常传播出去或指定rollbackFor。3. 将表引擎改为InnoDB。9. 项目优化与扩展建议完成基础功能后可以考虑以下优化方向让你的项目更具竞争力缓存优化使用Redis缓存热点数据如商品信息、首页轮播图。在ProductService中查询时先查缓存缓存不存在再查数据库并写入缓存。接口限流与防刷使用Guava RateLimiter或Sentinel对登录、下单等关键接口进行限流防止恶意请求。图片存储与CDN将用户上传的头像、商品图片存储到OSS如阿里云OSS、腾讯云COS并配置CDN加速减轻服务器压力。订单超时取消使用延时队列如RabbitMQ的DLX或Redis的ZSet实现未支付订单的自动取消并释放库存。搜索功能集成Elasticsearch实现商品名称、描述的全文检索提升搜索体验。微信支付集成在小程序端调用wx.requestPayment后端调用微信支付统一下单API完成完整的支付流程。后台管理系统使用VueElement UI或ReactAnt Design开发一个简单的管理后台用于管理商品、订单、用户。日志与监控使用SLF4JLogback记录详细的操作日志和错误日志。集成Spring Boot Actuator和Prometheus进行应用监控。代码健壮性增加全局异常处理 (ControllerAdvice)统一处理业务异常和系统异常返回友好的错误信息。对关键业务操作如下单、支付做好日志记录便于问题追溯。安全性SQL注入MyBatis-Plus使用预编译语句基本可避免但仍需避免手动拼接SQL。XSS攻击对用户输入的内容进行过滤或转义或使用安全的富文本编辑器。越权访问在拦截器或Service层校验当前登录用户是否有权操作目标数据如只能取消自己的订单。敏感信息不要在日志中打印密码、Token等敏感信息。通过以上步骤你已经完成了一个具备完整前后端的“喵喵零食微信小程序”项目原型。这个项目涵盖了从环境搭建、数据库设计、核心业务逻辑实现到前后端联调、部署上线的全流程。它不仅是一个可以运行的毕业设计更是一个理解现代Web应用开发的绝佳实践。你可以在此基础上根据上述优化建议继续深化或者调整业务逻辑如改为图书、服装商城打造出属于你自己的完整作品。
SpringBoot+微信小程序全栈开发：从零构建零食电商项目实战
最近在辅导学生毕业设计和指导新人项目时发现一个普遍痛点从选题、开题到撰写开题报告、制作答辩PPT整个过程耗时耗力资料零散技术栈选择困难。特别是对于“SpringBoot 微信小程序”这类热门组合如何快速搭建一个结构清晰、功能完整、能跑起来的项目原型是很多同学和初级开发者的核心需求。本文将以一个完整的“喵喵零食微信小程序”项目为例手把手带你从零开始快速完成一个毕业设计或课程项目的核心构建。你将掌握如何利用SpringBoot高效搭建后端API如何开发一个功能完整的微信小程序前端以及如何将两者无缝对接。整个过程注重“可复现性”提供完整的代码、配置和避坑指南确保你不仅能看懂更能亲手做出来。1. 项目背景与核心概念在移动互联网时代微信小程序以其“无需下载、即用即走”的特性成为连接线上线下的重要桥梁。而零食电商作为高频、低客单价的消费场景非常适合通过小程序来触达用户。一个典型的零食小程序需要具备商品展示、分类浏览、购物车、订单管理、用户登录等核心功能。SpringBoot作为Java领域最流行的后端框架之一其“约定大于配置”的理念极大地简化了项目的初始搭建和开发过程。它内嵌了Tomcat等Web服务器无需打包成WAR文件即可独立运行并且提供了强大的自动配置和起步依赖Starter让开发者能快速集成数据库、安全、缓存等各种组件。微信小程序则是一套运行在微信内的应用框架使用JavaScript、WXML类似HTML和WXSS类似CSS进行开发。它提供了丰富的原生API如网络请求、本地存储、地理位置、支付等能够实现接近原生App的体验。将两者结合SpringBoot负责提供稳定、安全的数据接口和业务逻辑处理微信小程序负责提供流畅、友好的用户交互界面构成了一个典型且实用的前后端分离架构。理解这种分工协作模式是完成本项目乃至任何类似全栈项目的基础。2. 环境准备与版本说明在开始编码之前请确保你的开发环境已就绪。以下版本是经过验证的稳定组合建议保持一致以避免不必要的兼容性问题。后端开发环境操作系统Windows 10/11 macOS 或 Linux (如 Ubuntu 20.04) 均可。Java JDK版本 8 或 11 (LTS长期支持版)。推荐 OpenJDK 11。开发工具 (IDE)IntelliJ IDEA (社区版或旗舰版) 或 Eclipse with STS 插件。本文示例使用 IntelliJ IDEA。构建工具Apache Maven 3.6.3 或以上版本。数据库MySQL 5.7 或 8.0。我们将使用MySQL作为主数据库。API测试工具Postman 或 Insomnia用于测试后端接口。前端开发环境微信开发者工具稳定版。这是开发、调试、预览小程序的官方必备工具。Node.js非必须但部分构建工具可能需要。建议安装 LTS 版本。关键依赖版本 (在pom.xml中指定)SpringBoot2.7.x 或 3.x.x。注意SpringBoot 3.x 需要 JDK 17。本文为兼顾广泛性使用2.7.18。MyBatis-Plus3.5.x一款强大的MyBatis增强工具极大简化CRUD操作。MySQL Connector8.0.x用于连接MySQL 8。如果使用MySQL 5.7可对应调整。Lombok减少Java Bean的模板代码。Hutool国产工具类库提供各种便捷方法。版本兼容性提示技术栈迭代很快如果遇到依赖冲突或启动问题首先检查各依赖库的版本是否与SpringBoot主版本兼容。SpringBoot官方提供了版本依赖管理通常使用其指定的版本是最稳妥的。3. 项目初始化与后端架构搭建3.1 使用 Spring Initializr 快速创建项目最快捷的方式是使用 start.spring.io 或 IDEA 内置的 Spring Initializr。打开 IDEA选择File-New-Project。选择Spring Initializr填写项目信息Project SDK选择你的 JDK 11。Namemiaomiao-snack(项目名)Groupcom.example(组织名可按需修改)Artifactmiaomiao-snackTypeMavenJava Version11PackagingJar选择依赖在Dependencies中搜索并添加以下起步依赖Spring Web(构建Web应用包含RESTful API支持)MyBatis Framework(或直接添加MyBatis-Plus依赖稍后手动配置)MySQL Driver(数据库驱动)Lombok(简化代码)点击FinishIDEA会自动生成项目并下载依赖。3.2 手动补充关键依赖与配置生成的pom.xml可能不包含我们需要的所有库。我们需要手动添加 MyBatis-Plus 和 Hutool。打开pom.xml在dependencies节点内添加!-- MyBatis-Plus 增强启动器 -- dependency groupIdcom.baomidou/groupId artifactIdmybatis-plus-boot-starter/artifactId version3.5.3.1/version /dependency !-- Hutool 工具包 -- dependency groupIdcn.hutool/groupId artifactIdhutool-all/artifactId version5.8.20/version /dependency !-- JWT 用于生成Token (用户认证) -- dependency groupIdio.jsonwebtoken/groupId artifactIdjjwt/artifactId version0.9.1/version /dependency配置数据库连接打开src/main/resources/application.properties文件重命名为application.yml(YAML格式更清晰)并配置server: port: 8080 # 服务端口 spring: datasource: driver-class-name: com.mysql.cj.jdbc.Driver url: jdbc:mysql://localhost:3306/miaomiao_snack_db?useUnicodetruecharacterEncodingutf8useSSLfalseserverTimezoneAsia/Shanghai username: root # 你的数据库用户名 password: 123456 # 你的数据库密码 jackson: date-format: yyyy-MM-dd HH:mm:ss time-zone: GMT8 # MyBatis-Plus 配置 mybatis-plus: configuration: log-impl: org.apache.ibatis.logging.stdout.StdOutImpl # 控制台打印SQL生产环境关闭 global-config: db-config: id-type: auto # 主键策略数据库自增 logic-delete-field: deleted # 全局逻辑删除字段名 logic-delete-value: 1 # 逻辑已删除值 logic-not-delete-value: 0 # 逻辑未删除值3.3 项目目录结构规划一个清晰的项目结构是良好开发的开始。创建以下核心包src/main/java/com/example/miaomiaosnack/ ├── MiaomiaoSnackApplication.java # SpringBoot 启动类 ├── config/ # 配置类包 │ ├── MybatisPlusConfig.java │ ├── WebMvcConfig.java # 跨域配置 │ └── JwtConfig.java ├── controller/ # 控制器层接收请求返回响应 │ ├── api/ │ │ ├── UserController.java │ │ ├── ProductController.java │ │ └── OrderController.java ├── service/ # 业务逻辑层 │ ├── IUserService.java │ ├── impl/ │ │ └── UserServiceImpl.java ├── mapper/ # 数据访问层 (MyBatis-Plus 的 Mapper) │ ├── UserMapper.java ├── entity/ # 实体类对应数据库表 │ ├── User.java │ ├── Product.java │ └── Order.java ├── dto/ # 数据传输对象用于前后端交互 │ ├── UserDTO.java │ └── LoginDTO.java ├── vo/ # 视图对象用于接口返回数据封装 │ ├── ResultVO.java # 统一响应格式 │ └── ProductVO.java └── utils/ # 工具类 ├── JwtUtil.java └── HttpContextUtil.java4. 数据库设计与实体类创建根据“喵喵零食”的业务需求我们设计几个核心表。1. 用户表 (user)CREATE TABLE user ( id bigint(20) NOT NULL AUTO_INCREMENT COMMENT 主键ID, openid varchar(100) DEFAULT NULL COMMENT 微信用户唯一标识, nickname varchar(100) DEFAULT NULL COMMENT 用户昵称, avatar_url varchar(500) DEFAULT NULL COMMENT 用户头像, phone varchar(20) DEFAULT NULL COMMENT 手机号, create_time datetime DEFAULT CURRENT_TIMESTAMP COMMENT 创建时间, update_time datetime DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP COMMENT 更新时间, deleted tinyint(1) DEFAULT 0 COMMENT 逻辑删除(0未删1已删), PRIMARY KEY (id), UNIQUE KEY uk_openid (openid) ) ENGINEInnoDB DEFAULT CHARSETutf8mb4 COMMENT用户表;2. 商品表 (product)CREATE TABLE product ( id bigint(20) NOT NULL AUTO_INCREMENT COMMENT 商品ID, name varchar(200) NOT NULL COMMENT 商品名称, description text COMMENT 商品描述, price decimal(10,2) NOT NULL COMMENT 商品价格, stock int(11) NOT NULL DEFAULT 0 COMMENT 库存, category_id int(11) DEFAULT NULL COMMENT 分类ID, image_url varchar(500) DEFAULT NULL COMMENT 主图URL, detail_images text COMMENT 详情图URL列表(JSON数组), status tinyint(4) DEFAULT 1 COMMENT 状态(1上架0下架), create_time datetime DEFAULT CURRENT_TIMESTAMP, update_time datetime DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP, PRIMARY KEY (id) ) ENGINEInnoDB DEFAULT CHARSETutf8mb4 COMMENT商品表;3. 订单表 (order) 和订单项表 (order_item)订单设计相对复杂通常拆分为订单主表和订单明细表这里给出简化的主表结构。CREATE TABLE order ( id varchar(64) NOT NULL COMMENT 订单号(自定义生成), user_id bigint(20) NOT NULL COMMENT 用户ID, total_amount decimal(10,2) NOT NULL COMMENT 订单总金额, status tinyint(4) NOT NULL DEFAULT 0 COMMENT 状态(0待支付1已支付2已发货3已完成4已取消), address varchar(500) NOT NULL COMMENT 收货地址, receiver varchar(50) NOT NULL COMMENT 收货人, phone varchar(20) NOT NULL COMMENT 收货电话, create_time datetime DEFAULT CURRENT_TIMESTAMP, update_time datetime DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP, PRIMARY KEY (id), KEY idx_user_id (user_id) ) ENGINEInnoDB DEFAULT CHARSETutf8mb4 COMMENT订单表;在Java中使用MyBatis-Plus的注解来映射实体类。以User实体为例// 文件路径src/main/java/com/example/miaomiaosnack/entity/User.java package com.example.miaomiaosnack.entity; import com.baomidou.mybatisplus.annotation.*; import lombok.Data; import java.util.Date; Data TableName(user) // 指定表名 public class User { TableId(type IdType.AUTO) // 主键自增 private Long id; private String openid; private String nickname; private String avatarUrl; private String phone; TableField(fill FieldFill.INSERT) // 插入时自动填充 private Date createTime; TableField(fill FieldFill.INSERT_UPDATE) // 插入和更新时自动填充 private Date updateTime; TableLogic // 逻辑删除注解 private Integer deleted; }注意需要创建一个MetaObjectHandler的实现类来自动填充createTime和updateTime字段。5. 核心业务功能实现5.1 用户登录与认证 (微信小程序登录流程)微信小程序登录流程是前后端协作的典型场景。流程如下小程序端调用wx.login()获取临时code。小程序将code发送给我们的后端服务器。后端服务器用appid、secret和code调用微信接口服务换取openid和session_key。后端根据openid查询或创建用户并生成自定义的JWT Token返回给小程序。小程序后续请求在header中携带此Token后端进行验证。后端核心代码1. 统一响应封装 (ResultVO)// 文件路径src/main/java/com/example/miaomiaosnack/vo/ResultVO.java package com.example.miaomiaosnack.vo; import lombok.Data; import java.io.Serializable; Data public class ResultVOT implements Serializable { private Integer code; // 状态码0成功非0失败 private String msg; // 提示信息 private T data; // 响应数据 public static T ResultVOT success(T data) { ResultVOT resultVO new ResultVO(); resultVO.setCode(0); resultVO.setMsg(success); resultVO.setData(data); return resultVO; } public static T ResultVOT success() { return success(null); } public static T ResultVOT error(Integer code, String msg) { ResultVOT resultVO new ResultVO(); resultVO.setCode(code); resultVO.setMsg(msg); return resultVO; } }2. 微信登录服务层 (UserServiceImpl)// 文件路径src/main/java/com/example/miaomiaosnack/service/impl/UserServiceImpl.java package com.example.miaomiaosnack.service.impl; import cn.hutool.http.HttpUtil; import cn.hutool.json.JSONObject; import cn.hutool.json.JSONUtil; import com.baomidou.mybatisplus.core.conditions.query.LambdaQueryWrapper; import com.example.miaomiaosnack.entity.User; import com.example.miaomiaosnack.mapper.UserMapper; import com.example.miaomiaosnack.service.IUserService; import com.example.miaomiaosnack.utils.JwtUtil; import com.example.miaomiaosnack.vo.LoginVO; import lombok.extern.slf4j.Slf4j; import org.springframework.beans.factory.annotation.Value; import org.springframework.stereotype.Service; import javax.annotation.Resource; import java.util.HashMap; import java.util.Map; Slf4j Service public class UserServiceImpl implements IUserService { Resource private UserMapper userMapper; Value(${wechat.appid}) // 从配置文件中读取 private String appid; Value(${wechat.secret}) private String secret; Override public LoginVO wxLogin(String code) { // 1. 构建请求URL调用微信接口 String url https://api.weixin.qq.com/sns/jscode2session; MapString, Object params new HashMap(); params.put(appid, appid); params.put(secret, secret); params.put(js_code, code); params.put(grant_type, authorization_code); String result HttpUtil.get(url, params); log.info(微信接口返回: {}, result); JSONObject jsonObject JSONUtil.parseObj(result); // 2. 处理微信返回 String openid jsonObject.getStr(openid); String sessionKey jsonObject.getStr(session_key); String errcode jsonObject.getStr(errcode); if (errcode ! null !0.equals(errcode)) { throw new RuntimeException(微信登录失败: jsonObject.getStr(errmsg)); } // 3. 根据openid查询或创建用户 LambdaQueryWrapperUser queryWrapper new LambdaQueryWrapper(); queryWrapper.eq(User::getOpenid, openid); User user userMapper.selectOne(queryWrapper); if (user null) { user new User(); user.setOpenid(openid); // 初始昵称和头像可以留空或由小程序端上传 userMapper.insert(user); } // 4. 生成JWT Token (Payload中可以放入userId, openid等) String token JwtUtil.generateToken(user.getId().toString(), openid); // 5. 封装返回结果 LoginVO loginVO new LoginVO(); loginVO.setUserId(user.getId()); loginVO.setToken(token); loginVO.setOpenid(openid); // 可以返回用户基本信息 loginVO.setNickname(user.getNickname()); loginVO.setAvatarUrl(user.getAvatarUrl()); return loginVO; } }3. 控制器 (UserController)// 文件路径src/main/java/com/example/miaomiaosnack/controller/api/UserController.java package com.example.miaomiaosnack.controller.api; import com.example.miaomiaosnack.service.IUserService; import com.example.miaomiaosnack.vo.LoginVO; import com.example.miaomiaosnack.vo.ResultVO; import org.springframework.web.bind.annotation.PostMapping; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RequestParam; import org.springframework.web.bind.annotation.RestController; import javax.annotation.Resource; RestController RequestMapping(/api/user) public class UserController { Resource private IUserService userService; PostMapping(/login) public ResultVOLoginVO login(RequestParam String code) { try { LoginVO loginVO userService.wxLogin(code); return ResultVO.success(loginVO); } catch (Exception e) { return ResultVO.error(500, 登录失败: e.getMessage()); } } }4. 跨域与JWT拦截器配置微信小程序发出的请求会涉及跨域需要在后端配置。同时我们需要一个拦截器来验证JWT Token。// 文件路径src/main/java/com/example/miaomiaosnack/config/WebMvcConfig.java package com.example.miaomiaosnack.config; import org.springframework.context.annotation.Configuration; import org.springframework.web.servlet.config.annotation.CorsRegistry; import org.springframework.web.servlet.config.annotation.InterceptorRegistry; import org.springframework.web.servlet.config.annotation.WebMvcConfigurer; import javax.annotation.Resource; Configuration public class WebMvcConfig implements WebMvcConfigurer { Resource private JwtInterceptor jwtInterceptor; // 需要自己实现JwtInterceptor Override public void addCorsMappings(CorsRegistry registry) { registry.addMapping(/**) // 允许所有路径 .allowedOriginPatterns(*) // 允许所有来源生产环境应指定小程序域名 .allowedMethods(GET, POST, PUT, DELETE, OPTIONS) .allowedHeaders(*) .allowCredentials(true) .maxAge(3600); } Override public void addInterceptors(InterceptorRegistry registry) { // 注册JWT拦截器并排除登录等不需要验证的接口 registry.addInterceptor(jwtInterceptor) .addPathPatterns(/api/**) .excludePathPatterns(/api/user/login, /api/product/list); } }5.2 商品模块实现商品模块主要包括列表查询、详情查询、分类查询等。这里展示分页查询商品列表的实现。1. ProductController// 文件路径src/main/java/com/example/miaomiaosnack/controller/api/ProductController.java package com.example.miaomiaosnack.controller.api; import com.baomidou.mybatisplus.core.conditions.query.LambdaQueryWrapper; import com.baomidou.mybatisplus.extension.plugins.pagination.Page; import com.example.miaomiaosnack.entity.Product; import com.example.miaomiaosnack.service.ProductService; import com.example.miaomiaosnack.vo.ProductVO; import com.example.miaomiaosnack.vo.ResultVO; import org.springframework.beans.BeanUtils; import org.springframework.web.bind.annotation.GetMapping; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RequestParam; import org.springframework.web.bind.annotation.RestController; import javax.annotation.Resource; import java.util.List; import java.util.stream.Collectors; RestController RequestMapping(/api/product) public class ProductController { Resource private ProductService productService; GetMapping(/list) public ResultVOPageProductVO list( RequestParam(defaultValue 1) Integer pageNum, RequestParam(defaultValue 10) Integer pageSize, RequestParam(required false) Integer categoryId) { PageProduct page new Page(pageNum, pageSize); LambdaQueryWrapperProduct queryWrapper new LambdaQueryWrapper(); queryWrapper.eq(Product::getStatus, 1); // 只查询上架商品 if (categoryId ! null categoryId 0) { queryWrapper.eq(Product::getCategoryId, categoryId); } queryWrapper.orderByDesc(Product::getCreateTime); // 按创建时间倒序 PageProduct productPage productService.page(page, queryWrapper); // 转换为VO对象可以过滤或加工字段 PageProductVO voPage new Page(); BeanUtils.copyProperties(productPage, voPage, records); ListProductVO voList productPage.getRecords().stream().map(product - { ProductVO vo new ProductVO(); BeanUtils.copyProperties(product, vo); // 可以在这里进行额外的数据处理例如处理图片URL return vo; }).collect(Collectors.toList()); voPage.setRecords(voList); return ResultVO.success(voPage); } GetMapping(/detail) public ResultVOProductVO detail(RequestParam Long id) { Product product productService.getById(id); if (product null || product.getStatus() 0) { return ResultVO.error(404, 商品不存在或已下架); } ProductVO vo new ProductVO(); BeanUtils.copyProperties(product, vo); return ResultVO.success(vo); } }5.3 购物车与订单模块购物车通常设计为存储在客户端小程序本地存储或服务端。对于简单项目可以先使用本地存储。订单模块涉及库存扣减、状态流转是业务核心。创建订单的核心逻辑 (伪代码在Service层)Service public class OrderServiceImpl implements OrderService { Resource private ProductService productService; Resource private OrderMapper orderMapper; Resource private OrderItemMapper orderItemMapper; Transactional(rollbackFor Exception.class) // 开启事务 Override public String createOrder(CreateOrderDTO orderDTO) { // 1. 参数校验收货地址等 // 2. 校验并锁定库存防止超卖 for (OrderItemDTO item : orderDTO.getItems()) { Product product productService.getById(item.getProductId()); if (product null || product.getStatus() 0) { throw new RuntimeException(商品[ product.getName() ]已下架或不存在); } if (product.getStock() item.getQuantity()) { throw new RuntimeException(商品[ product.getName() ]库存不足); } // 使用数据库乐观锁或悲观锁更新库存 boolean updateSuccess productService.reduceStock(item.getProductId(), item.getQuantity()); if (!updateSuccess) { throw new RuntimeException(商品[ product.getName() ]库存扣减失败请重试); } } // 3. 生成唯一订单号如时间戳随机数 String orderNo generateOrderNo(); // 4. 计算总金额组装订单主表数据并保存 Order order new Order(); order.setId(orderNo); order.setUserId(orderDTO.getUserId()); order.setTotalAmount(calculateTotal(orderDTO.getItems())); // ... 设置其他字段 orderMapper.insert(order); // 5. 保存订单明细 for (OrderItemDTO item : orderDTO.getItems()) { OrderItem orderItem new OrderItem(); // ... 填充明细数据 orderItemMapper.insert(orderItem); } // 6. (可选) 清除用户购物车中对应的商品 return orderNo; } }6. 微信小程序前端开发要点后端API准备好后就可以开发小程序前端了。使用微信开发者工具创建项目。1. 项目结构miniprogram/ ├── pages/ # 页面文件 │ ├── index/ # 首页 │ ├── category/ # 分类页 │ ├── product/ # 商品详情页 │ ├── cart/ # 购物车页 │ └── my/ # 我的页面 ├── components/ # 自定义组件 ├── utils/ # 工具类 │ └── request.js # 封装网络请求 ├── app.js # 小程序逻辑 ├── app.json # 小程序配置 ├── app.wxss # 全局样式 └── project.config.json # 项目配置2. 封装网络请求 (utils/request.js)统一处理请求、Token、错误码。// utils/request.js const BASE_URL http://localhost:8080; // 你的后端地址上线需改为HTTPS域名 const request (url, method, data) { return new Promise((resolve, reject) { const token wx.getStorageSync(token); const header { content-type: application/json }; if (token) { header[Authorization] Bearer token; } wx.request({ url: BASE_URL url, method: method, data: data, header: header, success: (res) { if (res.statusCode 200) { const result res.data; if (result.code 0) { resolve(result.data); } else { wx.showToast({ title: result.msg || 请求失败, icon: none }); reject(result); } } else { wx.showToast({ title: 网络错误: ${res.statusCode}, icon: none }); reject(res); } }, fail: (err) { wx.showToast({ title: 网络请求失败, icon: none }); reject(err); } }); }); }; // 导出便捷方法 export const get (url, data) request(url, GET, data); export const post (url, data) request(url, POST, data);3. 用户登录 (pages/login/login.js)// pages/login/login.js import { post } from ../../utils/request.js; Page({ onLoad() { this.wxLogin(); }, wxLogin() { wx.login({ success: (res) { if (res.code) { this.loginToServer(res.code); } else { console.log(登录失败 res.errMsg); } } }); }, loginToServer(code) { post(/api/user/login, { code: code }).then(res { // 登录成功保存token和用户信息 wx.setStorageSync(token, res.token); wx.setStorageSync(userInfo, { userId: res.userId, nickname: res.nickname, avatarUrl: res.avatarUrl }); // 跳转到首页 wx.switchTab({ url: /pages/index/index }); }).catch(err { console.error(服务器登录失败, err); }); } });4. 首页获取商品列表 (pages/index/index.js)// pages/index/index.js import { get } from ../../utils/request.js; Page({ data: { productList: [], pageNum: 1, pageSize: 10, hasMore: true, loading: false }, onLoad() { this.loadProductList(); }, onReachBottom() { if (this.data.hasMore !this.data.loading) { this.loadProductList(); } }, loadProductList() { if (this.data.loading) return; this.setData({ loading: true }); const { pageNum, pageSize } this.data; get(/api/product/list, { pageNum, pageSize }).then(res { const oldList this.data.productList; const newList res.records; const total res.total; this.setData({ productList: oldList.concat(newList), pageNum: pageNum 1, hasMore: this.data.productList.length total, loading: false }); }).catch(err { this.setData({ loading: false }); console.error(加载商品失败, err); }); }, // 跳转到商品详情 goToDetail(e) { const productId e.currentTarget.dataset.id; wx.navigateTo({ url: /pages/product/detail?id${productId} }); } });7. 项目部署与上线注意事项开发完成后需要将项目部署到服务器供小程序真机调试和上线。后端部署打包在项目根目录执行mvn clean package -DskipTests会在target目录生成miaomiao-snack-0.0.1-SNAPSHOT.jar。上传服务器将JAR包上传到Linux服务器如使用CentOS或Ubuntu。运行在服务器上安装Java环境使用命令nohup java -jar miaomiao-snack-0.0.1-SNAPSHOT.jar --spring.profiles.activeprod app.log 21 后台运行。配置生产环境创建application-prod.yml配置生产数据库、Redis如需缓存、文件存储路径等。使用Nginx反向代理配置Nginx将域名请求转发到服务器的8080端口并配置SSL证书小程序要求HTTPS。小程序上线前配置小程序后台配置在微信公众平台将你的服务器域名必须是HTTPS添加到request合法域名、uploadFile合法域名等列表中。AppID和AppSecret将小程序后台的AppID和AppSecret正确配置到后端的application.yml中。代码上传与审核使用微信开发者工具上传代码提交审核。8. 常见问题与排查思路在开发过程中你可能会遇到以下典型问题问题现象可能原因排查思路与解决方案后端启动失败端口被占用8080端口已被其他程序使用netstat -ano | findstr :8080查找进程并终止或修改server.port。数据库连接失败1. 数据库服务未启动2. 连接URL、用户名、密码错误3. 驱动版本不匹配1. 检查MySQL服务状态。2. 仔细核对application.yml配置。3. MySQL 8需要com.mysql.cj.jdbc.Driver和serverTimezone参数。微信登录接口返回40029(invalid code)1.code已使用过或过期5分钟2. AppID或AppSecret错误3. 服务器时间不同步1. 确保每次登录使用新的code。2. 核对小程序后台的AppID和AppSecret。3. 检查服务器系统时间。小程序请求后端接口报403(跨域错误)1. 后端未配置跨域2. 请求头中未携带允许的字段1. 检查WebMvcConfig中的跨域配置。2. 确保OPTIONS预检请求被允许。请求接口返回401(未授权)1. 未登录或Token过期2. Token未在请求头中正确携带1. 检查小程序登录流程重新获取Token。2. 检查request.js中是否将Token正确放入Authorization头。MyBatis-Plus 插入时字段为null1. 实体类字段名与数据库列名未正确映射下划线转驼峰2. 字段未设置TableField注解1. 确保配置了mybatis-plus.configuration.map-underscore-to-camel-casetrue。2. 对于非驼峰命名字段使用TableField(column_name)指定。事务不生效1. 方法不是public2. 异常被捕获未抛出3. 数据库引擎不支持事务如MyISAM1. 确保Transactional注解的方法为public。2. 确保异常传播出去或指定rollbackFor。3. 将表引擎改为InnoDB。9. 项目优化与扩展建议完成基础功能后可以考虑以下优化方向让你的项目更具竞争力缓存优化使用Redis缓存热点数据如商品信息、首页轮播图。在ProductService中查询时先查缓存缓存不存在再查数据库并写入缓存。接口限流与防刷使用Guava RateLimiter或Sentinel对登录、下单等关键接口进行限流防止恶意请求。图片存储与CDN将用户上传的头像、商品图片存储到OSS如阿里云OSS、腾讯云COS并配置CDN加速减轻服务器压力。订单超时取消使用延时队列如RabbitMQ的DLX或Redis的ZSet实现未支付订单的自动取消并释放库存。搜索功能集成Elasticsearch实现商品名称、描述的全文检索提升搜索体验。微信支付集成在小程序端调用wx.requestPayment后端调用微信支付统一下单API完成完整的支付流程。后台管理系统使用VueElement UI或ReactAnt Design开发一个简单的管理后台用于管理商品、订单、用户。日志与监控使用SLF4JLogback记录详细的操作日志和错误日志。集成Spring Boot Actuator和Prometheus进行应用监控。代码健壮性增加全局异常处理 (ControllerAdvice)统一处理业务异常和系统异常返回友好的错误信息。对关键业务操作如下单、支付做好日志记录便于问题追溯。安全性SQL注入MyBatis-Plus使用预编译语句基本可避免但仍需避免手动拼接SQL。XSS攻击对用户输入的内容进行过滤或转义或使用安全的富文本编辑器。越权访问在拦截器或Service层校验当前登录用户是否有权操作目标数据如只能取消自己的订单。敏感信息不要在日志中打印密码、Token等敏感信息。通过以上步骤你已经完成了一个具备完整前后端的“喵喵零食微信小程序”项目原型。这个项目涵盖了从环境搭建、数据库设计、核心业务逻辑实现到前后端联调、部署上线的全流程。它不仅是一个可以运行的毕业设计更是一个理解现代Web应用开发的绝佳实践。你可以在此基础上根据上述优化建议继续深化或者调整业务逻辑如改为图书、服装商城打造出属于你自己的完整作品。
