欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-07-06 20:38:33
在我们的生产实际中,后端的接口往往是较晚才会出来,于是我们的前端的许多开发都要等到接口给我们才能进行,这样对于我们前端来说显得十分的被动,于是有没有可以制造假数据来模拟后端...

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


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