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

简介: 这篇文章介绍了如何将微信小程序与SpringBoot后端服务进行数据交互,包括后端接口的编写、小程序获取接口数据的方法,以及数据在小程序中的展示。同时,还涉及到了使用Vue搭建后台管理系统,方便数据的查看和管理。

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

前言

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

步骤

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

一、后端项目(提供接口)

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

1.1 项目结构

在这里插入图片描述

1.2 启动效果

   也可以将后端项目打包发布到服务器,小程序直接访问服务器中的接口地址。开发阶段,还是老老实实这种启动方式。  
AI 代码解读

在这里插入图片描述

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();

    }
AI 代码解读

1.4 数据库数据

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

在这里插入图片描述

二、微信小程序项目

1.1 项目结构

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

在这里插入图片描述

1.2 代码

    这里是接口数据请求,将请求后的数据赋值给小程序变量。
AI 代码解读
// pages/test/index.js
Page({
  /**
   * 页面的初始数据
   */
  data: {
    GoodsList:[]
  },
  /**
   * 获取商品信息
   */
  handleGetGoodsInfo() {
    // 1 发送异步请求获取商品数据
    wx.request({
      url: 'http://localhost:8282/goodsInfo/searchAllGoodInfo', //请求的接口地址
      success: (result) => {
        const GoodsList = result.data.data.goodsInfoList
        this.setData({
          GoodsList //获取数据
        })

      }
    });

  }

})
AI 代码解读

1.3 启动效果

在这里插入图片描述

三、Vue搭建后台管理

   这个也是之前开发的一套前后台项目的前端。自己删除了大部分内容。作为一个后台管理系统,还是挺不错的。
AI 代码解读

1.1 项目结构

在这里插入图片描述

1.2 启动效果

   之前做的后台管理系统:等下这些数据,就可以展示在微信小程序中。方便数据的管理。这里可以进行图上的上传,以及查看预览等。  
AI 代码解读

在这里插入图片描述

四、测试效果

效果:
1、点击按钮后,发送接口,获取数据展示。
2、后台日志记录这次查询情况
3、后台管理页面查看数据是否一样(肯定一样。同一个数据库)

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

五、后语

   这样接入后台,就可以实现小程序的功能需求。小程序负责接收数据,以及数据的展示。后台处理逻辑。使用Vue做一个后台管理系统,也方便查看、管理数据。嘎嘎爽
AI 代码解读

在这里插入图片描述

相关文章
微服务——SpringBoot使用归纳——Spring Boot返回Json数据及数据封装——封装统一返回的数据结构
本文介绍了在Spring Boot中封装统一返回的数据结构的方法。通过定义一个泛型类`JsonResult&lt;T&gt;`,包含数据、状态码和提示信息三个属性,满足不同场景下的JSON返回需求。例如,无数据返回时可设置默认状态码&quot;0&quot;和消息&quot;操作成功!&quot;,有数据返回时也可自定义状态码和消息。同时,文章展示了如何在Controller中使用该结构,通过具体示例(如用户信息、列表和Map)说明其灵活性与便捷性。最后总结了Spring Boot中JSON数据返回的配置与实际项目中的应用技巧。
106 0
|
1月前
|
微服务——SpringBoot使用归纳——Spring Boot返回Json数据及数据封装——使用 fastJson 处理 null
本文介绍如何使用 fastJson 处理 null 值。与 Jackson 不同,fastJson 需要通过继承 `WebMvcConfigurationSupport` 类并覆盖 `configureMessageConverters` 方法来配置 null 值的处理方式。例如,可将 String 类型的 null 转为 &quot;&quot;,Number 类型的 null 转为 0,避免循环引用等。代码示例展示了具体实现步骤,包括引入相关依赖、设置序列化特性及解决中文乱码问题。
60 0
|
1月前
|
微服务——SpringBoot使用归纳——Spring Boot返回Json数据及数据封装——Spring Boot 默认对Json的处理
本文介绍了在Spring Boot中返回Json数据的方法及数据封装技巧。通过使用`@RestController`注解,可以轻松实现接口返回Json格式的数据,默认使用的Json解析框架是Jackson。文章详细讲解了如何处理不同数据类型(如类对象、List、Map)的Json转换,并提供了自定义配置以应对null值问题。此外,还对比了Jackson与阿里巴巴FastJson的特点,以及如何在项目中引入和配置FastJson,解决null值转换和中文乱码等问题。
73 0
SpringBoot整合Flowable【06】- 查询历史数据
本文介绍了Flowable工作流引擎中历史数据的查询与管理。首先回顾了流程变量的应用场景及其局限性,引出表单在灵活定制流程中的重要性。接着详细讲解了如何通过Flowable的历史服务API查询用户的历史绩效数据,包括启动流程、执行任务和查询历史记录的具体步骤,并展示了如何将查询结果封装为更易理解的对象返回。最后总结了Flowable提供的丰富API及其灵活性,为后续学习驳回功能做了铺垫。
163 0
SpringBoot整合Flowable【06】- 查询历史数据
Java||Springboot读取本地目录的文件和文件结构,读取服务器文档目录数据供前端渲染的API实现
博客不应该只有代码和解决方案,重点应该在于给出解决方案的同时分享思维模式,只有思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
Java||Springboot读取本地目录的文件和文件结构,读取服务器文档目录数据供前端渲染的API实现
对话即服务:Spring Boot整合MCP让你的CRUD系统秒变AI助手
本文介绍了如何通过Model Context Protocol (MCP) 协议将传统Spring Boot服务改造为支持AI交互的智能系统。MCP作为“万能适配器”,让AI以统一方式与多种服务和数据源交互,降低开发复杂度。文章以图书管理服务为例,详细说明了引入依赖、配置MCP服务器、改造服务方法(注解方式或函数Bean方式)及接口测试的全流程。最终实现用户通过自然语言查询数据库的功能,展示了MCP在简化AI集成、提升系统易用性方面的价值。未来,“对话即服务”有望成为主流开发范式。
2055 7
基于SpringBoot的智慧停车场微信小程序源码分享
智慧停车场微信小程序主要包含管理端和小程序端。管理端包括停车场管理,公告信息管理,用户信息管理,预定信息管理,用户反馈管理等功能。小程序端包括登录注册,预约停车位,停车导航,停车缴费,用户信息,车辆信息,钱包充值,意见反馈等功能。
134 5
基于SpringBoot的智慧停车场微信小程序源码分享
SpringBoot 通过集成 Flink CDC 来实时追踪 MySql 数据变动
通过详细的步骤和示例代码,您可以在 SpringBoot 项目中成功集成 Flink CDC,并实时追踪 MySQL 数据库的变动。
514 43
17.6K star!后端接口零代码的神器来了,腾讯开源的ORM库太强了!
"🏆 实时零代码、全功能、强安全 ORM 库 🚀 后端接口和文档零代码,前端定制返回 JSON 的数据和结构"
微信小程序页面导航与路由:实现多页面跳转与数据传递
本文深入探讨微信小程序的页面导航与路由机制,介绍多种页面跳转方式如`wx.navigateTo`、`wx.redirectTo`、`wx.switchTab`等,并讲解通过URL、全局变量和事件传递数据的方法。结合案例实现多页面跳转与数据传递,帮助开发者掌握这一重要技能。

热门文章

最新文章

AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等