1. 學(xué)習(xí)目標(biāo)
本小節(jié)我們將帶大家學(xué)習(xí)如何在 Vue-Cli3 初始化的項(xiàng)目中創(chuàng)建 Mock 數(shù)據(jù)将塑。
2. 簡介
在日常開發(fā)中禾唁，接口的聯(lián)調(diào)是非常普遍的曙强。然而救湖，有些時(shí)候接口并不會(huì)及時(shí)提供拣播，這時(shí)候就需要我們自己 Mock 數(shù)據(jù)來模擬接口的實(shí)現(xiàn)晾咪。
3. 創(chuàng)建 Mock 數(shù)據(jù)
首先，我們?cè)陧?xiàng)目的根路徑下創(chuàng)建 vue.config.js 文件贮配，并在文件中寫如下配置：
module.exports = {
devServer: {
before(app) {
app.get("/goods/list", (req, res) => {
res.json({
data: [
{name: 'Vue 基礎(chǔ)教程'},
{name: 'React 基礎(chǔ)教程'}
]
});
});
}
}
};
我們通過 axios 來獲取接口數(shù)據(jù)谍倦。首先需要安裝 axios：
npm install axios --save
在組件中使用 axios 獲取 Mock 數(shù)據(jù):
<script>
import axios from "axios";
export default {
name: "Home",
created() {
axios.get("/goods/list").then(res => {
console.log(res);
});
},
components: {}
};
</script>
代碼塊123456789101112
有時(shí)候，我們需要寫很多的 Mock 數(shù)據(jù)泪勒，把所有的數(shù)據(jù)都寫在 vue.config.js 文件中顯然是不合適的昼蛀，這會(huì)使得文件變得非常大，并且難以維護(hù)圆存。我們可以在項(xiàng)目中創(chuàng)建 Mock 文件夾叼旋，把所有數(shù)據(jù)放在 Mock 文件夾中維護(hù)。
我們?cè)?Mock 文件夾中創(chuàng)建 list.json
[
{"name": "Vue 基礎(chǔ)學(xué)習(xí)"},
{"name": "React 基礎(chǔ)學(xué)習(xí)"}
]
然后沦辙，在 vue.config.js 文件中加載數(shù)據(jù)：
const list = require("./mock/list.json");
module.exports = {
devServer: {
before(app) {
app.get("/goods/list", (req, res) => {
res.json({
data: list
});
});
}
}
};
4. 小結(jié)
本節(jié)我們帶大家學(xué)習(xí)了如何在項(xiàng)目中使用 Mock 數(shù)據(jù)夫植。
