簡述vue的axios使用以及模擬數據

數據請求

axios

是一個第三方的數據請求模塊

1.下載：npm i -s axios

2.引用:單獨引用就import axios from “axios”

全局引用:

1. ​ 1.在main.js文件中import axios from “axios”
2. ​ 2.vue.prototype.axios=axios
3. ​ 把axios注入到vue中
4. ​ 使用就直接this.axios({})

3.語法:s

axios({
url:"路徑",
method:"請求方式get",
params:{
	key:val
}
}).then((ok)=>{

})

跨域

vue中的代理跨域 proxy

就是讓vue腳手架的當中的這個服務器協助我們來進行後臺的數據請求

開啓服務代理--配置好了一定要重啓服務器
proxy:{
	"/api":{
        target:"代理的路徑",
        changeOrign:true,//開啓代理
        pathRewrite:{
            "^/api":""
        }
	}
}

mock.js模擬數據

模擬數據:在開發過程中 前後臺的接口調用展示是非常重要的,但是如果我們在寫項目的時候後臺的接口沒有寫好 或者沒有給我們提供的時候 沒有接口調用 假數據怎麼辦?

1.我就把數據寫死在data中(只是在後期接口聯調的時候就會非常的麻煩)

2.一些模擬數據(mock.js json-server)等這些第三方的模擬數據js來完成假數據的模擬請求.

mock.js : npm i -s mockjs

配置mock的文件與文件夾在src文件夾下創建一個文件夾mock

在文件夾的下面寫上數據與模擬數據的請求監聽(攔截請求)

攔截請求:正常情況下 ajax發送出去的請求都是去尋找服務器獲取相關的數據,當時現在我們使用的是mock來進行模擬數據 所以我們要把每次用戶發送的請求使用mock攔截下來給用戶使用

在mock下創建一個data文件夾和一個index.js

data(數據文件夾)裏面存放json文件儲存數據

index.js(攔截配置):

//1.引用mock
var Mock=require("mockjs")
//設置攔截 mock()攔截請求 分發返回數據
//Mock.mock("攔截的地址","post/get",攔截之後的返回數據)
Mock.mock("/mock/user","get",require("./data/one.json"))

配置好了之後在main.js(全局配置文件中引用)

//引用mock
require("./mock/index.js")

什麼時候使用impor es6模塊封裝的.

require comment.js模塊