详细解释mockjs(请求数据删除)在vue-cli项目中的使用

在我们的生产实践中，后端接口往往出来的比较晚，所以我们前端的很多开发都要等到接口给我们，这对我们前端来说是非常被动的，那么有没有假数据来模拟后端接口呢？答案是肯定的。所以今天我们就来介绍一个非常强大的插件Mock.js，它可以非常方便的模拟后端数据，也可以轻松的添加、删除、修改、检查这些操作。后台数据完成后，你所要做的就是移除mockjs:停止拦截真正的ajax，仅此而已。

建立一个vue项目

#全局安装vue-CLI $ NPM install-global vue-CLI #基于webpack模板创建新项目vueinit web pack vue-mock $ cdmy-project #安装依赖于$ npm install来安装mockjs

NPM安装模拟js-save-dev打开项目

Npm run dev创建了一个mockjs文件夹和mockjs，并在main.js中引入了这个文件

此时，您可以看到这样的项目结构

mockjs的使用

在项目的mock.js文件中，编写模拟数据。此时，我们可以参考mockjs文档。

//使用mock var mock=require(' mock js ')vardata=mock . mock({//属性列表的值是一个数组，其中包含1到10个元素' list|1-10': [{ //属性id是一个自动增量，起始值为1。添加1 'id| 1': 1 }]})//输出结果console.log (JSON.stringfy (data，null，4))，然后我们就可以做自己想做的事情了。

用mock.js模拟一些简单的数据

const Mock=require(' Mock js ')；//被嘲笑。随机对象常量随机=模拟。随机；//模拟一组数据const producted ATA=function(opt){ console . log(' opt '，opt)；让文章=[]；for(设I=0；i 30i ) {让new article object={ title : random . csentence(5，30)，//Random.csentence(min，max)thumbnail _ pic _ s : random . dataimage(' 300 x250 '，pick of mock ')，//Random.dataImage(大小，文本)生成随机Base64图片代码author_name: Random.cname()，//Random.cname()随机生成常用中文名称date : random . date()' ' random . time()//randomRandom.time()返回随机时间字符串} articles . push(new article object)}返回{ data : articles } } mock . mock('/news '，/post | get/I，producted data)；//当一个post或get请求被路由到/news时，Mock会拦截该请求，并在vue中返回上述请求数据

methods: { setNewsApi:函数(){ this。$http.post('/news '，' type=topkey=123456 ')。然后(RES={ console . log(RES . data)；this . newslistshow=RES . data . data；});}}效果预览

执行另一个删除过程

模拟数据

let arr=[] for(让I=0；i 30I){ let article object={ name : random . cname()，//random.cname()随机生成一个常用的中文名称，content3360random.csentence (5，30)，//random.csentence (min，max) id:i} arr。} let list=function(options){ let rtype=options . type . tolowercase()；//获取请求类型开关(rtype){ case ' get ' : break；Case' post' :让ID=parseint (JSON。解析(选项。身体)。参数。ID)//获取删除的ID arr=arr。filter (function (val) {returnval。身份证！=id//从数组中删除该id对应的对象})；打破；default : } return { data : arr }//返回此数组，即返回处理后的伪数据} mock.mock ('/list '，/get | post/i，list)；//get用于请求数据，post用于删除vue中使用的数据

methods: { setNewsApi:函数(){这个.$http.get('/list '，' ').然后(RES={ this。数据=RES . data。数据；});}，删除列表(数据){ //删除数据let id=data.id这个$http.post('/list '，{ params: { id: id } }).然后（函数(RES){控制台。日志(RES)；这个。数据=RES . data。数据；警报（数据。名称'删除成功');}.绑定（这个))。捕捉(函数（错误){ console.log(错误)});}, }效果预览

开源代码库代码地址

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。