详解在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椭圆旋转相册实现代码
Jan 16 Javascript
javascript学习笔记(七) js函数介绍
Jun 19 Javascript
JavaScript中string转换成number介绍
Dec 31 Javascript
jQuery统计上传文件大小的方法
Jan 24 Javascript
Js制作点击输入框时默认文字消失的效果
Sep 05 Javascript
浅谈js图片前端预览之filereader和window.URL.createObjectURL
Jun 30 Javascript
AngularJs基本特性解析(一)
Jul 21 Javascript
详解数组Array.sort()排序的方法
May 09 Javascript
JavaScript实现的斑马线表格效果【隔行变色】
Sep 18 Javascript
Vue多组件仓库开发与发布详解
Feb 28 Javascript
JS实现拖动模糊框特效
Aug 25 Javascript
vue中axios封装使用的完整教程
Mar 03 Vue.js
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实现Ftp用户的在线管理
2012/02/16 PHP
PHP+MySQL修改记录的方法
2015/01/21 PHP
Laravel学习教程之model validation的使用示例
2017/10/23 PHP
利用Homestead快速运行一个Laravel项目的方法详解
2017/11/14 PHP
php查看一个变量的占用内存的实例代码
2020/03/29 PHP
JavaScript 模式之工厂模式(Factory)应用介绍
2012/11/15 Javascript
JQuery DataTable删除行后的页面更新利用Ajax解决
2013/05/17 Javascript
根据表格中的某一列进行排序的javascript代码
2013/11/29 Javascript
Javascript验证上传图片大小[前台处理]
2014/07/18 Javascript
jquery实现ajax加载超时提示的方法
2016/07/23 Javascript
jQuery密码强度验证控件使用详解
2017/01/05 Javascript
简单的渐变轮播插件
2017/01/12 Javascript
Vue开发中整合axios的文件整理
2017/04/29 Javascript
JavaScript插件Tab选项卡效果
2017/11/14 Javascript
Webpack实战加载SVG的方法
2017/12/26 Javascript
详解javascript设计模式三:代理模式
2019/03/25 Javascript
详解Js里的for…in和for…of的用法
2019/03/28 Javascript
vue实现pdf文档在线预览功能
2019/11/26 Javascript
浅谈js中的attributes和Attribute的用法与区别
2020/07/16 Javascript
Python实现的检测网站挂马程序
2014/11/30 Python
使用C语言来扩展Python程序和Zope服务器的教程
2015/04/14 Python
python中pandas.DataFrame对行与列求和及添加新行与列示例
2017/03/12 Python
python实现决策树、随机森林的简单原理
2018/03/26 Python
python批量查询、汉字去重处理CSV文件
2018/05/31 Python
一篇文章弄懂Python中的可迭代对象、迭代器和生成器
2019/08/12 Python
Python爬虫库BeautifulSoup获取对象(标签)名,属性,内容,注释
2020/01/25 Python
浅谈keras使用中val_acc和acc值不同步的思考
2020/06/18 Python
Python自省及反射原理实例详解
2020/07/06 Python
python根据字典的键来删除元素的方法
2020/08/16 Python
世界上获奖最多的手机镜头:Olloclip
2018/03/03 全球购物
伊莱克斯阿根廷网上商店:Tienda Electrolux
2021/03/08 全球购物
团员学习总结的自我评价范文
2013/10/14 职场文书
2014年创卫实施方案
2014/02/18 职场文书
降消项目实施方案
2014/03/30 职场文书
护士先进个人总结
2015/02/13 职场文书
Python 数据可视化神器Pyecharts绘制图像练习
2022/02/28 Python