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

前言

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

步骤

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 //获取数据})}});}})

1.3 启动效果

在这里插入图片描述

三、Vue搭建后台管理

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

1.1 项目结构

在这里插入图片描述

1.2 启动效果

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

四、测试效果

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

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

五、后语

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/8159.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【IDE 小程序】小程序控制台 不打印 console.log问题

小程序控制台 不打印 console.log问题 全局搜索compress.drop_console&#xff08;一般在config文件中&#xff09;&#xff0c;设置为false&#xff0c;再重新打开小程序即可

【JUC-7】ReentrantLock (可重入锁)基础

ReentrantLock (可重入锁) ReentrantLock实现了Lock接口, 内部通过继承AQS, 实现了一个同步器. 可以通过同步器来创建Condition条件变量, 可以用作容器, 存放不同条件的等待线程. 说明ReentrantLock与AQS的关系 类图: 相对于synchronized, 都支持可重入. 它还具备如下特点: …

对弈人工智能!myCobot 280开源六轴机械臂Connect 4 四子棋对弈

Connect 4 myCobot280 Introduction Hi,guys.今天我们来介绍一下人工智能下棋&#xff0c;我们将用机械臂来作为对手跟你进行下棋。 人工智能下棋的研究可以追溯到20世纪50年代。当时&#xff0c;计算机科学家开始探索如何编写程序&#xff0c;使计算机能够下象棋。其中最著…

Linux 解决root用户被限制连接服务器

Linux 解决root用户被限制连接服务器 1. 问题描述2. 解决问题2.1 方式一&#xff08;忘记root密码的情况&#xff09;2.2 方式二&#xff08;知道root密码的情况&#xff09; 3. 其他 1. 问题描述 使用 root 用户不能链接服务器&#xff0c;密码对&#xff0c;就是连接不上&am…

VBA之正则表达式(42)-- 快速提取名称

实例需求&#xff1a;A列为待处理数据&#xff0c;现需要从中提取商品名、通用名、胰岛素笔相关信息&#xff0c;保存到B列至D列&#xff0c;需要注意如下几点&#xff1a; 胰岛素笔&#xff08;E列&#xff09;数据只存在于每组产品的第一行记录中&#xff0c;例如第2行数据中…

Apikit 自学日记:保存、使用测试用例

API测试用例是SaaS版本企业版才能使用的功能&#xff0c;免费版用户可通过付费升级后使用。 API管理应用中的测试用例管理涉及到两个场景&#xff1a;单接口测试用例管理 和 多接口测试用例批量测试。 一、单接口测试用例管理 功能入口&#xff1a;API管理应用 / 选中某个项目…

vscode copilot长时间没反应

检测问题 首先看一下OUPUT插件信息有什么异常 如果没有异常&#xff0c;但是也没输出 那是请求没有相应的原因 可以在vscode里设置一下代理 参考&#xff1a;https://github.com/orgs/community/discussions/29127

ArcPy学习心得系列(5)遥感数据中值滤波与均值滤波实现方法(不计入NoDATA)

在数据处理与应用的过程中,我们难免会遇到一些低质量的遥感数据,低质量遥感数据一般是由于天气因素导致的,在云量较多时,卫星传感器所采集到的地面信息被云层所遮挡,导致遥感图像成像过程中产生了较多噪声,对遥感数据的精确度造成了一定影响,如果不解决这些数据中的噪声…

【UE5 Cesium】05-Cesium for Unreal 在子关卡中添加Actor

上一篇&#xff1a;【UE5 Cesium】04-Cesium for Unreal 将不同地区的倾斜摄影作为不同子关卡 步骤 首先将关卡切换到“DenverRooftop” 添加一个“立方体” 将关卡切换到“Globe” 然后再向场景中添加一个“椎体” 此时如果我们将关卡切换到“Boston”&#xff0c;只能看到“…

我的毕业故事

前言 2023年6月25日&#xff0c;在拿到双证(毕业证书/学士学位证书)之后&#xff0c;我正式毕业&#xff0c;结束了本科学习阶段。 由于毕业设计中了盲审&#xff0c;因此在大致顺利的过程中平添了不少故事&#xff0c;这里就对近两个月做一个回顾。 盲审 首先解释一下什么…

c++高性能264/265实时h5流媒体服务器前后端整体解决方案

c高性能264/265实时h5流媒体服务器前后端整体解决方案 1.效果展示 下图展示了前端播放效果。 播放1路264视频流&#xff0c;4路265视频流 CPU占用率10%(测试机器上运行着c服务端和其他工具程序) GPU0占用率17% 1.1 作者测试机器配置 处理器 11th Gen Intel Core™ i7-118…

AI 语音 - 人物音色训练

前情提要 2023-07-02 周日 杭州 阴晴不定 AI 入门三大项&#xff0c;AI 绘画基础学习&#xff0c;AI 语音合成&#xff0c;AI 智能对话训练&#xff0c;进入 AI 语音合成阶段了&#xff0c;搓搓小手很激动的&#xff0c;对于一个五音不全的我来说&#xff0c;这个简直了(摆脱…