在vue-cli項目中使用mockjs(請求數據刪除數據)

在咱們的生產實際中，後端的接口每每是較晚纔會出來，因而咱們的前端的許多開發都要等到接口給咱們才能進行，這樣對於咱們前端來講顯得十分的被動，因而有沒有能夠製造假數據來模擬後端接口呢，答案是確定的。因而今天咱們來介紹一款很是強大的插件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的文檔。

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

效果預覽

線上預覽地址

再作一個刪除的處理
模擬數據

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代碼地址

沒有服務器學習的童鞋能夠看看騰訊雲的 1核2G，1M帶寬，50GB存儲空間的雲服務器，120一年哦。