淺談vue項目用到的mock數(shù)據(jù)接口的兩種方式
更新時間:2019年10月09日 15:09:23 作者:populus
這篇文章主要介紹了淺談vue項目用到的mock數(shù)據(jù)接口的兩種方式,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
1.使用devServer.before進(jìn)行數(shù)據(jù)mock
//通過配置devServer.before選項,設(shè)置url訪問路徑及response響應(yīng)數(shù)據(jù),進(jìn)行mock數(shù)據(jù)。 const { data } = require('./data.json') // 引入json數(shù)據(jù)對象 //vue.config.js配置文件中進(jìn)行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進(jìn)行數(shù)據(jù)mock
使用Mock.mock(),根據(jù)數(shù)據(jù)模板生成模擬數(shù)據(jù)。
import Mock from 'mockjs' import data from './bookHome' //導(dǎo)入存放模擬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)境指定的默認(rèn)地址設(shè)定接口url,方便后續(xù)調(diào)用 }) } //接口方法返回promise對象,最終獲取mock數(shù)據(jù) getData().then(response => { if (response && response.status === 200) { const data = response.data console.log(data) } })
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
vue實現(xiàn)將一維數(shù)組變換為三維數(shù)組
這篇文章主要為大家詳細(xì)介紹了vue如何實現(xiàn)將一維數(shù)組變換為三維數(shù)組,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-01-01淺談vue的props,data,computed變化對組件更新的影響
本篇文章主要介紹了淺談vue的props,data,computed變化對組件更新的影響,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-01-01淺談angular4.0中路由傳遞參數(shù)、獲取參數(shù)最nice的寫法
下面小編就為大家分享一篇淺談angular4.0中路由傳遞參數(shù)、獲取參數(shù)最nice的寫法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03vue-cli3+echarts實現(xiàn)漸變色儀表盤組件封裝
這篇文章主要為大家詳細(xì)介紹了vue-cli3+echarts實現(xiàn)漸變色儀表盤組件封裝,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下2022-03-03