如何交互

交互使用的其實就是調(diào)用的req.get('url')方法 進行路徑訪問，你要先保證自己的springboot項目已經(jīng)成功運行了：

如下：

如何交互的？

微信小程序：如下為index.js頁面

?在onLoad()事件中調(diào)用方法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')
  }
}

?該方法就是去調(diào)用RequestMapping映射的路徑

????crud方法格式都一致，你想加方法直接再加一個就行，mapping映射對應上就行

下面來解釋如何調(diào)用的：?

也就是使用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://pan.baidu.com/s/1aYpoDVsWk9OYOz2ydBnzjQ?pwd=ob4s?
提取碼：ob4s

具體看我這篇開發(fā)記錄：

https://blog.csdn.net/m0_47010003/article/details/132756856https://blog.csdn.net/m0_47010003/article/details/132756856調(diào)用的業(yè)務邏輯盤完了，

接下來

回到index.js頁面的onLoad()方法里面(調(diào)用project.js頁面代碼中定義的findAllCities()方法)

?如何循環(huán)遍歷獲取到List<String>類型的數(shù)據(jù)，并賦值給data中的數(shù)組變量？

?如上圖，獲取到的數(shù)據(jù)，使用setData賦值給cities

使用如下圖所示 方法，map()

?map()是遍歷res.data中的所有數(shù)據(jù)，

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

上面的city相當于item的概念，把每個item都設置成key:value的格式，包括value和label

?如果springboot項目返回的是List<User>類型的數(shù)據(jù)

    let self = this
    //城市列表數(shù)據(jù)從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.zghlxwxcb.cn/news/detail-712684.html

到了這里，關(guān)于微信小程序與idea后端如何進行數(shù)據(jù)交互的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！