前端003_模拟数据接口_easymock

为了不影响大家的学习，如果后端的api数据还没有生成，可以先使用mock.js来模拟数据接口，提供对外服务的api接口。

对接 Mock.js 模拟数据接口

1、Mock.js 解决什么问题

• 问题：
  前后端分离项目，前端和后端人员都是根据 API 文档进行开发项目的，不应该直接相互依赖， 前端人员不应该等
  待后端开发好接口后再进行测试，既然不依赖后端接口，那前端人员应该如何测试呢？
• 解决：
  可以通过模拟数据生成器，通过一定规则 （API文档）生成模拟数据接口, 提供给前端人员进行测试。

2、设么是Mock.js

• 官网：http://mockjs.com/
• 文档：https://github.com/nuysoft/Mock/wiki
• Mock.js 是用于生成随机数据，拦截 Ajax 请求。
  通过拦截 Ajax 请求，根据数据模板生成并返回模拟数据，让前端攻城师独立于后端进行开发，帮助编写单元测试。

3、使用EasyMock

3.1 什么是 EasyMock

Easy Mock 是一个可视化，并且能快速生成模拟数据的服务。是杭州大搜车无线团队出品的一个极其简单、高效、可视化、并且能快速生成模拟数据的在线 Mock 服务 。
现在 Easy Mock 内置了 Mock.js，我们可以更愉快的伪造数据了
网址下载： https://github.com/easy-mock/easy-mock

$ git clone https://github.com/easy-mock/easy-mock.git
$ cd easy-mock && npm install

• 注意：
  easy-mock 的安装还是比较麻烦，需要事先安装mongodb redis 。

3.2 创建项目

1. 访问 http://192.168.16.11：7300/ ，进行登录。
   注意：没有单独的注册页面，第一次输入的用户名和密码会自动帮你注册。
   
2. 点击右下角 + ， 创建一个项目
   
3. 创建一个项目，如下：
   

3.3 创建测试数据接口

1. 点击 创建接口
   

2. EasyMock 添加模拟数据配置
   请求地址：/test
   请求方式：get

{
"code": 20000,
"message": "操作成功"
}

3. 点击预览，测试数据接口是否正常

3.4 调用数据接口

1. 在 vue.config.js 文件中使用 devServer.proxy 选项进行代理配置
   注意：复制自己创建的 Base URL

 devServer: {
    port: port,
    open: true,
    overlay: {
      warnings: false,
      errors: true
    },
    before: require('./mock/mock-server.js'),
    // 开发环境配置
    proxy: {
      [process.env.VUE_APP_BASE_API]: { // 是.env.development 文件的'/dev-api':
        // 目标服务器地址
        target: ' https://192.168.16.11:7900/mock/64557f4faf3bc37f99a23c05/db',
        changeOrigin: true, // 开启代理服务器，
        pathRewrite: {
          // '^/dev-api': '',
          ['^' + process.env.VUE_APP_BASE_API]: ''
        }
      }
    }
  }

2. 创建 src/api/test.js 文件，定义调用接口 API

import request from '@/utils/request'
export default {
    test() {
        return request({
            url: '/test',
            method: 'get'
        })
    }
}

3. 调用接口获取数据

src/views/dashboard/index.vue
<script>
// 引入 api
import api from '@/api/test'
export default {
  name: 'Dashboard',
  created() {
    this.fetchData()
  },
  methods: {
    fetchData() {
      api.test().then(response => {
      console.log(response)
    })
   }
  }
}
</script>

4. 访问 http://localhost:9528/#/dashboard 查看浏览器是否打印值
   

3.5 Post 请求带参数 报请求超时

1. post接口
   修改下 /test 接口请求方式为 post
   

2. 修改 src/api/test.js 文件，定义调用接口 API
   通常post调用的时候都会传输数据

import request from '@/utils/request'
export default {
    test() {
        return request({
            url: '/test',
            method: 'post',
            data: {'name': '数哥'}
        })
    }
}

3. 重启，访问页面报错
   Axios 如果发送Post请求，并且带上请求参数时，会一直报请求超时，如下
   
4. 原因：
   这个问题是因为mock-server中express的中间件body-parser导致的，表现为不带参数请求没有问题，带上

3.6 解决方案

1. 将 mock\mock-server.js 文件下面的注释掉，再加上新的（大概第12行）

  for (const mock of mocksForServer) {
    // app[mock.type](mock.url, mock.response)
    app[mock.type](mock.url, bodyParser.json(), bodyParser.urlencoded({
      extended: true
      }), mock.response)      
    mockLastIndex = app._router.stack.length
  }

2. 然后往下拉，找到下面的注释掉

  // parse app.body
  // https://expressjs.com/en/4x/api.html#req.body
  // app.use(bodyParser.json())
  // app.use(bodyParser.urlencoded({
  //   extended: true
  // }))

3. 修改后，完整的图示：
   

4. 验证