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>

巴特西

Vue---mock.js 使用

mockjs 概述

mock.js官网

引入mockjs

在src目录下新建一个mock.js文件

简单使用

运行结果

最新文章

热门文章

巴特西

Vue---mock.js 使用

mockjs 概述

mock.js官网

引入mockjs

在src目录下 新建一个mock.js文件

简单使用

运行结果

最新文章

热门文章

在src目录下新建一个mock.js文件