接下來就是對接服務端接口，展示真實的數據
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
}
},
刷新：
輸出正確