快捷導(dǎo)航

詳解在vue-cli項(xiàng)目中使用mockjs(請(qǐng)求數(shù)據(jù)刪除數(shù)據(jù))

更新時(shí)間：2017年10月23日 11:30:30 作者：zhou_web

本篇文章主要介紹了在vue-cli項(xiàng)目中使用mockjs(請(qǐng)求數(shù)據(jù)刪除數(shù)據(jù))，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

在我們的生產(chǎn)實(shí)際中，后端的接口往往是較晚才會(huì)出來(lái)，于是我們的前端的許多開發(fā)都要等到接口給我們才能進(jìn)行，這樣對(duì)于我們前端來(lái)說(shuō)顯得十分的被動(dòng)，于是有沒(méi)有可以制造假數(shù)據(jù)來(lái)模擬后端接口呢，答案是肯定的。于是今天我們來(lái)介紹一款非常強(qiáng)大的插件Mock.js ，可以非常方便的模擬后端的數(shù)據(jù)，也可以輕松的實(shí)現(xiàn)增刪改查這些操作，在后臺(tái)數(shù)據(jù)完成之后，你所做的只是去掉mockjs：停止攔截真實(shí)的ajax，僅此而已。

搭建一個(gè)vue項(xiàng)目

# 全局安裝 vue-cli
$ npm install --global vue-cli
# 創(chuàng)建一個(gè)基于 webpack 模板的新項(xiàng)目
vue init webpack vue-mock
$ cd my-project
# 安裝依賴
$ npm install

安裝mockjs

npm install mockjs --save-dev

開啟項(xiàng)目

npm run dev

創(chuàng)建一個(gè)mockjs文件夾以及mockjs,并且在main.js引入這個(gè)文件

此時(shí)可以看到像這樣的一個(gè)項(xiàng)目結(jié)構(gòu)

mockjs的使用

在項(xiàng)目中的mock.js文件中，寫入模擬的數(shù)據(jù)，此時(shí)我們可以參照一下mockjs的文檔。

// 使用 Mock
var Mock = require('mockjs')
var data = Mock.mock({
  // 屬性 list 的值是一個(gè)數(shù)組，其中含有 1 到 10 個(gè)元素
  'list|1-10': [{
    // 屬性 id 是一個(gè)自增數(shù)，起始值為 1，每次增 1
    'id|+1': 1
  }]
})
// 輸出結(jié)果
console.log(JSON.stringify(data, null, 4))

接下來(lái)可以做我們想要做的事了

在mock.js中模擬簡(jiǎn)單的一些數(shù)據(jù)

 const Mock = require('mockjs');
// 獲取 mock.Random 對(duì)象
 const Random = Mock.Random;
 // mock一組數(shù)據(jù)
 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 ) 生成一段隨機(jī)的 Base64 圖片編碼
    author_name: Random.cname(), // Random.cname() 隨機(jī)生成一個(gè)常見的中文姓名
    date: Random.date() + ' ' + Random.time() // Random.date()指示生成的日期字符串的格式,默認(rèn)為yyyy-MM-dd；Random.time() 返回一個(gè)隨機(jī)的時(shí)間字符串
   }
   articles.push(newArticleObject)
  }
  return {
   data: articles
  }
 }
Mock.mock('/news', /post|get/i, produceData);//當(dāng)post或get請(qǐng)求到/news路由時(shí)Mock會(huì)攔截請(qǐng)求并返回上面的數(shù)據(jù)

在vue中請(qǐng)求

methods: {
   setNewsApi: function() {
    this.$http.post("/news", "type=top&key=123456").then(res => {
     console.log(res.data);
 
     this.newsListShow = res.data.data;
    });
   }
  }

效果預(yù)覽

再做一個(gè)刪除的處理

模擬數(shù)據(jù)

let arr = []
 for (let i = 0; i < 30; i++) {
  let newArticleObject = {
   name: Random.cname(), // Random.cname() 隨機(jī)生成一個(gè)常見的中文姓名
   content: Random.csentence(5, 30), // Random.csentence( min, max )
   id: i
  }
  arr.push(newArticleObject);
 }
 let list = function (options) {
  let rtype = options.type.toLowerCase(); //獲取請(qǐng)求類型
  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;//把這個(gè)id對(duì)應(yīng)的對(duì)象從數(shù)組里刪除
    });
    break;
   default:
  }
  return {
   data: arr
  } //返回這個(gè)數(shù)組,也就是返回處理后的假數(shù)據(jù)
 }
 Mock.mock('/list', /get|post/i, list);//get用于請(qǐng)求數(shù)據(jù)，post用于刪除數(shù)據(jù)

vue中使用

methods: {
   setNewsApi: function() {
    this.$http.get("/list", "").then(res => {
     this.data = res.data.data;
    });
   },
   deleteList(data) { //刪除數(shù)據(jù)
    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)
     });
   },
  }

效果預(yù)覽