微信小程序与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.hqwc.cn/news/109235.html

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

相关文章

【Docker】ubuntu20.04 X86机器搭建NVIDIA ARM64 TX2的Docker镜像

文章目录 1. 设置ubuntu为清华源1.1 备份源文件1.2 替换清华源1.3 更新清华源 2. Ubuntu Docker 安装3. 安装qemu4. 安装Nvidia TX2 Docker镜像5. 如何使用TX2容器6. 参考资料 1. 设置ubuntu为清华源 为了后面ubuntu下载安装软件快些&#xff0c;需要使用国内的源&#xff0c;…

【Redis】深入探索 Redis 的数据类型 —— 列表 List

文章目录 一、List 类型介绍二、List 类型相关命令2.1 LPUSH 和 RPUSH、LPUSHX 和 RPUSHX2.2 LPOP 和 RPOP、BLPOP 和 BRPOP2.3 LRANGE、LINDEX、LINSERT、LLEN2.4 列表相关命令总结 三、List 类型内部编码3.1 压缩列表&#xff08;ziplist&#xff09;3.2 链表&#xff08;lin…

助力涵洞场景安全智能巡检,基于yolov7/yolov7x/yolov7e6e开发构建基体建筑缺陷问题检测识别系统

涵洞场景下的安全智能化巡检对于保障设施的正常运行有着重要的意义&#xff0c;在道路、公路、隧道、桥梁等场景下我们都已有实际的项目实践开发&#xff0c;而基于涵洞场景下的数据还未有过尝试&#xff0c;本文的核心目的就是想要构建基于涵洞场景下的智能化目标检测识别系统…

【Vue】大悟!模板语法-插值语法指令语法

模板语法 Vue模板语法包括两大类 插值语法 插值语法也就是两个大括号&#xff0c;也叫Mustache 功能&#xff1a;用于解析标签体内容&#xff0c;可以进行运算、三元表达式等,将最终解析出来的内容插入到标签中 写法&#xff1a;{{xxx}}&#xff0c;xxx 是 js 表达式&…

OPENCV--Haar+Tesseract车牌识别;

车牌识别步骤 说明:Haar级联器仅用于定位车牌的位置,Tesseract用于提取其中的内容; 实现步骤: 1、Haar级联器定位车牌位置; 2、车牌预处理操作(二值化、形态学、滤波去噪、缩放); 3、调用Tesseract进行文字识别; 注意:这里需要预先安装Tesseract; # -*- cod…

腾讯云4核8G服务器CVM S5性能测评(CPU/流量/系统盘)

腾讯云4核8G服务器CVM标准型S5实例性能测评&#xff0c;包括CPU型号、内存、系统盘、CVM实例规格性能测评&#xff0c;腾讯云4核8G租用优惠价格表&#xff0c;腾讯云服务器网分享腾讯云4核8G服务器CVM S5性能测评和租用费用&#xff1a; 目录 腾讯云4核8G服务器CVM S5性能测评…

【Vue】vue2使用pdfjs预览pdf文件,在线预览方式一,pdfjs文件包打开新窗口预览pdf文件

系列文章目录 【Vue】vue2预览显示quill富文本内容&#xff0c;vue-quill-editor回显页面&#xff0c;v-html回显富文本内容 【Vue】vue2项目使用swiper轮播图2023年8月21日实战保姆级教程 【Vue】vue2使用pdfjs预览pdf文件&#xff0c;在线预览方式一&#xff0c;pdfjs文件包…

openGauss学习笔记-69 openGauss 数据库管理-创建和管理普通表-更新表中数据

文章目录 openGauss学习笔记-69 openGauss 数据库管理-创建和管理普通表-更新表中数据 openGauss学习笔记-69 openGauss 数据库管理-创建和管理普通表-更新表中数据 修改已经存储在数据库中数据的行为叫做更新。用户可以更新单独一行、所有行或者指定的部分行。还可以独立更新…

Java基础语法之数组

&#x1f495;十年生死两茫茫&#xff0c;不思量&#xff0c;自难忘&#x1f495; 作者&#xff1a;Mylvzi 文章主要内容&#xff1a;Java学习之--数组 一.数组的基本概念 1.定义 数组是相同数据类型的集合&#xff01;使用数组来存放多个相同类型的数据&#xff01; 2.Jav…

【JAVA】String类

作者主页&#xff1a;paper jie_的博客 本文作者&#xff1a;大家好&#xff0c;我是paper jie&#xff0c;感谢你阅读本文&#xff0c;欢迎一建三连哦。 本文录入于《JAVASE语法系列》专栏&#xff0c;本专栏是针对于大学生&#xff0c;编程小白精心打造的。笔者用重金(时间和…

c++ 中的函数指针

以下图片演示了c中函数指针的用法。如下图可见&#xff0c;把函数地址赋值给函数指针&#xff0c;用函数名或者函数名的地址&#xff0c;都可以&#xff0c;c编译器不报错。即 ptr f 和 ptr &f 都对。但准确的话&#xff0c;函数名就是地址&#xff0c;在编译时候&#x…

学Python的漫画漫步进阶 -- 第二步

学Python的漫画漫步进阶 -- 第二步 二、编程基础那点事2.1 标识符2.2 关键字2.3 变量2.4 语句2.5 代码注释2.6 模块2.7 动动手——实现两个模块间的代码元素访问2.8 练一练2.9 标识符的总结全部16步完成后 &#xff0c;后续就是介绍项目实战&#xff0c;请大家给予点赞、关注&a…