前端使用mock，模拟后端接口

常我们在做项目时会遇到后端接口还没有完成的情况，这个时候我们可以使用mock 实现本地模拟后端接口来测试前端代码效果

1、安装mock

npm install mockjs

2、 创建一个mock.js文件

下面编写两个接口，一个是get请求，一个是post请求带分页

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

// const produceNewsData = function () {
  let articles = []
  for (let i = 0; i < 100; i++) {
    let newArticleObject = {
      title: Random.csentence(5, 30), //  Random.csentence( min, max )
      author_name: Random.cname(), // Random.cname() 随机生成一个常见的中文姓名
      date: Random.date() + ' ' + Random.time() // Random.date()指示生成的日期字符串的格式,默认为yyyy-MM-dd；Random.time() 返回一个随机的时间字符串
    }
    articles.push(newArticleObject)
  }
// }
console.log(articles,'articles')
// 拦截ajax请求，配置mock的数据
Mock.mock('/api/articles', 'get', articles)
Mock.mock('/api/articles', 'post', (params)=>{
  console.log(params)
  const [index,size,total] = [JSON.parse(params.body).pageIndex,JSON.parse(params.body).pageSize,articles.length]
  let len = total/size;
  console.log(index,size,total)
  const totalPages = len - parseInt(len) >0 ? parseInt(len)+1 : len
  const newProduceNewsData = articles.slice(index * size, (index+1)*size)
  return {
    code: '0',
    message: 'success',
    data:{
      pageIndex: index,
      pageSize: size,
      list: newProduceNewsData,
      total: total,
      totalPages: totalPages
    }
  }
})

3、 引用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')

4、去相应的界面使用

import axios from 'axios'
 mounted(){
      axios.get('/api/articles')
        .then(e => {
          console.log(e)
        })
        .catch(err => {
          console.log(err)
        })
      axios.post('/api/articles',{pageIndex:2,pageSize:20})
        .then(e => {
          console.log(e)
        })
        .catch(err => {
          console.log(err)
        })
    },

效果如图所示