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

news2024/12/25 9:08:57

交互使用的其实就是调用的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()方法

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

C++面试记录之中望软件

上次面试体验不好&#xff0c;记录了&#xff0c;这次同样记录一次体验不好的面试&#xff0c;中望软件…直接写了名字&#xff0c;因为真的很无语&#x1f613; 记录一下我不知道的问题 忘记录音了&#x1f622; 1. main函数之前做了什么&#xff1f; 我&#xff1a;实话我…

java使用itext生成pdf

效果&#xff1a; maven依赖 <!--PDF处理--><!-- https://mvnrepository.com/artifact/com.itextpdf/itextpdf --><dependency><groupId>com.itextpdf</groupId><artifactId>itextpdf</artifactId><version>5.5.13.3</vers…

SpringMVC:从入门到精通,7篇系列篇带你全面掌握--七.自定义注解

目录 &#x1f973;&#x1f973;Welcome Huihuis Code World ! !&#x1f973;&#x1f973; 一.Java注解简介 1.原生注解的分类 &#xff08;1&#xff09;JDK基本注解 ①Override ②SuppressWarnings(value "unchecked") &#xff08;2&#xff09;JDK元注解…

Golang goroutine MPG模式浅析

协程是通过使用关键字 go 调用&#xff08;或执行&#xff09;一个函数或者方法来实现的&#xff08;也可以是匿名函数&#xff09;。 Go 语言在语言层面上支持了并发&#xff0c;goroutine是Go语言提供的一种用户态线程&#xff0c;有时我们也称之为协程。 所谓的协程&#x…

Generative Adversarial Nets

Author:龙箬 Computer Application Technology Change the World with Data and Artificial Intelligence ! CSDNweixin_43975035 生命不息&#xff0c;折腾不止 Reference&#xff1a; [1] Goodfellow, I, Pouget-Abadie, J, Mirza, M, Xu, B, Warde-Farley, D, Ozair, S, Co…

《优化接口设计的思路》系列:第一篇—接口参数的一些弯弯绕绕

大家好&#xff01;我是sum墨&#xff0c;一个一线的底层码农&#xff0c;平时喜欢研究和思考一些技术相关的问题并整理成文&#xff0c;限于本人水平&#xff0c;如果文章和代码有表述不当之处&#xff0c;还请不吝赐教。 作为一名从业已达六年的老码农&#xff0c;我的工作主…

PSP - 蛋白质序列提取 Transformer 蛋白质语言模型 ESM2 特征

欢迎关注我的CSDN&#xff1a;https://spike.blog.csdn.net/ 本文地址&#xff1a;https://spike.blog.csdn.net/article/details/132888139 蛋白质语言模型 ESM (Evolutionary Scale Modeling) 是一种利用深度学习技术来预测蛋白质结构和功能的方法。ESM 通过在大规模的蛋白质…

激光雷达检测负障碍物(附大概 C++ 代码)

检测效果如图&#xff0c;红色是正负的障碍物点&#xff1a; 障碍物根据其相对于地面的高度可以分为两类&#xff1a;正向障碍物和负向障碍物。在室外环境中&#xff0c;负障碍物是沟渠、悬崖、洞口或具有陡峭负坡度的地形&#xff0c;可能会造成安全隐患。 不慎通过道路坑洼处…

【电子通识】案例:采用电阻分压式采样电压的设计注意事项

在一些应用中,我们往往采用电阻分压方式来采样外部电压。如文章【Arduino+ESP32专题】案例:简单的实现NTC热敏电阻检测板卡温度中我们就使用一个10K的电阻与NTC电阻形成分压,通过ADC读取到的电压换算成温度值来检测外部环境温度。 当然,比如手持机的电池电压,如果没有一些…

docker-compose 中 depends_on 的作用

文章目录 depends_on 介绍depends_on 有一个长定义模式condition 说明required 说明 参考文档 depends_on 介绍 在 Docker Compose 中&#xff0c;depends_on 是一个用于定义服务之间依赖关系的关键字。它允许您指定一个或多个服务依赖于其他服务&#xff0c;以确保在启动或重…

基于STM32F407ZET6的环境温湿度监控系统(粤嵌GEC-M4)

