vue前端如何接收后端傳過(guò)來(lái)的帶list集合的數(shù)據(jù)
更新時(shí)間：2024年02月28日 15:24:51 作者：cgv3
這篇文章主要介紹了vue前端如何接收后端傳過(guò)來(lái)的帶list集合的數(shù)據(jù),前后端交互,文中的示例Json報(bào)文,前端采用vue進(jìn)行接收,本文結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì),感興趣的朋友一起看看吧
前后端交互，如下的示例Json報(bào)文，前端采用vue進(jìn)行接收.
{
rootId: '',
nodes: [],
lines: []
}1、前端接收響應(yīng)結(jié)果
//在vue的調(diào)用方法體內(nèi)，調(diào)后端的接口，獲取響應(yīng)數(shù)據(jù)，復(fù)制給前端定義的Json對(duì)象，拿去做處理
selectDemoResult(this.queryParams).then( rep => {
const __jsonData = {
rootId: '',
nodes: [],
lines: []
};
__jsonData.rootId = rep.data.rootId;
__jsonData.nodes = rep.data.nodes;
__jsonData.lines = rep.data.lines;
// console.log(jsonData)
//拿著__jsonData去做處理即可
});2、后端組裝響應(yīng)結(jié)果
/**
* 給前端返回響應(yīng)數(shù)據(jù)
*/
@DeleteMapping("/getDemoResult")
public Result getDemoResult(@RequestBody String demoId)
{
return demoService.selectListById(demoId);
}/**
* 返給前端響應(yīng)對(duì)象
*/
@Data
@AllArgsConstructor
@NoArgsConstructor
public class Result {
private String rootId;
private List<Demo1> nodes;
private List<Demo2> lines;
}到此這篇關(guān)于vue前端接收后端傳過(guò)來(lái)的帶list集合的數(shù)據(jù)的文章就介紹到這了,更多相關(guān)vue接收l(shuí)ist集合數(shù)據(jù)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了Vue.js的Class與樣式綁定,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-09-09
在Vue-cli里應(yīng)用Vuex的state和mutations方法
今天小編就為大家分享一篇在Vue-cli里應(yīng)用Vuex的state和mutations方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
vue3父子組件傳值中props使用細(xì)節(jié)淺析
這篇文章主要給大家介紹了關(guān)于vue3父子組件傳值中props使用細(xì)節(jié)的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2022-03-03
vue?鼠標(biāo)移入移出(hover)切換顯示圖片問(wèn)題
這篇文章主要介紹了vue?鼠標(biāo)移入移出(hover)切換顯示圖片問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)換膚功能，一套深色，一套淺色，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-07-07
這篇文章主要介紹了vue中的computed?和?vm.$data?原理，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
vue實(shí)現(xiàn)動(dòng)態(tài)控制表格列的顯示隱藏
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)動(dòng)態(tài)控制表格列的顯示隱藏，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04
這篇文章主要介紹了vue引入靜態(tài)js文件的方法,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-06-06
vue.js實(shí)現(xiàn)數(shù)據(jù)庫(kù)的JSON數(shù)據(jù)輸出渲染到html頁(yè)面功能示例
這篇文章主要介紹了vue.js實(shí)現(xiàn)數(shù)據(jù)庫(kù)的JSON數(shù)據(jù)輸出渲染到html頁(yè)面功能,結(jié)合實(shí)例形式分析了vue.js針對(duì)本地json數(shù)據(jù)的讀取、遍歷輸出相關(guān)操作技巧,需要的朋友可以參考下2019-08-08
vue開(kāi)發(fā)chrome插件，實(shí)現(xiàn)獲取界面數(shù)據(jù)和保存到數(shù)據(jù)庫(kù)功能
這篇文章主要介紹了vue開(kāi)發(fā)chrome插件，實(shí)現(xiàn)獲取界面數(shù)據(jù)和保存到數(shù)據(jù)庫(kù)功能的示例，幫助大家更好的理解和使用vue，感興趣的朋友可以了解下2020-12-12