欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue前端如何接收后端傳過來的帶list集合的數(shù)據(jù)

 更新時間：2024年02月28日 15:24:51   作者：cgv3  
這篇文章主要介紹了vue前端如何接收后端傳過來的帶list集合的數(shù)據(jù),前后端交互,文中的示例Json報文,前端采用vue進行接收,本文結(jié)合實例代碼給大家介紹的非常詳細(xì),感興趣的朋友一起看看吧

前后端交互，如下的示例Json報文，前端采用vue進行接收.

{
	rootId: '',
	nodes: [],
	lines: []
}

1、前端接收響應(yīng)結(jié)果

//在vue的調(diào)用方法體內(nèi)，調(diào)后端的接口，獲取響應(yīng)數(shù)據(jù)，復(fù)制給前端定義的Json對象，拿去做處理
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)對象
 */
@Data
@AllArgsConstructor
@NoArgsConstructor
public class Result {
    private String rootId;
    private List<Demo1> nodes;
    private List<Demo2> lines;
}

到此這篇關(guān)于vue前端接收后端傳過來的帶list集合的數(shù)據(jù)的文章就介紹到這了,更多相關(guān)vue接收list集合數(shù)據(jù)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

  • 如何正確快速使用Vue中的插槽和配置代理

    如何正確快速使用Vue中的插槽和配置代理

    這篇文章主要介紹了正確快速使用Vue中的插槽和配置代理的相關(guān)知識,插槽分為三種，分別是默認(rèn)插槽、具名插槽、作用域插槽，下面分別列出了如何使用這三種插槽，需要的朋友可以參考下
    2023-01-01
  • vue將html頁面生成高清晰pdf文件的方法

    vue將html頁面生成高清晰pdf文件的方法

    最近工作中遇到個需求,需要實現(xiàn)個可視化圖表頁的PDF文件導(dǎo)出,所以下面這篇文章主要給大家介紹了關(guān)于利用vue如何將html頁面生成高清晰pdf文件的相關(guān)資料,需要的朋友可以參考下
    2022-03-03
  • Element?Plus組件Form表單Table表格二次封裝的完整過程

    Element?Plus組件Form表單Table表格二次封裝的完整過程

    一般在后臺管理系統(tǒng)的開發(fā)中,都會遇到很多table,但每一次都去引入el-table就會導(dǎo)致代碼十分冗余,所以基于組件做一下二次封裝成自己需要的組件就十分nice,下面這篇文章主要給大家介紹了關(guān)于Element?Plus組件Form表單Table表格二次封裝的相關(guān)資料,需要的朋友可以參考下
    2022-09-09
  • vue2 中使用 render 函數(shù)編寫組件的方式

    vue2 中使用 render 函數(shù)編寫組件的方式

    vue提供了聲明式編寫UI的方式,即vue提供了對DOM進行描述的方式,有兩種描述DOM的方式即模板和render 函數(shù),本文通過示例代碼介紹vue2 中使用 render 函數(shù)編寫組件的方式,感興趣的朋友跟隨小編一起看看吧
    2024-06-06
  • vue中npm如何設(shè)置倉庫地址

    vue中npm如何設(shè)置倉庫地址

    在使用npm命令時,如果直接從國外的倉庫下載依賴,下載速度很慢,甚至?xí)螺d不下來,我們可以更換npm的倉庫源,提高下載速度,這篇文章主要給大家介紹了關(guān)于vue中npm如何設(shè)置倉庫地址的相關(guān)資料,需要的朋友可以參考下
    2023-12-12
  • 使用 Vue-TCB 快速在 Vue 應(yīng)用中接入云開發(fā)的方法

    使用 Vue-TCB 快速在 Vue 應(yīng)用中接入云開發(fā)的方法

    這篇文章主要介紹了如何使用 Vue-TCB 快速在 Vue 應(yīng)用中接入云開發(fā),本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值，需要的朋友可以參考下
    2020-02-02
  • 怎樣在vue項目下添加ESLint的方法

    怎樣在vue項目下添加ESLint的方法

    這篇文章主要介紹了怎樣在vue項目下添加ESLint的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2019-05-05
  • 查找Vue中下標(biāo)的操作(some和findindex)

    查找Vue中下標(biāo)的操作(some和findindex)

    這篇文章主要介紹了查找Vue中下標(biāo)的操作(some和findindex)，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
    2020-08-08
  • vue開發(fā)環(huán)境配置跨域的方法步驟

    vue開發(fā)環(huán)境配置跨域的方法步驟

    本文介紹了使用vue-cli搭建的項目在開發(fā)時配置跨域，上線后不做任何任何修改，接口也可以訪問，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2019-01-01
  • 詳解關(guān)于表格合并span-method方法的補充(表格數(shù)據(jù)由后臺動態(tài)返回)

    詳解關(guān)于表格合并span-method方法的補充(表格數(shù)據(jù)由后臺動態(tài)返回)

    這篇文章主要介紹了詳解關(guān)于表格合并span-method方法的補充(表格數(shù)據(jù)由后臺動態(tài)返回) ，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2019-05-05

最新評論