Vue中的mock数据指的是什么？
mock数据指的模拟数据，mock中文翻译愚弄，嘲笑。
实现mock数据如下：
首先在根目录下创建一个mock文件，该文件下有index.json(存放模拟数据)。
image.png
然后在根目录下新建一个 vue.config.js 文件，这文件是调整 webpack 配置最简单的方式，将会被 webpack-merge 合并入最终的 webpack 配置中。 在 vue.config.js 中编写以下内容：
const mockIndexData =require("./mock/index.json");
module.exports = {
devServer: {
port:8080,
before(app) {
app.get("/api/index", (req, res) => {
res.json(mockIndexData);
});
}
}
};
然后在组件中：
import axios from "axios";
getHomeData() {
axios.get("/api/index").then(res => {
console.log(res.data); //即可以拿到index.json中的数据
});
}
继续理解
好吧作为一名菜鸟，虽然实现了简单的axios+mock数据,但有很多不懂；
继续参考：CSDN
注意的坑
- 修改配置文件后必须要重开启服务器
- /api/文件名字 这个文件名其实就是自己模拟的json文件名字
- 模拟本地的图片无法引入（proxy也不行），有解决的小伙伴欢迎留言哦！
最好的办法 mock.js
博客 无脑复制
官方：http://mockjs.com/
Mock.js的使用
import Mock from "mockjs";
var Random = Mock.Random
//设置请求向应时间
Mock.setup({
timeout: "200-1000"
})
// 拦截到某个请求，返回数据
// Mock.mock("/api/user", {
// username: "小明",
// age: 12,
// birth: 1997,
// sex: "男"
// })
//随机生成
Mock.mock("/api/user", {
"time": "@datetime",
"score|1-900": 900,
"cname": "@cname",
"ename": "@name",
"email":"@email",
"image":"@image",
"nowTime":"@now"
})
