淺談vue項目用到的mock數(shù)據(jù)接口的兩種方式
更新時間:2019年10月09日 15:09:23 作者:populus
這篇文章主要介紹了淺談vue項目用到的mock數(shù)據(jù)接口的兩種方式,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
1.使用devServer.before進行數(shù)據(jù)mock
//通過配置devServer.before選項,設置url訪問路徑及response響應數(shù)據(jù),進行mock數(shù)據(jù)。
const { data } = require('./data.json')
// 引入json數(shù)據(jù)對象
//vue.config.js配置文件中進行Vue CLI的配置
module.exports = {
//...
devServer: {
before: function(app, server) {
app.get('/api/data', function(req, res) {
res.json({ data: data, errno: 0 });
});
}
}
};
import axios from 'axios'
const ERRNO = 0
//通過函數(shù)柯力化,接收url作為參數(shù),以返回新的函數(shù)接收額外的參數(shù)作為axios配置項
function get (url) {
return function (params) {
return axios.get(url, {
params
}).then((res) => {
const { errno, data } = res.data
if (errno === ERRNO) {
return data
}
}).catch((e) => {
})
}
}
const getData = get('api/data')
getSeller().then(res => {
console.log(res)
})
2.使用Mock.js進行數(shù)據(jù)mock
使用Mock.mock(),根據(jù)數(shù)據(jù)模板生成模擬數(shù)據(jù)。
import Mock from 'mockjs'
import data from './bookHome'
//導入存放模擬json數(shù)據(jù)的js文件
Mock.mock(/\/api\/data/, 'get', home)
//表示需要攔截的 URL,可以是 URL 字符串或 URL 正則。
//表示需要攔截的 Ajax 請求類型。例如 GET、POST、PUT、DELETE 等。
//表示數(shù)據(jù)模板,可以是對象或字符串。例如 { 'data|1-10':[{}] }、'@EMAIL'。
/* axios獲取mock數(shù)據(jù) */
import axios from 'axios'
export function getData() {
return axios({
method: 'get',
url: `${process.env.VUE_APP_BOOK_URL}/api/data`
//通過環(huán)境指定的默認地址設定接口url,方便后續(xù)調用
})
}
//接口方法返回promise對象,最終獲取mock數(shù)據(jù)
getData().then(response => {
if (response && response.status === 200) {
const data = response.data
console.log(data)
}
})
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
相關文章
解決element-ui el-input賦值后不能編輯的問題
這篇文章主要介紹了解決element-ui el-input賦值后不能編輯的問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-02-02

