在我们的生产实际中,后端的接口往往是较晚才会出来,于是我们的前端的许多开发都要等到接口给我们才能进行,这样对于我们前端来说显得十分的被动,于是有没有可以制造假数据来模拟后端接口呢,答案是肯定的。于是今天我们来介绍一款非常强大的插件Mock.js ,可以非常方便的模拟后端的数据,也可以轻松的实现增删改查这些操作,在后台数据完成之后,你所做的只是去掉mockjs:停止拦截真实的ajax,仅此而已。
你所需要的网站建设服务,我们均能行业靠前的水平为你提供.标准是产品质量的保证,主要从事网站建设、成都网站设计、企业网站建设、手机网站制作设计、网页设计、品牌网站设计、网页制作、做网站、建网站。创新互联公司拥有实力坚强的技术研发团队及素养的视觉设计专才。
搭建一个vue项目
# 全局安装 vue-cli $ npm install --global vue-cli # 创建一个基于 webpack 模板的新项目 vue init webpack vue-mock $ cd my-project # 安装依赖 $ npm install
安装mockjs
npm install mockjs --save-dev
开启项目
npm run dev
创建一个mockjs文件夹以及mockjs,并且在main.js引入这个文件
此时可以看到像这样的一个项目结构
mockjs的使用
在项目中的mock.js文件中,写入模拟的数据,此时我们可以参照一下mockjs的文档。
// 使用 Mock var Mock = require('mockjs') var data = Mock.mock({ // 属性 list 的值是一个数组,其中含有 1 到 10 个元素 'list|1-10': [{ // 属性 id 是一个自增数,起始值为 1,每次增 1 'id|+1': 1 }] }) // 输出结果 console.log(JSON.stringify(data, null, 4))
接下来可以做我们想要做的事了
在mock.js中模拟简单的一些数据
const Mock = require('mockjs'); // 获取 mock.Random 对象 const Random = Mock.Random; // mock一组数据 const produceData = function (opt) { console.log('opt', opt); let articles = []; for (let i = 0; i < 30; i++) { let newArticleObject = { title: Random.csentence(5, 30), // Random.csentence( min, max ) thumbnail_pic_s: Random.dataImage('300x250', 'mock的图片'), // Random.dataImage( size, text ) 生成一段随机的 Base64 图片编码 author_name: Random.cname(), // Random.cname() 随机生成一个常见的中文姓名 date: Random.date() + ' ' + Random.time() // Random.date()指示生成的日期字符串的格式,默认为yyyy-MM-dd;Random.time() 返回一个随机的时间字符串 } articles.push(newArticleObject) } return { data: articles } } Mock.mock('/news', /post|get/i, produceData);//当post或get请求到/news路由时Mock会拦截请求并返回上面的数据
在vue中请求
methods: { setNewsApi: function() { this.$http.post("/news", "type=top&key=123456").then(res => { console.log(res.data); this.newsListShow = res.data.data; }); } }
效果预览
再做一个删除的处理
模拟数据
let arr = [] for (let i = 0; i < 30; i++) { let newArticleObject = { name: Random.cname(), // Random.cname() 随机生成一个常见的中文姓名 content: Random.csentence(5, 30), // Random.csentence( min, max ) id: i } arr.push(newArticleObject); } let list = function (options) { let rtype = options.type.toLowerCase(); //获取请求类型 switch (rtype) { case 'get': break; case 'post': let id = parseInt(JSON.parse(options.body).params.id) //获取删除的id arr = arr.filter(function(val){ return val.id!=id;//把这个id对应的对象从数组里删除 }); break; default: } return { data: arr } //返回这个数组,也就是返回处理后的假数据 } Mock.mock('/list', /get|post/i, list);//get用于请求数据,post用于删除数据
vue中使用
methods: { setNewsApi: function() { this.$http.get("/list", "").then(res => { 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代码地址
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持创新互联。