交互使用的其实就是调用的**req.get('url')**方法 进行路径访问,你要先保证自己的springboot项目已经成功运行了:
如下:
如何交互的?
微信小程序:如下为++index.js++页面
![](https://file.jishuzhan.net/article/1704795241162215426/bafe1ac0fe9c49259c9e385501b7d795.png)
在onLoad()事件 中调用方法Project.findAllCities()
要在当前js页面中先引入project.js 别名Project (++只要写相对路径就行,后缀名.js不写++)
![](https://file.jishuzhan.net/article/1704795241162215426/840e386749604f389edc3e4b07c92a56.png)
project.js页面代码中定义的findAllCities()方法如下:
javascriptimport 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
![](https://file.jishuzhan.net/article/1704795241162215426/7284fce33a0c47f194f00d717103e30a.png)
request.js页面代码:
javascriptimport 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是
![](https://file.jishuzhan.net/article/1704795241162215426/f00d13204dc640f0aae7583650bf79a5.png)
如上node_modules中定义的wechat-request是新建TDesign时导入的
具体看我这篇开发记录:
接下来
回到index.js页面的onLoad()方法里面(调用project.js页面代码中定义的findAllCities()方法)
如何循环遍历获取到List<String>类型的数据,并赋值给data中的数组变量?
![](https://file.jishuzhan.net/article/1704795241162215426/eed15dbacaf04ac88a1909d5ec36c89d.png)
如上图,获取到的数据,使用setData赋值给cities
![](https://file.jishuzhan.net/article/1704795241162215426/05696905aca349f7a5410300329bf608.png)
使用如下图所示 方法,map()
map()是遍历res.data中的所有数据,
city => {return {value: city, label: city}}
上面的city相当于item的概念,把每个item都设置成key:value的格式,包括value和label
![](https://file.jishuzhan.net/article/1704795241162215426/7a5c8f5d4182495fa7152144ca59bbd9.png)
如果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()方法