vue项目中mock.js的使用和基本用法

官方网站：http://mockjs.com/

Mockjs用来模拟生成一些虚拟数据，让前端在开发后端接口之前就可以独立开发。我们可以使用真实的url，mockjs可以拦截ajax请求并返回设置的数据。

使用方式

本文主要讨论了在vue项目中，axios发送ajax请求和mock.js模拟数据的过程。

vue-cli构建项目后，安装axios和mock.js

NPM install-s axiosnpm install-d mock js在项目中创建新的mock.js文件夹，以设置要生成的模拟数据的格式。

3.想象一个场景，当页面打开时，从数据库中获得一个新闻列表。现在我们要模拟这个列表。新闻对象包括新闻标题、新闻内容和创作时间。

//mock.js//引入了mock js const mock=require(' mock js ')//获得了mock。随机对象const random=Mock.Random//模拟新闻数据。包括新闻标题、内容内容、创建时间createdtimeconst product news data=function(){ let news list=[]for(let I=0；i 20I){ let news object={ title : random . c title()，//random.c title (min，max)随机生成一个中文标题，默认长度为3-7。//Random.cparagraph(min，max)随机生成一个中文段落，段落中的句子数默认为3-7 createdtime : random . date()//random . date()表示生成日期字符串的格式，默认为yyyy-mm-DD；}新闻列表。push(news sobject)} return news list }//请求这个url，就可以返回news listmoke . mock('/mock/news '，产生news data)//后面描述这个api的使用细节，并在main.js中引入mock.js文件，表示我们使用其中生成的数据。

//main.js从“vue”导入vue从“app”导入。/app“从导入路由器”。/router '需要(。/mock.js)在APP.vue中，让我们发送一个get请求来获取数据

//app . vuetemplate div id=' # app '/div/templatescript从' axios'/导入axiosexport default {//获取已挂载的新闻列表(){axios.get('/mock/News ')。然后(res={//url是console.log (res.data)中定义的mock.js//print响应数据})} } }/脚本

运行项目，打开控制台，看到我们得到了模拟数据。

嘲弄

Mock.mock (rurl，rtype，template | function(options))rurl是可选的。表示拦截的网址，可以是网址字符串或网址正则。例如“/domian/list.json”。Rtype是可选的。指示需要拦截的Ajax请求的类型。例如，获取、发布、放入、删除等。模板可选。表示数据模板，可以是对象或字符串。数据模板中的每个属性由三部分组成：属性名、生成规则、属性值：//属性名//生成规则//属性值' name|rule':值。例如，“名称| 1-10”:1将生成一个介于1和10之间的整数。细则见公文功能(选项)。表示用于生成响应数据的函数。选项指向这个请求的Ajax选项集，它包含三个属性：url、类型和要添加数据的主体

所有之前的讨论都是关于生成好的数据供我们获取。如果想测试添加数据的功能，mock.js也可以实现。对于Mock.mock(url，function(ops))，ops参数可以获取传输的数据。

//app . vuetemplate div id=' app ' div输入类型=' text' v-model=' title' button类型=' Button ' @ click=' submit ' submit/Button Button类型=' Button ' @ click=' Getprojects ' get/Button/div/div/templatescript import axios from ' axios ' export default { data(){ return { title : ' ' }，methods 3: { submit(){ axios . post('/mock/add project '，{//add数据的接口，数据是对象然后(RES={//get data console . log(RES . data)})} } } }/script我们在mock.js中模拟一个添加数据的接口，获取后将数据存储在数组中。

//mock.js//添加信息让项目列表=[] mock.mock ('/mock/add project '，ops={//拦截ajax请求，调用函数console.log(ops) //首先看看这个ops是什么，projectList.push(ops)})//获取信息mock . mock(//mock/project '，project list)

在输入框中输入标题后，点击提交，数据将被发送到/mock/addproject。mock.js截获请求后，会调用function(ops)方法。打印后显示OPS是一个有url、类型、body三个属性的对象，我们输入的数据在body的属性值中。同时，由于axios默认发送json格式的数据，所以body中的数据是json字符串，所以更改函数()。当然，在实际开发中，可以看看后端的数据返回格式，选择前端json到js的操作。这只是一个示范。

//mock.js//添加信息让项目列表=[] mock.mock ('/mock/add project '，ops={//截取ajax请求，调用函数//console.log(ops) //首先看看这个ops是什么。ops=JSON . parse(ops . body)project list . push(ops)})//获取信息mock . mock('/mock/project '，project list)

更改后，输入标题，单击提交，然后单击获取。可以看到我们提交的数据是以js对象的形式返回的，得到数据后可以做进一步的操作。

修改函数的代码类似。

删除的数据

删除数据，数据的id通常以get的形式传递给后端，url是： /xxx/xxx？Id=value，在实际开发中，后端可以很好地处理不同Id值的URL，我们只需要关心如何获取id。但是在使用mock.js的时候，不知道怎么把截取的URL写成动态的。Mock.mock('/mock/delete ')，当使用axios.get()时，将会报告一个错误：

所以改成了后送。

不知道删除的时候有没有其他方法可以使用get request。

摘要

以上就是mock.js在边肖介绍的vue项目中的使用和基本用法。希望对大家有帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！如果你觉得这篇文章对你有帮助，请转载，请注明出处，谢谢！