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)文章
這篇文章主要介紹了正確快速使用Vue中的插槽和配置代理的相關(guān)知識(shí),插槽分為三種，分別是默認(rèn)插槽、具名插槽、作用域插槽，下面分別列出了如何使用這三種插槽，需要的朋友可以參考下2023-01-01
最近工作中遇到個(gè)需求,需要實(shí)現(xiàn)個(gè)可視化圖表頁(yè)的PDF文件導(dǎo)出,所以下面這篇文章主要給大家介紹了關(guān)于利用vue如何將html頁(yè)面生成高清晰pdf文件的相關(guān)資料,需要的朋友可以參考下2022-03-03
Element?Plus組件Form表單Table表格二次封裝的完整過(guò)程
一般在后臺(tái)管理系統(tǒng)的開(kāi)發(fā)中,都會(huì)遇到很多table,但每一次都去引入el-table就會(huì)導(dǎo)致代碼十分冗余,所以基于組件做一下二次封裝成自己需要的組件就十分nice,下面這篇文章主要給大家介紹了關(guān)于Element?Plus組件Form表單Table表格二次封裝的相關(guān)資料,需要的朋友可以參考下2022-09-09
vue2 中使用 render 函數(shù)編寫組件的方式
vue提供了聲明式編寫UI的方式,即vue提供了對(duì)DOM進(jìn)行描述的方式,有兩種描述DOM的方式即模板和render 函數(shù),本文通過(guò)示例代碼介紹vue2 中使用 render 函數(shù)編寫組件的方式,感興趣的朋友跟隨小編一起看看吧2024-06-06
vue中npm如何設(shè)置倉(cāng)庫(kù)地址
在使用npm命令時(shí),如果直接從國(guó)外的倉(cāng)庫(kù)下載依賴,下載速度很慢,甚至?xí)螺d不下來(lái),我們可以更換npm的倉(cāng)庫(kù)源,提高下載速度,這篇文章主要給大家介紹了關(guān)于vue中npm如何設(shè)置倉(cāng)庫(kù)地址的相關(guān)資料,需要的朋友可以參考下2023-12-12
使用 Vue-TCB 快速在 Vue 應(yīng)用中接入云開(kāi)發(fā)的方法
這篇文章主要介紹了如何使用 Vue-TCB 快速在 Vue 應(yīng)用中接入云開(kāi)發(fā),本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-02-02
這篇文章主要介紹了怎樣在vue項(xiàng)目下添加ESLint的方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-05-05
查找Vue中下標(biāo)的操作(some和findindex)
這篇文章主要介紹了查找Vue中下標(biāo)的操作(some和findindex)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-08-08
vue開(kāi)發(fā)環(huán)境配置跨域的方法步驟
本文介紹了使用vue-cli搭建的項(xiàng)目在開(kāi)發(fā)時(shí)配置跨域，上線后不做任何任何修改，接口也可以訪問(wèn)，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-01-01
詳解關(guān)于表格合并span-method方法的補(bǔ)充(表格數(shù)據(jù)由后臺(tái)動(dòng)態(tài)返回)
這篇文章主要介紹了詳解關(guān)于表格合并span-method方法的補(bǔ)充(表格數(shù)據(jù)由后臺(tái)動(dòng)態(tài)返回) ，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-05-05