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

交互使用的其实就是调用的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.mzph.cn/news/84215.shtml

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

相关文章

贝叶斯滤波计算4d毫米波聚类目标动静属性

机器人学中有些问题是二值问题&#xff0c;对于这种二值问题的概率评估问题可以用二值贝叶斯滤波器binary Bayes filter来解决的。比如机器人前方有一个门&#xff0c;机器人想判断这个门是开是关。这个二值状态是固定的&#xff0c;并不会随着测量数据变量的改变而改变。就像门…

rv1126-rv1109-test

测试指令 播放音频:aplay aigei.wav 测试时间: 查看系统时间:date 设置时间:date -s "2023-09-21 16:00:00" 设置芯片时间:hwclock -w 查看芯片时间:hwclock 测试背光: echo 0 > sys/class/backlight/backlight/brightness echo 50 > sys/class/backlig…

期权如何交易?期权如何做模拟交易?

买卖期权的第一步就是要有期权账户&#xff0c;国内的期权品种有商品期权和ETF期权以及股指期权&#xff0c;每种的开户方式和要求都不同&#xff0c;下文为大家介绍期权如何交易&#xff1f;期权如何做模拟交易&#xff1f; 一、期权交易需要开立一个期权账户&#xff0c;可以…

【Spring Boot 源码学习】OnBeanCondition 详解

Spring Boot 源码学习系列 OnBeanCondition 详解 引言往期内容主要内容1. getOutcomes 方法2. getMatchOutcome 方法2.1 ConditionalOnBean 注解处理2.2 ConditionalOnSingleCandidate 注解处理2.3 ConditionalOnMissingBean 注解处理 3. getMatchingBeans 方法 总结 引言 上篇…

实战演练 | Navicat 常用功能之转储与运行 SQL 文件

数据库管理工作中&#xff0c;"转储 SQL 文件"和"运行 SQL 文件"是两个极为常见操作。一般来说&#xff0c;用户使用数据库管理工具或命令行工具来完成。Navicat 管理开发工具中的“转储 SQL 文件”和“运行 SQL 文件”功能具有直观易用的界面、多种文件格…

Linux内核源码分析 (B.x)Linux物理内存的初始化

Linux内核源码分析 (B.x)Linux物理内存的初始化 文章目录 Linux内核源码分析 (B.x)Linux物理内存的初始化一、DDR简介二、内存节点三、内存管理区域ZONE四、 struct zone五、 struct page六、mem_map数组七、伙伴系统简介八、迁移类型九、内存初始化十、总结 一、DDR简介 详细可…

threejs给3d模型中的物体换肤(修改材质)

