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

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

如下:

如何交互的?

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

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

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

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

javascript">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页面代码:

javascript">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>类型的数据

javascript">    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.niftyadmin.cn/n/5026094.html

相关文章

服务器租用机房机房的类型应该如何选择

服务器租用机房机房的类型应该如何选择 1.单电信机房 单电信服务器机房业务模式比较固定&#xff0c;访问量也不是很大&#xff0c;适合新闻类网站或政务类网站。如果网站的PV流量持续增加&#xff0c;建议后期采用租赁CDN的方式解决非电信用户访问网站速度过慢的问题。 2.双线…

Android 中集成 TensorFlow Lite图片识别

在上图通过手机的相机拍摄到的物体识别出具体的名称&#xff0c;这个需要通过TensorFlow 训练的模型引用到项目中&#xff1b;以下就是详细地集成 TensorFlow步骤&#xff0c;请按照以下步骤进行操作&#xff1a; 在项目的根目录下的 build.gradle 文件中添加 TensorFlow 的 Ma…

手写一个HashMap

前言 为了加深对于HashMap的理解&#xff0c;可以手写HashMap理解底层操作原理 我们知道HashMap在jdk1.8之后使用了数组 链表 红黑树的结构&#xff0c;那么在自己实现HashMap的时候需要注意这一点&#xff1b;我将手动实现HashMap的节点、get()、put()方法 1.get()方法的流…

【深度学习】 Python 和 NumPy 系列教程(廿二):Matplotlib详解:2、3d绘图类型(8)3D饼图(3D Pie Chart)

一、前言 Python是一种高级编程语言&#xff0c;由Guido van Rossum于1991年创建。它以简洁、易读的语法而闻名&#xff0c;并且具有强大的功能和广泛的应用领域。Python具有丰富的标准库和第三方库&#xff0c;可以用于开发各种类型的应用程序&#xff0c;包括Web开发、数据分…

Spring续集

6.2、转发视图 SpringMVC中默认的转发视图是InternalResourceView SpringMVC中创建转发视图的情况&#xff1a; 当控制器方法中所设置的视图名称以"forward:"为前缀时&#xff0c;创建InternalResourceView视图&#xff0c;此时的视图名称不会被SpringMVC配置文件中所…

C【分支语句和循环语句】

1.if语句 //多分支 if(表达式1)语句1; else if(表达式2)语句2; else语句3;如果表达式的结果为真&#xff0c;则语句执行。 在C语言中如何表示真假&#xff1f; 0表示假&#xff0c;非0表示真。 #include <stdio.h> int main() {if(表达式){语句列表1&#xff1b;}el…

linux 下实现一个进度条

倒计时 理解 printf 打印的内容是被放在输出缓冲区的 fflush(stdout) 刷新 输出缓冲区&#xff1b;\n 也是一种刷新的策略我们称之为行刷新 理解一下回车换行 首先&#xff1a;回车是回车 换行是换行 回车是回到这一行的开头 换行是换到下一行 所以我们平时使用的 Enter 键 …

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…