注意使用事项&#xff1a; 开发板如下 由于外部晶振是8M&#xff0c;需要修改setup和stm32f4头文件的晶振值。 操作如下&#xff1a; system_stm32f4xx.c的254行 #define PLL_M 8stm32f4xx.h的127行 #define HSE_VALUE ((uint32_t)8000000) /*!< Value of the Ex…

实战SRC漏洞挖掘全过程,流程详细【网络安全】

前言 记录一次完整的某SRC漏洞挖掘实战&#xff0c;为期一个多星期。文章有点长&#xff0c;请耐心看完&#xff0c;记录了完整的SRC漏洞挖掘实战 渗透过程 因为选择的幸运儿没有对测试范围进行规划&#xff0c;所以此次范围就是没有范围。 先上主域名看一眼&#xff0c;看…

2023 Google 开发者大会 – AI 领域的技术更新

大会介绍 Google 开发者大会是 Google 面向开发者和科技爱好者展示最新产品和平台的年度盛会。2023 Google 开发者大会 (Google I/O Connect | China) 为开发者提供丰富的学习资源&#xff0c;实践操作和现场演示&#xff0c;提供与谷歌专家互动、与其他开发者交流的契机&…

贝锐蒲公英客户端6.0发布,异地组网更快、更简单

贝锐蒲公英客户端6.0全新升级&#xff0c;新版本融合了企业版、个人版和个人管理端&#xff0c;不同身份用户可以统一登录&#xff0c;快速部署&#xff0c;即装即用&#xff0c;为异地组网带来更加简单、高效的解决方案。 快速部署、即装即用&#xff0c;支持不同身份用户统一…

langchain主要模块(三):Chain

langchain2之Chain langchain1.概念2.主要模块模型输入/输出 (Model I/O)数据连接 (Data connection)链式组装 (Chains)代理 (Agents)内存 (Memory)回调 (Callbacks) 3.链• LLMChain&#xff1a;• SimpleSequentialChain• Sequential Chains:• RouterChain&#xff1a; lan…

社群团购平台方的选品,无外乎就几个方面:

社群团购平台方选品&#xff0c;无外乎几个方面&#xff1a; 1、是个主推广爆品&#xff0c;好产品&#xff08;好产品的标准&#xff1a;有卖点&#xff1a;比如&#xff1a;有 品牌力、市场需求力、诱人的性价比等&#xff09; 2、你是否跟社群团购平台方说清楚这个产品的优…

什么是云存储,从对象存储说起?

在《存储系统形态之争,从块存储到统一存储》一文中我们提到了对象存储的概念,知道目前很多企业级存储都是支持对象存储的,比如EMC、NetApp和华为等。以EMC的对象存储为例,其最早在1998年就已经具备成熟的产品了,到目前已经有二十多年的历史了。如图是关于对象存储主要产品…

科研诚信与学术规范MOOC-错题集

为了确保学术和科研诚信&#xff0c;很多大学制定了荣誉法则。大学建立荣誉制度的初衷旨在预防大学生考试作弊。“反相对论公司”是对科学的不当干预。&#xff08;√&#xff09;科学具有普遍性&#xff0c;与种族、国籍、宗教、阶级和个人品质等个人因素无关。&#xff08;不…

GpsModule 350+ 常用GPS坐标地图

背景 开源库 GpsAndMap 的 GpsModule 模块中整理集成了 350 国内常用地市的GPS坐标地址&#xff0c;对于日常使用&#xff0c;例如打些标记&#xff0c;做些PPT展示&#xff0c;是非常方便的。 引入模块 pip install GpsAndMap 打印常用地市GPS地名清单 以下代码打印了常用…

【业务功能109】微服务-springcloud-springboot-Skywalking-链路追踪-监控

Skywalking skywalking是一个apm系统&#xff0c;包含监控&#xff0c;追踪&#xff0c;并拥有故障诊断能力的 分布式系统 一、Skywalking介绍 1.什么是SkyWalking Skywalking是由国内开源爱好者吴晟开源并提交到Apache孵化器的产品&#xff0c;它同时吸收了Zipkin /Pinpoint …