变成这样 this.otherModel.traverse(function (child) {if (child instanceof THREE.Mesh && child.name Cylinder240) {// 导入纹理const textureLoader new THREE.TextureLoader();const floorColortextureLoader.load(require(../../../public/img/color.jpg));co…

5个GitHub热门算法岗面试攻略,附资源下载

最近听行内的大佬们讨论&#xff0c;说今年的秋招情况依旧卷的激烈&#xff0c;不知道大家有没有都拿到满意的offer&#xff1f; 已经拿到的同学我先给赞个&#xff0c;还没有获得心仪offer的同学也不要着急&#xff0c;当下最该做的就是抓紧时间提升自己的硬实力&#xff0c;…

openssl创建CA证书教程

配置生成CA证书 总示意图&#xff1a; (1)&#xff0c;通过openssl创建CA证书 第一步&#xff1a;创建一个秘钥&#xff0c;这个便是CA证书的根本&#xff0c;之后所有的东西都来自这个秘钥 # 通过rsa算法生成2048位长度的秘钥 openssl genrsa -out myCA.key 2048 第二步&#…

小谈设计模式(5)—开放封闭原则

小谈设计模式&#xff08;5&#xff09;—开放封闭原则 专栏介绍专栏地址专栏介绍 开放封闭原则核心思想关键词概括扩展封闭 解释抽象和接口多态 代码示例代码解释 优缺点优点可扩展性可维护性可复用性高内聚低耦合 缺点抽象设计的复杂性需要预留扩展点可能引入过度设计 总结 专…

uniapp 使用subNVue原生子窗体显示弹框或悬浮框

效果展示 在uniapp中&#xff0c;我们可以使用subNVue原生子窗体来解决web-view等原生页面中弹框无法显示的问题。 subNVue原生子窗体是uniapp提供的一种原生组件&#xff0c;可以在uniapp中嵌入原生页面&#xff0c;并且可以与uniapp页面进行通信。我们可以在原生页面中使用…

前后端分离的低代码快速开发框架

低代码开发正逐渐成为企业创新的关键工具。通过提高开发效率、降低成本、增强灵活性以及满足不同用户需求&#xff0c;低代码开发使企业能够快速响应市场需求&#xff0c;提供创新解决方案。选择合适的低代码平台&#xff0c;小成本组建一个专属于你的应用。 项目简介 这是一个…

Vue.js的服务器端渲染(SSR):为什么和如何

&#x1f337;&#x1f341; 博主猫头虎&#xff08;&#x1f405;&#x1f43e;&#xff09;带您 Go to New World✨&#x1f341; &#x1f984; 博客首页——&#x1f405;&#x1f43e;猫头虎的博客&#x1f390; &#x1f433; 《面试题大全专栏》 &#x1f995; 文章图文…

开户期权必看!期权有什么好的平台,优势在哪里?

有50W满足上述期权开户条件的可以选择在证券或者期货券商端口开通,不过都只能线下去柜台营业部开通。不满足可以选择第三方期权分仓开户,下文介绍开户期权必看&#xff01;期权有什么好的平台&#xff0c;优势在哪里&#xff1f;本文来自&#xff1a;期权酱 一、开户期权基础知…

js中如何实现一个简单的防抖函数?

聚沙成塔每天进步一点点 ⭐ 专栏简介⭐ 防抖函数⭐ 使用示例⭐ 写在最后 ⭐ 专栏简介 前端入门之旅&#xff1a;探索Web开发的奇妙世界 记得点击上方或者右侧链接订阅本专栏哦 几何带你启航前端之旅 欢迎来到前端入门之旅&#xff01;这个专栏是为那些对Web开发感兴趣、刚刚踏…

Linux——(第十一章)软件包管理

目录 一、RPM 1.概述 2.RPM查询指令 3.RPM卸载指令 4.RPM安装命令 二、YUM 1.概述 2.YUM常用命令 一、RPM 1.概述 RPM&#xff08;RedHat Package Manager&#xff09;&#xff0c;RedHat软件包管理工具&#xff0c;类似windows里面的setup.exe是Linux这系列操作系统里…

Hadoop初识及信息安全(大数据的分布式存储和计算平台)

目录 什么是Hadoop Hadoop的特点 Hadoop优点 Hadoop的缺点 Hadoop的重要组成 信息安全 什么是Hadoop Hadoop 是一个适合大数据的分布式存储和计算平台。 Hadoop的广义和狭义区分&#xff1a; 狭义的Hadoop:指的是一个框架&#xff0c;Hadoop是由三部分组成&#xff1a;H…

机器视觉-标定篇

3D结构光标定 结构光视觉的优点&#xff1a; 非接触、信息量大、测精度高、抗干扰能力强。 结构光视觉传感器参数的标定包括&#xff1a;摄像机参数标定、结构光平面参数标定。 结构光视觉测量原理图 我们不考虑镜头的畸变&#xff0c;将相机的成像模型简化为小孔成像模型…

ClickHouse面向列的数据库管理系统(原理简略理解)

目录 官网 什么是Clickhouse 什么是OLAP 面向列的数据库与面向行的数据库 特点 为什么面向列的数据库在OLAP场景中工作得更好 为什么ClickHouse这么快 真实的处理分析查询 OLAP场景的关键属性 引擎作用 ClickHouse引擎 输入/输出 CPU 官网 https://clickhouse.com…

Flink-CDC 抽取SQLServer问题总结

Flink-CDC 抽取SQLServer问题总结 背景 flink-cdc 抽取数据到kafka 中&#xff0c;使用flink-sql进行开发&#xff0c;相关问题总结flink-cdc 配置SQLServer cdc参数 1.创建CDC 使用的角色, 并授权给其查询待采集数据数据库 -- a.创建角色 create role flink_role;-- b.授权…