Vue mock & vue-resource & JSONP
前提
為什麼要運用Mock模擬資料？直接將資料放在data內部不就可以了嗎？這樣顯得資料過多，後期不利於維護。
直接在某個資料夾下建立json檔案模擬，不就可以了嗎？但是你還要計算url相對於某個檔案，好像也挺麻煩的。
相當而言我更喜歡mock..
入門
- 在src目錄下建立一個mock資料夾，在該資料夾內部建立相關的data.json檔案。
- 在build配置資料夾下找到dev-server.js檔案，在內部引入你的json檔案，可以按照相關的資料進行分類。
- 再找到var app = express()這一行，定義一個介面api
- 介面連線json資料
- 最後根元件連線該介面api
看文字肯定很難理解的啦，以下根據圖來講解。
步驟一、
模擬的json檔案..
步驟二、
步驟三、
步驟四、
步驟五、
步驟六、
這樣就完成啦，開啟localhost:port/people/suoz，輸出這樣的資料
注：如果你需要格式化資料看得更方便點，chrome有一個jsonview外掛可以幫助你。
注：如果你想分為localhost:port/student/suoz 與 localhost:port/teacher/lisi。那麼你需要分別設定兩個apiRouter，在通過app.use(‘/student’,apiRouter1)、app.use(‘teacher’, apiRouter2)即可實現啦。
參考文章
Vue-Resource
越來越多的資料格式是json格式，而且在jquery框架裡面有個ajax可以實現前後端資料的傳輸。
在vue內部也提供了一個類似的外掛，並且api更加簡潔易用，壓縮後體積更小。
一般可以放在created()鉤子函式中使用
安裝
npm install vue-resource 步驟
- 引入vue-resource
import Vue from 'vue'
import VueResource from 'vue-resource'
Vue.use(VueResource)- 在某個元件內部created鉤子函式內部進行資料的獲取
...
created () {
this.$http.get('/people/suoz').then((response) => {
console.log(response.data);
}, () => {
console.log('error');
});
}
...注：這裡的this指向Vue例項，而且也不止是get方法，還有post等方法。
注：這裡獲取的是使用mock獲取資料，所以url是/people/suoz
this.$http.get(url,[options]).then(successCallback,errorCallback)
options：傳遞給後端的資料
successCallback：成功執行的回撥函式（可以使用箭頭函式）
errorCallback：失敗執行的回撥函式（可以使用箭頭函式）
參考文章
axios
其實與vue-resource使用方法差不多，都需要安裝，引入，相關資料的獲取。後期運用到會補充。
axios.get(url,{
params: {
//[可選] 相關引數
},
headers: {
//[可選] 修改HTTP resquest欄位
}
}).then((response) => {
//成功回撥函式
}).catch((error) => {
//失敗回撥函式
});注：可以通過第二個引數物件內部新增header鍵，對HTTP請求欄位進行修改。
相關介紹
JSONP
這裡我就不多說了..如果不瞭解跨域 & jsonp原理請自行百度吧..
前提
npm install jsonp --save-devJsonp封裝函式
//jsonp.js
import originJsonp from 'jsonp';
//Jsonp封裝函式
export default function jsonp(url, data, option){
if((url.indexOf('?') < 0)){
url += '?' + param(data);
}else{
url += '&' + param(data);
}
return new Promise((resolve, reject) => {
originJsonp(url, option, (err, data) => {
if(!err){
resolve(data);
}else{
reject(err);
}
});
});
}
//傳進來的data物件 => &key1=value1&key2=value2...
export function param(data){
let url = '';
for(let i in data){
let value = data[i];
url += '&' + i + '=' + encodeURIComponent(value);
}
return url ? url.substring(1) : '';
}//使用jsonp獲取資料
import {commonParam} from 'config.js';
import jsonp from 'jsonp.js';
...
mounted () {
let url = 'XXX';
let data = Object.assign({}, commonParam, {
'ownName': 'suoz',
'ownAge': 20
});
jsonp(url,data,'jsonpCallBack').then((response) => {
var obj = response.data;
this.data = obj;
});
}
...後端介面代理
以前學過http協議，如果想請求一個外部網站的資料，但是它指定了特定Referer和Host，導致無法獲取資料，這時候怎麼辦呢？
嘻嘻，其實也是有辦法的，前端是無法更改Referer和Host發起HTTP請求，可以通過後端代理的方式修改。
假設這裡的Host: XXXX，而不是localhost:8080、Referer: XXXX，也不是localhost:8080。
- 進入build目錄，開啟dev-serve.js檔案。
- 再找到var app = express()這一行，定義一個介面api
- 在api內部定義一個axios.get()方法，進行相關的http請求欄位修改，並通過res.query把使用者自定義的引數傳入給伺服器。
- axios返回的伺服器端資料在成功函式內部返回給自己的伺服器res.json(response.data)
- 通過ajax傳送的請求url為定義介面時的url，這時候可以獲取到資料啦。
講得自己都混亂了…
注：這裡假設獲取資料
url：http://data.com
Host： data.com
Referer： data.com
步驟
一、
npm install axios --save-dev二、進入build目錄，開啟dev-serve.js檔案，再引入axios
var axios = require('axios');注：這裡不是通過import引入，而是通過require…
三、再找到var app = express()這一行，定義一個介面api
//dev-serve.js
...
var apiRouter = express.Router();
apiRouter.get('/getData',(req,res) => {
axios.get('http://data.com',{
headers: {
Host: 'data.com',
Referer: 'data.com'
},
pramas: req.query()
}).then((response) => {
//將外部獲取的資料返回給本伺服器
res.json(response.data);
}).catch((error) => {
console.log(error);
});
});
app.use('/api', apiRouter);四、本地也傳送一個ajax請求 url為/api/getData
//公共的引數放在config.js檔案下
import {CommonParams} from 'config.js';
//任何一個想獲取資料的元件
...
created () {
//自定義的引數
let OwnParamas = {
'format': 'json',
'name': 'suoz'
};
axios.get('/api/getData',{
params: {
CommonParams,
OwnParams
}
}).then((response) => {
let obj = response.data;
console.log(obj);
})
}
...
總結
必須在build資料夾下的dev-serve.js檔案下定義一個介面，然後通過axios傳送修改過欄位的HTTP請求給網路伺服器端，獲取資料後在將資料返回給本地伺服器。本地在進行ajax請求訪問定義好的介面路徑，從而獲取介面返回的資料（最關鍵的一點就是params: res.query和res.json(response.data)）。