前端基础学习-mock模拟后台接口返回

前端基础学习-mock模拟后台接口返回

第一步：安装mockjs

npm install mockjs --save-dev

第二步：/src下创建 mock.js 文件

mock.js内容

// 引入mockjs
const Mock = require('mockjs')
// 获取 mock.Random 对象
const Random = Mock.Random
// mock一组数据

// 用于接受生成数据的数组
let tableList = []
for (let i = 0; i < 100; i++) {
  let newObject = {
    title: Random.csentence(5, 10), //  Random.csentence( min, max )
    name: Random.cname(), // Random.cname() 随机生成一个常见的中文姓名
    url: Random.url(), // 生成web地址
    date: Random.date() + ' ' + Random.time() // Random.date()指示生成的日期字符串的格式,默认为yyyy-MM-dd；Random.time() 返回一个随机的时间字符串
  }
  tableList.push(newObject)
}
// }
// console.log(tableList, 'tableList')
// 拦截ajax请求，配置mock的数据
// get请求
Mock.mock('/api/mockGetList', 'get', tableList)
// post请求分页
Mock.mock('/api/pageList', 'post', (params) => {
  console.log(params, 'params')
  const [index, size, total] = [JSON.parse(params.body).page, JSON.parse(params.body).size, tableList.length]
  let len = total / size
  console.log(index, size, total, 'index, size, total')
  const totalPages = len - parseInt(len) > 0 ? parseInt(len) + 1 : len
  // 截取list
  // const newProduceNewsData = tableList.slice(index * size, (index + 1) * size)
  const newProduceNewsData = tableList.slice((index - 1) * size, index * size)
  console.log(newProduceNewsData, 'newProduceNewsData')
  return {
    code: '0',
    message: 'success',
    data: {
      page: index,
      size: size,
      list: newProduceNewsData,
      total: total,
      totalPages: totalPages
    }
  }
})

第三步：引用mock，在dev.env.js中设置为true

'use strict'
const merge = require('webpack-merge')
const prodEnv = require('./prod.env')

module.exports = merge(prodEnv, {
  NODE_ENV: '"development"',
  Mock: true
})

第四步：在prod.env.js生产环境中设置为false

'use strict'
module.exports = {
  NODE_ENV: '"production"',
  Mock: false
}

第五步：在main.js中引入

process.env.Mock && require('./mock.js')

第六步：去相应的界面使用

<template>
  <div>
    <el-row>
      <el-col :span="12">
        <h3>mock模拟get接口（不分页）</h3>
        <el-table  :data="MockList" border ref="multipleTable" height="400">
          <el-table-column prop="title" label="标题" show-overflow-tooltip></el-table-column>
          <el-table-column prop="url" label="请求地址" show-overflow-tooltip></el-table-column>
          <el-table-column prop="name" label="操作人" show-overflow-tooltip></el-table-column>
          <el-table-column prop="date" label="时间" show-overflow-tooltip></el-table-column>
        </el-table>
      </el-col>
      <el-col :span="12">
        <h3>mock模拟get接口2</h3>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="12">
        <h3>mock模拟post分页接口</h3>
        <el-table  :data="MockPageList" border ref="multipleTable" height="400">
          <el-table-column prop="title" label="标题" show-overflow-tooltip></el-table-column>
          <el-table-column prop="url" label="请求地址" show-overflow-tooltip></el-table-column>
          <el-table-column prop="name" label="操作人" show-overflow-tooltip></el-table-column>
          <el-table-column prop="date" label="时间" show-overflow-tooltip></el-table-column>
        </el-table>
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="searchForm.page"
          :page-sizes="[40, 80]"
          :page-size="searchForm.size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        ></el-pagination>
      </el-col>
      <el-col :span="12">
        <h3>自定义样式实现list分页</h3>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import axios from 'axios'
import commonFuc from '@/assets/js/commonFuc'
export default {
  name: 'tableMockList',
  mixins: [commonFuc],
  data () {
    return {
      MockList: [],
      MockPageList: [],
      searchForm: {
        page: 1,
        size: 40
      },
      total: 0
    }
  },
  mounted () {
    this.getMockList()
    this.getList()
  },
  methods: {
    getMockList () {
      axios.get('/api/mockGetList')
        .then(res => {
          // console.log(res, 'mock模拟get接口获取result')
          this.MockList = res.data
        })
        .catch(err => {
          console.log(err)
        })
    },
    getList () {
      axios.post('/api/pageList', this.searchForm)
        .then(res => {
          console.log(res, 'res')
          this.MockPageList = res.data.data.list
          this.total = res.data.data.total
        })
        .catch(err => {
          console.log(err)
        })
    }
  }
}
</script>

<style lang='css' scoped>
.el-col-12 {
  border-right: 1px solid #e6e6e6;
  padding:0 20px 20px 20px;
}
.el-row {
  border-bottom: 1px solid #e6e6e6;
}
</style>