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

2019-11-19 15:06:21

字体：大中小

来源：转载

供稿：网友

在我们的生产实际中，后端的接口往往是较晚才会出来，于是我们的前端的许多开发都要等到接口给我们才能进行，这样对于我们前端来说显得十分的被动，于是有没有可以制造假数据来模拟后端接口呢，答案是肯定的。于是今天我们来介绍一款非常强大的插件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的文档。

// 使用 Mockvar 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)     });   },  }

效果预览