Vue---mock.js 使用

mockjs 概述

在咱們的生產實際中，後端的接口每每是較晚纔會出來，而且還要寫接口文檔，因而咱們的前端的許多開發都要等到接口給咱們才能進行，這樣對於咱們前端來講顯得十分的被動，因而有沒有能夠製造假數據來模擬後端接口呢，答案是確定的。應該有人經過編寫json文件來模擬後臺數據，可是很侷限，好比增刪改查這些接口怎麼實現呢，因而今天咱們來介紹一款很是強大的插件Mock.js，能夠很是方便的模擬後端的數據，也能夠輕鬆的實現增刪改查這些操做。

 

mock.js官網

引入mockjs

npm install mockjs

安裝完成以後去查看 package.json 若是 "mockjs": "^1.0.1-beta3" 說明安裝成功

 

在src目錄下 新建一個mock.js文件

 

簡單使用

（1）、首先在mock.js文件下

const Mock = require('mockjs')

const Random = Mock.Random

const produceNewsData = function(){
    let articles = []
    for(let i = 0;i<100;i++){
        let data = {
            id:i,
            name:Random.first(),
            age:Random.integer(20, 100),
            sex:'M',
            birthday:Random.date()
        }
        articles.push(data)
    }
    return{
        articles:articles
    }
}

const getChange = function(){
    return{
        articles:{
            resCode:0,
            errmsg:'你好呀'
        }
    }
}

Mock.mock('/api/getList','get',produceNewsData)
Mock.mock('/api/getChange','get',getChange)

 

（2）、在main.js中引入

require('./mock')

 

 （3）、新建一個頁面

<template>
  <div>
    <h1>主頁</h1>
    <el-button type="primary" @click="export_Excel">生成表格</el-button>

    <el-table :data="tableData" border fit highlight-current-row style="width: 100%;text-align: center;">
      <el-table-column prop="id" label="ID" width="180" align="center">
        <template slot-scope="scope">
          <span v-if="scope.row.id==1">停用</span>
          <span v-else-if="scope.row.id==2">過時</span>
          <span v-else-if="scope.row.id==3">做廢</span>
          <span v-else="scope.row.id>3">{{scope.row.id}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="name" label="姓名" width="180" align="center">
      </el-table-column>
      <el-table-column prop="age" label="年齡" width="180" align="center">
      </el-table-column>
      <el-table-column prop="sex" label="性別" width="180" align="center">
      </el-table-column>
      <el-table-column prop="birthday" label="生日" width="180" align="center">
      </el-table-column>
      <el-table-column label="編輯" align="center">
        <template slot-scope="scope">
          <el-button>編輯</el-button>
          <el-button @click="cli">點擊</el-button>
        </template>
      </el-table-column>
    </el-table>

  </div>

</template>

<script>
  export default {
    data() {
      return {
        tableData: null
      }
    },
    methods: {
      cli() {
        this.axios.get('/api/getChange').then((response) => {
          console.log(response.data.articles);
        })
      }
    },

    created() { 
      this.axios.get('/api/getList').then((response) => {
        console.log(response.data.articles);
        this.tableData = response.data.articles;
      })
    }
  }
</script>

<style>

</style>

 

 運行結果