微信小程序+SpringBoot接入后台服务，接口数据来自后端

article/2025/10/23 22:11:41

文章底部有个人公众号：小兔教你学编程。主要目的是方便阅读。主要分享一些前后端初中级知识、开发实战案例、问题解决等知识。

前言

前两天开发了一个微信小程序项目，只不过接口数据是自己设置的假数据。然后我就想将这些假数据替换掉。这些数据来自接口，之前做过前后端分离的项目，我就想能不能直接调用那些后端数据接口。结果是可以的。以下是自己编写的部分方法

步骤

1、后端的接口
2、微信小程序获取这些接口数据
3、数据展示在微信小程序中

一、后端项目（提供接口）

后端项目就写接口，编写业务逻辑之类的。这个是之前写的一个项目。这里使用mybatis-plus写了一个查询数据的方法。仅供测试小程序是否可以调通该接口

1.1 项目结构

在这里插入图片描述

1.2 启动效果

也可以将后端项目打包发布到服务器，小程序直接访问服务器中的接口地址。开发阶段，还是老老实实这种启动方式。
在这里插入图片描述

1.3 代码

等下小程序就调用这个接口

    /*** 查询所有的商品信息* @return*/@RequestMapping(value = "/goodsInfo/searchAllGoodInfo",method = RequestMethod.GET)public Result searchAllGoodInfo(){try{List<GoodsInfo> goodsInfoList = goodsInfoMapper.selectList(null);if(goodsInfoList != null){return Result.ok().data("goodsInfoList",goodsInfoList);}}catch (Exception e){e.printStackTrace();}return Result.error();}

1.4 数据库数据

等下这些数据可以展示在微信小程序页面

在这里插入图片描述

二、微信小程序项目

1.1 项目结构

这个是页面设置，在点击按钮后。发送接口数据请求，然后将请求的数据展示出来。

在这里插入图片描述

1.2 代码

这里是接口数据请求，将请求后的数据赋值给小程序变量。

// pages/test/index.js
Page({/*** 页面的初始数据*/data: {GoodsList:[]},/*** 获取商品信息*/handleGetGoodsInfo() {// 1 发送异步请求获取商品数据wx.request({url: 'http://localhost:8282/goodsInfo/searchAllGoodInfo', //请求的接口地址success: (result) => {const GoodsList = result.data.data.goodsInfoListthis.setData({GoodsList //获取数据})}});}})