详解在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 相关文章推荐
巧妙破除网页右键禁用的十大绝招
Aug 12 Javascript
JavaScript实现将UPC转换成ISBN的方法
May 26 Javascript
使用Raygun对Node.js应用进行错误处理的方法
Jun 23 Javascript
基于Jquery实现焦点图淡出淡入效果
Nov 30 Javascript
详解jQuery中的DOM操作
Dec 23 Javascript
JS实现加载时锁定HTML页面元素的方法
Jun 24 Javascript
vue addRoutes实现动态权限路由菜单的示例
May 15 Javascript
浅析微信扫码登录原理(小结)
Oct 29 Javascript
vue调试工具vue-devtools安装及使用方法
Nov 07 Javascript
Angular设置别名alias的方法
Nov 08 Javascript
vue组件库的在线主题编辑器的实现思路
Apr 03 Javascript
Ajax获取node服务器数据的完整步骤
Sep 20 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
ThinkPHP3.1基础知识快速入门
2014/06/19 PHP
PHP判断表单复选框选中状态完整例子
2014/06/24 PHP
ThinkPHP 3.2.3实现页面静态化功能的方法详解
2017/08/03 PHP
浅谈javascript 面向对象编程
2009/10/28 Javascript
基于jquery的回到页面顶部按钮
2011/06/27 Javascript
js工具方法弹出蒙版
2013/05/08 Javascript
jquery 实现上下滚动效果示例代码
2013/08/09 Javascript
AngularJS中的$watch(),$digest()和$apply()区分
2016/04/04 Javascript
JavaScript实现输入框与清空按钮联动效果
2016/09/09 Javascript
Nodejs进阶:如何将图片转成datauri嵌入到网页中去实例
2016/11/21 NodeJs
JS实现线性表的顺序表示方法示例【经典数据结构】
2017/04/11 Javascript
dropload.js插件下拉刷新和上拉加载使用详解
2017/10/20 Javascript
详解vue-cli之webpack3构建全面提速优化
2017/12/25 Javascript
vue中使用ueditor富文本编辑器
2018/02/08 Javascript
angular学习之动态创建表单的方法
2018/12/07 Javascript
在vue项目中使用Jquery-contextmenu插件的步骤讲解
2019/01/27 jQuery
js继承的这6种方式!(上)
2019/04/23 Javascript
Python psutil模块简单使用实例
2015/04/28 Python
Python编程判断一个正整数是否为素数的方法
2017/04/14 Python
在VS Code上搭建Python开发环境的方法
2018/04/06 Python
将python代码和注释分离的方法
2018/04/21 Python
用pandas中的DataFrame时选取行或列的方法
2018/07/11 Python
python文字转语音实现过程解析
2019/11/12 Python
使用Tensorboard工具查看Loss损失率
2020/02/15 Python
python 异步async库的使用说明
2020/05/04 Python
Python的控制结构之For、While、If循环问题
2020/06/30 Python
Python自动发送和收取邮件的方法
2020/08/12 Python
Python使用socket模块实现简单tcp通信
2020/08/18 Python
CSS3中Transform动画属性用法详解
2016/07/04 HTML / CSS
goodhealth官方海外旗舰店:新西兰国民营养师
2017/12/15 全球购物
Skyscanner加拿大:全球旅行搜索平台
2018/11/19 全球购物
机械电子工程专业推荐信范文
2013/11/20 职场文书
2014党支部对照检查材料思想汇报
2014/10/05 职场文书
2014年骨干教师工作总结
2014/12/19 职场文书
微信小程序和php的登录实现
2021/04/01 PHP
GO语言字符串处理函数之处理Strings包
2022/04/14 Golang