詳解在vue-cli項目中使用mockjs(請求資料刪除資料)，vue-climockjs

詳解在vue-cli項目中使用mockjs(請求資料刪除資料)，vue-climockjs

在我們的生產實際中，後端的介面往往是較晚才會出來，於是我們的前端的許多開發都要等到介面給我們才能進行，這樣對於我們前端來說顯得十分的被動，於是有沒有可以製造假資料來類比後端介面呢，答案是肯定的。於是今天我們來介紹一款非常強大的外掛程式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引入這個檔案

此時可以看到像這樣的一個項目結構

mockjs的使用

在項目中的mock.js檔案中，寫入類比的資料，此時我們可以參照一下mockjs的文檔。

// 使用 Mockvar 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;    });   }  }

效果預覽

再做一個刪除的處理

類比資料

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)     });   },  }

效果預覽

 

github代碼地址

以上就是本文的全部內容，希望對大家的學習有所協助，也希望大家多多支援幫客之家。