微信小程序+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 代码解读

在这里插入图片描述

目录
打赏
0
1
0
0
218
分享
相关文章
基于SpringBoot的智慧停车场微信小程序源码分享
智慧停车场微信小程序主要包含管理端和小程序端。管理端包括停车场管理,公告信息管理,用户信息管理,预定信息管理,用户反馈管理等功能。小程序端包括登录注册,预约停车位,停车导航,停车缴费,用户信息,车辆信息,钱包充值,意见反馈等功能。
94 5
基于SpringBoot的智慧停车场微信小程序源码分享
微信小程序与Java后端实现微信授权登录功能
微信小程序极大地简化了登录注册流程。对于用户而言,仅仅需要点击授权按钮,便能够完成登录操作,无需经历繁琐的注册步骤以及输入账号密码等一系列复杂操作,这种便捷的登录方式极大地提升了用户的使用体验
493 12
微信小程序页面导航与路由:实现多页面跳转与数据传递
本文深入探讨微信小程序的页面导航与路由机制,介绍多种页面跳转方式如`wx.navigateTo`、`wx.redirectTo`、`wx.switchTab`等,并讲解通过URL、全局变量和事件传递数据的方法。结合案例实现多页面跳转与数据传递,帮助开发者掌握这一重要技能。
微信小程序网络请求与API调用:实现数据交互
本文深入探讨了微信小程序的网络请求与API调用,涵盖`wx.request`的基本用法、常见场景(如获取数据、提交表单、上传和下载文件)及注意事项(如域名配置、HTTPS协议、超时设置和并发限制)。通过一个简单案例,演示了如何实现小程序与服务器的数据交互。掌握这些技能将帮助你构建功能更丰富的应用。
Java后端开发-使用springboot进行Mybatis连接数据库步骤
本文介绍了使用Java和IDEA进行数据库操作的详细步骤,涵盖从数据库准备到测试类编写及运行的全过程。主要内容包括: 1. **数据库准备**:创建数据库和表。 2. **查询数据库**:验证数据库是否可用。 3. **IDEA代码配置**:构建实体类并配置数据库连接。 4. **测试类编写**:编写并运行测试类以确保一切正常。
114 2
实现跨域请求:Spring Boot后端的解决方案
本文介绍了在Spring Boot中处理跨域请求的三种方法:使用`@CrossOrigin`注解、全局配置以及自定义过滤器。每种方法都适用于不同的场景和需求,帮助开发者灵活地解决跨域问题,确保前后端交互顺畅与安全。
185 0
<大厂实战场景> ~ Flutter&鸿蒙next 解析后端返回的 HTML 数据详解
本文介绍了如何在 Flutter 中解析后端返回的 HTML 数据。首先解释了 HTML 解析的概念,然后详细介绍了使用 `http` 和 `html` 库的步骤,包括添加依赖、获取 HTML 数据、解析 HTML 内容和在 Flutter UI 中显示解析结果。通过具体的代码示例,展示了如何从 URL 获取 HTML 并提取特定信息,如链接列表。希望本文能帮助你在 Flutter 应用中更好地处理 HTML 数据。
186 1
基于人工智能技术的智能导诊系统源码,SpringBoot作为后端服务的框架,提供快速开发,自动配置和生产级特性
当身体不适却不知该挂哪个科室时,智能导诊系统应运而生。患者只需选择不适部位和症状,系统即可迅速推荐正确科室,避免排错队浪费时间。该系统基于SpringBoot、Redis、MyBatis Plus等技术架构,支持多渠道接入,具备自然语言理解和多输入方式,确保高效精准的导诊体验。无论是线上医疗平台还是大型医院,智能导诊系统均能有效优化就诊流程。
167 0
springBoot:后端解决跨域&Mybatis-Plus&SwaggerUI&代码生成器 (四)
本文介绍了后端解决跨域问题的方法及Mybatis-Plus的配置与使用。首先通过创建`CorsConfig`类并设置相关参数来实现跨域请求处理。接着,详细描述了如何引入Mybatis-Plus插件,包括配置`MybatisPlusConfig`类、定义Mapper接口以及Service层。此外,还展示了如何配置分页查询功能,并引入SwaggerUI进行API文档生成。最后,提供了代码生成器的配置示例,帮助快速生成项目所需的基础代码。
441 1

热门文章

最新文章