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


Posted in Javascript onOctober 23, 2017

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

此时可以看到像这样的一个项目结构

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

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;
    });
   }
  }

效果预览

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

再做一个删除的处理

模拟数据

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)
     });
   },
  }

效果预览

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

github代码地址

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript dom 操作详解 js加强
Jul 13 Javascript
JS获取各种浏览器窗口大小的方法
Jan 14 Javascript
深入分析下javascript中的[]()+!
Jul 07 Javascript
JavaScript变量的作用域全解析
Aug 14 Javascript
jQuery实现边框动态效果的实例代码
Sep 23 Javascript
KnockoutJS 3.X API 第四章之数据控制流component绑定
Oct 10 Javascript
JS实现table表格内针对某列内容进行即时搜索筛选功能
May 11 Javascript
vue+element-ui集成随机验证码+用户名+密码的form表单验证功能
Aug 05 Javascript
微信小程序中上传图片并进行压缩的实现代码
Aug 28 Javascript
JS实现简易留言板特效
Dec 23 Javascript
浅析Vue 中的 render 函数
Feb 28 Javascript
浅谈克隆 JavaScript
Nov 02 Javascript
angularjs实现天气预报功能
Jun 16 #Javascript
angular.js实现购物车功能
Oct 23 #Javascript
使用store来优化React组件的方法
Oct 23 #Javascript
node文件批量重命名的方法示例
Oct 23 #Javascript
详解vue 实例方法和数据
Oct 23 #Javascript
深入浅析javascript继承体系
Oct 23 #Javascript
Vue.js组件通信的几种姿势
Oct 23 #Javascript
You might like
xml+php动态载入与分页
2006/10/09 PHP
深入探讨PHP中的内存管理问题
2011/08/31 PHP
PHP错误Allowed memory size of 67108864 bytes exhausted的3种解决办法
2014/07/28 PHP
Thinkphp 空操作、空控制器、命名空间(详解)
2017/05/05 PHP
Laravel 5.5 的自定义验证对象/类示例代码详解
2017/08/29 PHP
PHP闭包定义与使用简单示例
2018/04/13 PHP
PDO::exec讲解
2019/01/28 PHP
javascript实现的listview效果
2007/04/28 Javascript
随窗体滑动的小插件sticky源码
2013/06/21 Javascript
js抽奖实现随机抽奖代码效果
2013/12/02 Javascript
JQuery 控制内容长度超出规定长度显示省略号
2014/05/23 Javascript
jquery原理以及学习技巧介绍
2015/11/11 Javascript
JavaScript必知必会(三) String .的方法来自何方
2016/06/08 Javascript
jQuery设置聚焦并使光标位置在文字最后的实现方法
2016/08/02 Javascript
jQuery实现可拖动进度条实例代码
2017/06/21 jQuery
bootstrap table实现x-editable的行单元格编辑及解决数据Empty和支持多样式问题
2017/08/10 Javascript
vue的状态管理模式vuex
2017/11/30 Javascript
vue项目中axios请求网络接口封装的示例代码
2018/12/18 Javascript
使用VueRouter的addRoutes方法实现动态添加用户的权限路由
2019/06/03 Javascript
js实现直播点击飘心效果
2020/08/19 Javascript
Vue项目如何引入bootstrap、elementUI、echarts
2020/11/26 Vue.js
Python程序员开发中常犯的10个错误
2014/07/07 Python
Python使用Phantomjs截屏网页的方法
2018/05/17 Python
python写程序统计词频的方法
2019/07/29 Python
Saucony澳大利亚官网:美国跑鞋品牌,运动鞋中的劳斯莱斯
2018/05/05 全球购物
英国大码女性时装零售商:Evans
2018/08/29 全球购物
Looking4Parking美国:全球排名第一的机场停车比较品牌
2019/08/26 全球购物
PHP如何与mysql建立链接
2013/05/05 面试题
家长写给老师的建议书
2014/03/13 职场文书
厨师长岗位职责范本
2014/08/25 职场文书
幼儿园教师师德师风演讲稿:我自豪我是一名幼师
2014/09/10 职场文书
小学秋季运动会报道稿
2014/09/30 职场文书
项目转让协议书
2014/10/27 职场文书
演讲开头怎么书写?
2019/08/06 职场文书
如何判断微信付款码和支付宝付款码
2021/04/01 PHP
MySQL 表锁定 LOCK和UNLOCK TABLES的 SQL语法
2022/04/18 MySQL