Vue Axios前後端數據交互（三）

Axios
中文：https://www.kancloud.cn/yunye/axios/234845
github：https://github.com/axios/axios
1.安裝
npm install axios
2.引入載入
import Axios from "axios"
Vue.prototype.\(axios = Axios 3.請求 get請求： this.\)axios("http://www.wwtliu.com/sxtstu/news/juhenews.php",{
params:{
type:"junshi",
count:30
}
})
.then(res => {
this.newsData = res.data;
console.log(res.data);
})
.catch(error => {
console.log(error);
})
post請求：
form-data:?name=iwen&age=20
x-www-form-urlencoded:{name:"iwen",age:20}
註意：axios接受的post請求參數的格式是form-data格式
this.$axios.post("http://www.wwtliu.com/sxtstu/blueberrypai/login.php", qs.stringify({
user_id:"[email protected]",
password:"iwen123",
verification_code:"crfvw"
}))
.then(res => {
console.log(res.data)
})
.catch(error => {
console.log(error);
})
4.全局的 axios 預設值
axios.defaults.baseURL = 'https://api.example.com';
axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
5.攔截器

6.跨域處理：
    修改config index.js文件
        proxyTable: {
            "/api": {
                target: "http://localhost:3000",
                changeOrigin: true,
                pathRewrite: {
                    '^/api': ''
                }
            }
        }
    添加host
        Vue.prototype.HOST = '/api'
    註意：此種跨域解決方案，只能適用於測試階段，打包的時候，不會具備伺服器
          不能跨域了，後端解決。
    

Mock：數據模擬
1.自己創建JSON文件。使用get請求形式訪問數據
優點：方便，快捷
缺點：只能存在get請求
2.項目中集成伺服器，模擬各種介面
優點：模擬真實線上環境
缺點：增加開發成本
3.直接使用線上數據
優點：真實
缺點：不一定每個項目都存在
4.數據模擬庫
http://mockjs.com/

MockJS:
語法：
'list|1-10': [{
'id|+1': 1
}]

    1.'name|1': array

    從屬性值 array 中隨機選取 1 個元素，作為最終值。

    2.'name|+1': array

    從屬性值 array 中順序選取 1 個元素，作為最終值。

    3.'name|min-max': array

    通過重覆屬性值 array 生成一個新數組，重覆次數大於等於 min，小於等於 max。

    4.'name|count': array

    通過重覆屬性值 array 生成一個新數組，重覆次數為 count。