7.【nuxt起步】-Nuxt與後端數據交互

接下來就是對接服務端接口，展現真實的數據

1.作了個虛擬接口地址：http://test.yms.cn/testjson.asp

輸出數據：

{

　　"title": "單間出租",

　　"price": "350.0元/月",

　　"type": "1室1廳1衛",

　　"square": "2",

　　"keyWord": [{"word": "牀"}, {"word": "可作飯"}, {"word": "獨立衛生間"}],

　　"danjia": "17",

　　"xiaoqu": "王店鎮寶華村",

　　"floor": "低層/1層",

　　"fwtype": "普通住宅",

　　"toward": "不限朝向",

　　"decor": "普通裝修",

　　"deposit": "押1付1",

　　"linkman": "王先生",

　　"area": "秀洲區商業區",

　　"fid": "70823",

　　"address": "王店鎮寶華村",

　　"desc": "交通便利能夠仃車院子大",

　　"headimg": "https://www.vyuan8.com/vyuan/source/plugin/vyuan_fangchan/static/images/avatar.png",

　　"faburen": "王先生"

}

 

2.Nuxt 請求接口 須要用到axios  ，能夠先搜索引擎練習下axios

 

cnpm install @nuxtjs/axios --save

3.plugins目錄新建axios.js

編碼：

import * as axios from 'axios'

let options ={}

//須要全路徑才能工做

if(process.server){

　　options.baseURL=`http://${process.env.HOST || 'localhost'}:${process.env.PORT || 3000}/api`

}

export default axios.create(options)

4.Nuxt.config.js增長axios配置

 

modules:[

　　'@nuxtjs/axios'

],

 

 

5.先來個測試：

 

輸出：

 

Network沒有結果，但consloe有輸出了

 

由於axios是異步的，稍微改造下

 

async asyncData({

　　app

}){

　　let res =await axios({

　　headers: { 'Content-Type': 'application/x-www-form-urlencoded' },

　　method: 'get',

　　url: `http://test.yms.cn/testjson.asp`,

　　data: ''

　　})

　　console.log(res)

},

 

 

 

 這時候console打印出結果了，可是 chrome中的network沒有找到請求了,這是什麼緣由呢，其實這就是nuxt的特色，若是它出如今network，其實就是ajax異步請求了，那麼seo不支持ajax，其實nuxt就是異步把網絡請求了而後再render出來，性能上確定有稍微的消耗，但基本差異不大，小的應用能夠忽略，改造下：

 

async asyncData({

　　app

}){

　　let res =await axios({

　　headers: { 'Content-Type': 'application/x-www-form-urlencoded' },

　　method: 'get',

　　url: `http://test.yms.cn/testjson.asp`,

　　data: ''

　　})

　　console.log(res.data.title)

　　return{

　　testData:res.data.title

　　}

},

 

 

刷新：

 

輸出正確