SpringBoot+Vue微信小程序实战：5分钟搞定商品列表API对接（含跨域解决方案）

SpringBootVue微信小程序实战5分钟搞定商品列表API对接含跨域解决方案前后端分离架构已成为现代Web开发的主流模式而微信小程序作为轻量级应用平台其与后端服务的无缝对接直接影响用户体验。本文将聚焦SpringBoot与Vue技术栈通过实战演示如何高效实现商品列表API对接并针对性解决微信小程序开发中最棘手的跨域问题。1. 后端SpringBoot接口速建商品列表接口作为电商类小程序的核心功能其响应速度与数据格式直接影响前端渲染效率。SpringBoot通过RestController注解可快速构建RESTful风格接口。基础商品接口实现RestController RequestMapping(/api/product) public class ProductController { Autowired private ProductService productService; GetMapping(/list) public ResultListProduct getProductList( RequestParam(required false) Integer categoryId) { ListProduct products productService.findByCategory(categoryId); return Result.success(products); } }关键点说明GetMapping明确HTTP方法类型RequestParam处理可选查询参数统一封装Result对象规范响应格式接口响应优化技巧优化方向实现方案适用场景分页查询添加Pageable参数数据量超过50条字段过滤使用JsonInclude注解敏感字段或大字段省略缓存控制添加Cacheable注解静态商品数据响应压缩配置server.compression.enabled移动端网络环境较差时提示始终为API接口添加Swagger文档注解便于前后端协作。示例ApiOperation(获取商品列表) ApiImplicitParam(name categoryId, value 分类ID)2. 微信小程序跨域难题破解微信小程序网络请求默认仅允许配置的域名开发阶段常需处理本地调试的跨域问题。以下是三种实战验证的解决方案方案一SpringBoot全局CORS配置Configuration public class WebConfig implements WebMvcConfigurer { Override public void addCorsMappings(CorsRegistry registry) { registry.addMapping(/**) .allowedOrigins(*) .allowedMethods(GET, POST) .maxAge(3600); } }方案二Nginx反向代理配置server { listen 80; server_name api.dev.com; location / { proxy_pass http://localhost:8080; add_header Access-Control-Allow-Origin *; add_header Access-Control-Allow-Methods GET,POST; } }方案三微信开发者工具临时方案点击右上角「详情」勾选「不校验合法域名...」选项仅限开发环境使用方案对比方案类型适用阶段安全性维护成本SpringBoot配置生产/开发高低Nginx代理生产环境中中工具临时方案仅开发低无3. 前端Vue高效对接实践微信小程序虽使用原生语法但设计思路与Vue高度相通。以下是axios封装的最佳实践请求封装示例// src/utils/request.js const service axios.create({ baseURL: process.env.VUE_APP_BASE_API, timeout: 5000 }) // 请求拦截器 service.interceptors.request.use(config { config.header[X-Requested-With] XMLHttpRequest return config }) // 响应拦截器 service.interceptors.response.use( response { const res response.data if (res.code ! 200) { showToast(res.message) return Promise.reject(new Error(res.message)) } return res.data }, error { handleError(error) return Promise.reject(error) } )商品列表组件实现template div classproduct-list div v-foritem in products :keyitem.id classproduct-item img :srcitem.image modeaspectFill/ div classinfo h3{{ item.name }}/h3 p classprice¥{{ item.price }}/p /div /div /div /template script import { getProductList } from /api/product export default { data() { return { products: [] } }, async created() { try { const res await getProductList() this.products res.data } catch (error) { console.error(获取商品列表失败:, error) } } } /script4. 接口调试与性能优化Postman作为API调试利器其高级功能常被忽视。以下是提升效率的实战技巧环境变量配置创建开发环境和生产环境设置base_url变量接口路径使用{{base_url}}/api/product/list自动化测试脚本// 在Tests标签页添加 pm.test(响应时间小于200ms, function() { pm.expect(pm.response.responseTime).to.be.below(200); }); pm.test(包含必要字段, function() { const jsonData pm.response.json(); pm.expect(jsonData).to.have.property(data); });性能压测建议使用Postman Runner进行批量测试监控SpringBoot Actuator的/actuator/metrics重点关注http.server.requests指标5. 异常处理与监控健壮的系统需要完善的异常处理机制。推荐采用分层处理策略全局异常处理器RestControllerAdvice public class GlobalExceptionHandler { ExceptionHandler(BusinessException.class) public ResultVoid handleBusinessException(BusinessException e) { log.error(业务异常: {}, e.getMessage()); return Result.fail(e.getCode(), e.getMessage()); } ExceptionHandler(Exception.class) public ResultVoid handleException(Exception e) { log.error(系统异常: , e); return Result.fail(500, 系统繁忙); } }前端错误监控// 在main.js中添加 Vue.config.errorHandler (err, vm, info) { console.error(Vue error: ${err.toString()}\nInfo: ${info}); trackError(err); } window.addEventListener(unhandledrejection, event { console.warn(Unhandled rejection: ${event.reason}); event.preventDefault(); });在项目初期就建立完整的监控体系远比后期补救更高效。ELKPrometheus的组合可以满足大多数场景需求。