详解在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 相关文章推荐
jQuery 各种浏览器下获得日期区别
Dec 22 Javascript
一个简单的jQuery插件制作 学习过程及实例
Apr 25 Javascript
基于jQuery的合并表格中相同文本的相邻单元格的代码
Apr 06 Javascript
javaScript中slice函数用法实例分析
Jun 08 Javascript
轻松学习jQuery插件EasyUI EasyUI创建树形网络(1)
Nov 30 Javascript
confirm确认对话框的实现方法总结
Jun 17 Javascript
Javascript封装id、class与元素选择器方法示例
Mar 13 Javascript
Node.js 使用递归实现遍历文件夹中所有文件
Sep 18 Javascript
如何基于原生javaScript生成带图片的二维码
Nov 21 Javascript
vue实现数字滚动效果
Jun 29 Javascript
详解JavaScript 中的批处理和缓存
Nov 19 Javascript
uniapp开发小程序的经验总结
Apr 08 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
php抓取https的内容的代码
2010/04/06 PHP
《PHP编程最快明白》第七讲:php图片验证码与缩略图
2010/11/01 PHP
simplehtmldom Doc api帮助文档
2012/03/26 PHP
通过5个php实例细致说明传值与传引用的区别
2012/08/08 PHP
php中PDO方式实现数据库的增删改查
2015/05/17 PHP
PHP多进程编程总结(推荐)
2016/07/18 PHP
PHP通过加锁实现并发情况下抢码功能
2016/08/10 PHP
PHP自定义函数获取URL中一级域名的方法
2016/08/23 PHP
php+ajax实现仿百度查询下拉内容功能示例
2017/10/20 PHP
jQuery学习笔记(1)--用jQuery实现异步通信(用json传值)具体思路
2013/04/08 Javascript
onmouseover和onmouseout的一些问题思考
2013/08/14 Javascript
jQuery中size()方法用法实例
2014/12/27 Javascript
JS数组的常见用法实例
2015/02/10 Javascript
JavaScript监听文本框回车事件并过滤文本框空格的方法
2015/04/16 Javascript
AngularJS中过滤器的使用与自定义实例代码
2016/09/17 Javascript
js学习之----深入理解闭包
2016/11/21 Javascript
解决node修改后需频繁手动重启的问题
2018/05/13 Javascript
详解Vue的常用指令v-if, v-for, v-show,v-else, v-bind, v-on
2018/10/12 Javascript
vue进入页面时滚动条始终在底部代码实例
2019/03/26 Javascript
微信小程序云开发获取文件夹下所有文件(推荐)
2019/11/14 Javascript
Vue.js 实现地址管理页面思路详解(地址添加、编辑、删除和设置默认地址)
2019/12/11 Javascript
js实现秒表计时器
2019/12/16 Javascript
基于javascript实现碰撞检测
2020/03/12 Javascript
[40:56]2018DOTA2亚洲邀请赛 3.31 小组赛 A组 Liquid vs TNC
2018/04/01 DOTA
Python实现的朴素贝叶斯分类器示例
2018/01/06 Python
python邮件发送smtplib使用详解
2020/06/16 Python
解决pycharm remote deployment 配置的问题
2019/06/27 Python
Django Rest framework认证组件详细用法
2019/07/25 Python
八年级英语教学反思
2014/01/09 职场文书
酒店员工检讨书
2014/02/18 职场文书
领导干部整治奢华浪费之风思想汇报
2014/10/07 职场文书
2014年财务经理工作总结
2014/12/08 职场文书
2015年感恩节活动总结
2015/03/24 职场文书
Python基础之元编程知识总结
2021/05/23 Python
Mysql数据库索引面试题(程序员基础技能)
2021/05/31 MySQL
Python实现视频中添加音频工具详解
2021/12/06 Python