详解在vue-cli项目中使用mockjs(请求数据删除数据)
发布时间：2020-12-17 02:45:19 所属栏目：百科 来源：网络整理
导读：在我们的生产实际中，后端的接口往往是较晚才会出来，于是我们的前端的许多开发都要等到接口给我们才能进行，这样对于我们前端来说显得十分的被动，于是有没有可以制造假数据来模拟后端接口呢，答案是肯定的。于是今天我们来介绍一款非常强大的插件Mock.js
|
在我们的生产实际中，后端的接口往往是较晚才会出来，于是我们的前端的许多开发都要等到接口给我们才能进行，这样对于我们前端来说显得十分的被动，于是有没有可以制造假数据来模拟后端接口呢，答案是肯定的。于是今天我们来介绍一款非常强大的插件Mock.js ，可以非常方便的模拟后端的数据，也可以轻松的实现增删改查这些操作，在后台数据完成之后，你所做的只是去掉mockjs：停止拦截真实的ajax，仅此而已。 搭建一个vue项目 安装mockjs 开启项目 创建一个mockjs文件夹以及mockjs,并且在main.js引入这个文件 此时可以看到像这样的一个项目结构
mockjs的使用在项目中的mock.js文件中，写入模拟的数据，此时我们可以参照一下mockjs的文档。 接下来可以做我们想要做的事了 在mock.js中模拟简单的一些数据 在vue中请求 {
console.log(res.data);
} 效果预览
再做一个删除的处理 模拟数据 vue中使用 {
this.data = res.data.data;
});
},deleteList(data) { //删除数据
let id = data.id;
this.$http.post('/list',{
params: {
id: id
}
}).then(function(res) {
console.log(res);
this.data = res.data.data;
alert(data.name + '删除成功');
}.bind(this))
.catch(function(error) {
console.log(error)
});
},}
效果预览
github代码地址 以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。 （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
