微信小程序与idea后端如何进行数据交互

2023-09-14 14:12:09

交互使用的其实就是调用的req.get('url')方法 进行路径访问,你要先保证自己的springboot项目已经成功运行了:

如下:

如何交互的?

微信小程序:如下为index.js页面

 在onLoad()事件中调用方法Project.findAllCities()

要在当前js页面中先引入project.js 别名Project (只要写相对路径就行,后缀名.js不写

 project.js页面代码中定义的findAllCities()方法如下:

import req from '../utils/request'
import qs from '../vendor/qs'
import util from '../utils/util'

export default {
  search: function(cnds){
    console.log("------", cnds)
    return req.get('/projects/page-list?' + util.queryStringify(cnds))
  },
  findAllCities:function(){
    return req.get('/projects/city/findAllCities')
  }
}

 该方法就是去调用RequestMapping映射的路径

    crud方法格式都一致,你想加方法直接再加一个就行,mapping映射对应上就行


下面来解释如何调用的: 

也就是使用req.get()方法

那么req也是引入了request.js文件,定义的别名req

 request.js页面代码:

import wxRequest from 'wechat-request';

wxRequest.defaults.baseURL = 'http://localhost:8821'
wxRequest.defaults.headers.post['Content-Type'] = 'application/json';
wxRequest.defaults.headers.put['Content-Type'] = 'application/json';

wxRequest.defaults.headers['token'] = wx.getStorageSync('token');

export default wxRequest

request.js页面引入的wechat-request是

如上node_modules中定义的wechat-request是新建TDesign时导入的

具体看我这篇开发记录:

https://blog.csdn.net/m0_47010003/article/details/132756856icon-default.png?t=N7T8https://blog.csdn.net/m0_47010003/article/details/132756856调用的业务逻辑盘完了,

接下来

回到index.js页面的onLoad()方法里面(调用project.js页面代码中定义的findAllCities()方法)

 如何循环遍历获取到List<String>类型的数据,并赋值给data中的数组变量?

 如上图,获取到的数据,使用setData赋值给cities

使用如下图所示 方法,map()

 map()是遍历res.data中的所有数据,

city => {return {value: city, label: city}}

上面的city相当于item的概念,把每个item都设置成key:value的格式,包括value和label


 如果springboot项目返回的是List<User>类型的数据

    let self = this
    //城市列表数据从Project归属地中查询
    Project.findAllCities().then((res) => {
      console.log("获取到城市有:" + res.data)
      let cs = res.data.map(city => {
        return {
          value: city,
          label: city
        }
      })
      self.setData({
        cities: cs
      })
    })
    Project.findAllUsers().then((res) => {
      console.log("获取到的user有:" + res.data)
      let rcds = res.data.map((rd) => {
        return {
          value: rd.id,
          label: rd.name
        }
      })
      self.setData({
        users: rcds
      })
    })

都是使用res.data.map()方法

更多推荐

Vue中使用VueAMap

npm安装npminstallvue-amap--save注册:高德地图//在main.js中注册:高德地图importVueAMapfrom"vue-amap";Vue.use(VueAMap);VueAMap.initAMapApiLoader({key:"你的高德key",plugin:["AMap.AutoCo

【K8S系列】深入解析k8s网络插件—Flannel

序言做一件事并不难,难的是在于坚持。坚持一下也不难,难的是坚持到底。文章标记颜色说明:黄色:重要标题红色:用来标记结论绿色:用来标记论点蓝色:用来标记论点Kubernetes(k8s)是一个容器编排平台,允许在容器中运行应用程序和服务。今天学习一下k8s网络插件相关知识希望这篇文章能让你不仅有一定的收获,而且可以愉快的

C++ 类(1)

你知道吗,C++类是编程世界中的一种强大工具,它可以帮助我们更好地组织和管理代码。接下来,我将为你呈现一篇近万字的C++类的教程,希望能帮助你熟悉这个概念。首先,让我们从C++类的定义开始。类是一个模板,它描述了一种具有相同属性和行为的数据类型。听起来很复杂吗?别担心,我来给你举个例子。假设我们要创建一个名为"Car"

PostgreSQL 技术内幕(十)WAL log 模块基本原理

事务日志是数据库的重要组成部分,记录了数据库系统中所有更改和操作的历史信息。WALlog(WriteAheadLogging)也被称为xlog,是事务日志的一种,也是关系数据库系统中用于保证数据一致性和事务完整性的一系列技术,在数据库恢复、高可用、流复制、逻辑复制等模块中扮演着极其重要的角色。在这次直播中,我们为大家介

【8B10B编解码及verilog(xilinx example)解析】

8B10B编解码及verilog(xilinxexample)解析编码查表算法解码代码解析极性控制字K码编码8b/10b编码将串行的数据以8bit为一个单位进行编码处理得到一个10bit的数据,具体怎么操作呢,假设原始8位数据从高到低用HGFEDCBA表示,将8位数据分成高3位HGF和低5位EDCBA两个子组。经过5B

成都直播基地火热招商中,天府蜂巢成都直播基地招商政策汇总

随着直播产业的发展,四川天府新区也在逐步形成成熟的直播产业链。近日,记者采访到成都天府蜂巢直播产业基地即将竣工,正式进入运营阶段,作为成都科学城兴隆湖高新技术服务产业园的主打新一代成都直播基地,正积极招商中!引领大规模的平台聚合发展的树莓集团与专注城市资产运营的上市公司德商产投携手打造产业+直播赋能平台——成都天府蜂巢

MyBatis初级

文章目录一、mybatis1、概念2、JDBC缺点2.1、之前jdbc操作2.2、原始jdbc操作的分析3、mybatis的使用3.1、导入maven依赖3.2、新建表3.3、实体类3.4、编写mybatis的配置文件3.5、编写接口和映射文件3.6、编写测试类3.7、注意事项4、代理方式开发5、mybatis和spr

03MyBatis-Plus中的常用注解

常用注解@TableNameMyBatis-Plus根据BaseMapper中指定的泛型(实体类型名)确定数据库中操作的表,如果根据实体类型名找不到数据库中对应的表则会报表不存在异常//向表中插入一条数据@TestpublicvoidtestInsert(){Useruser=newUser(null,"张三",23,

华为云云耀云服务器L实例评测 | Linux系统宝塔运维部署H5游戏

文章目录前言一、云服务器相对传统服务器有什么优势1.1、可伸缩性(Scalability)1.2、灵活性(Flexibility)1.3、高可用性(HighAvailability)1.4、备份和恢复(BackupandRecovery)1.5、成本效益(Cost-Effectiveness)1.6、全球性(Globa

SpringMvc常用注解

目录一、@RequestParam二、@RequestHeader,@CookieValue三、@ModelAttribute(1)作用1(2)作用2四、@ResponseBody五、@RestController六、@RequestBody一、@RequestParam@RequestParam可以在控制器方法中获取

Java线程池ExecutorService和Executors应用(Spring Boot微服务)

记录:476场景:在SpringBoot微服务中使用ExecutorService管理Java线程池。使用Executors创建线程池。使用Runnable接口实现类提交线程任务到线程池执行。版本:JDK1.8,SpringBoot2.6.3。1.线程和线程池基础JDK自带线程和线程池包位置:java.util.con

热文推荐