javaVue前后端分离

转载

mob6454cc77db30 2024-09-17 11:48:22

文章标签 javaVue前后端分离数据前端工程师 post请求 文章分类 Java 后端开发

接触mock

最近在进行项目重构，需要实现前后端分离，所以在开发的过程中就接触到了mock，在使用过程中，也发现它有一些好处，

转载：作者Fuohua的一片文章《Mock的好处是什么？》

1. 团队可以并行工作

有了Mock，前后端人员只需要定义好接口文档就可以开始并行工作，互不影响，只在最后的联调阶段往来密切；后端与后端之间如果有接口耦合，也同样能被Mock解决；测试过程中如果遇到依赖接口没有准备好，同样可以借助Mock；不会出现一个团队等待另一个团队的情况。这样的话，开发自测阶段就可以及早开展，从而发现缺陷的时机也提前了，有利于整个产品质量以及进度的保证。

2. 开启TDD模式，即测试驱动开发
单元测试是TDD实现的基石，而TDD经常会碰到协同模块尚未开发完成的情况，但是有了mock，这些一切都不是问题。当接口定义好后，测试人员就可以创建一个Mock，把接口添加到自动化测试环境，提前创建测试。

3. 可以模拟那些无法访问的资源
比如说，你需要调用一个“墙”外的资源来方便自己调试，就可以自己Mock一个。

4. 隔离系统
假如我们需要调用一个post请求，为了获得某个响应，来看当前系统是否能正确处理返回的“响应”，但是这个post请求会造成数据库中数据的污染，那么就可以充分利用Mock，构造一个虚拟的post请求，我们给他指定返回就好了。

5. 可以用来演示
假如我们需要创建一个演示程序，并且做了简单的UI，那么在完全没有开发后端服务的情况下，也可以进行演示。说到演示了，假如你已经做好了一个系统，并且需要给客户进行演示，但是里面有些真实数据并不想让用户看到，那么同样，你可以用Mock接口把这些敏感信息接口全部替换。

6. 测试覆盖度
假如有一个接口，有100个不同类型的返回，我们需要测试它在不同返回下，系统是否能够正常响应，但是有些返回在正常情况下基本不会发生，难道你要千方百计地给系统做各种手脚让他返回以便测试吗？比如，我们需要测试在当接口发生500错误的时候，app是否崩溃，别告诉我你一定要给服务端代码做些手脚让他返回500 。。。而使用mock，这一切就都好办了，想要什么返回就模拟什么返回，妈妈再也不用担心我的测试覆盖度了！

在以上6点中我接触到以及使用到了1，3,4，5点，2点还没有接触到，6点应该也接触了，但是并没有什么印象，不过整体给我的感受是，提高效率节省时间又很方便。nice nice~

如何使用mock

如何安装：

官网地址：http://mockjs.com/

Node (CommonJS)

# 安装
npm install mockjs

// 使用 Mock
var Mock = require('mockjs')
var data = Mock.mock({
    // 属性 list 的值是一个数组，其中含有 1 到 10 个元素
    'list|1-10': [{
        // 属性 id 是一个自增数，起始值为 1，每次增 1
        'id|+1': 1
    }]
})
// 输出结果
console.log(JSON.stringify(data, null, 4))

关于其他的安装，我们进官网看下哈，它里面的安装过程和规范，操作之类的东东很详细哈，大家可进去自行看下哈，这里我就不多说啦

首先在mock文件夹下创建index.js文件，这里就是我们注册所有mock服务的地方

// 首先引入Mock
const Mock = require('mockjs');

// 设置拦截ajax请求的相应时间
Mock.setup({
  timeout: '200-600'
});

let configArray = [];

// 使用webpack的require.context()遍历所有mock文件
const files = require.context('.', true, /\.js$/);
files.keys().forEach((key) => {
  if (key === './index.js') return;
  configArray = configArray.concat(files(key).default);
});

// 注册所有的mock服务
configArray.forEach((item) => {
  for (let [path, target] of Object.entries(item)) {
    let protocol = path.split('|');
    Mock.mock(new RegExp('^' + protocol[1]), protocol[0], target);
  }
});

服务注册好之后，在main.js中引入

// main.js
require('./mock');

在mock文件夹下随便创建一个文件demoList.js
在该文件中，我们可以按照index注册服务的格式来写我们的mock

let demoList = [{
        id: 1,
        name: 'zs',
        age: '23',
        job: '前端工程师'
    },{
        id: 2,
        name: 'ww',
        age: '24',
        job: '后端工程师'
    }]

export default {
    'get|/parameter/query':  option => {
    return {
      status: 200,
      message: 'success',
      data: demoList
    };
  }
}

当我们在页面发起了ajax请求，路径是’/parameter/query’，并且请求方式是get时，就会返回我们写好的mock数据。

我们也可以使用template返回

let demoList = {
    status: 200,
    message: 'success',
    data: [{
        id: 1,
        name: 'zs',
        age: '23',
        job: '前端工程师'
    },{
        id: 2,
        name: 'ww',
        age: '24',
        job: '后端工程师'
    }]
};
let demoList2 = [{
        id: 1,
        name: 'zs',
        age: '23',
        job: '前端工程师'
    },{
        id: 2,
        name: 'ww',
        age: '24',
        job: '后端工程师'
    }];
export default {
    'get|/parameter/query': demoList,
      // 也可以这样写
      // 官方解释为：记录用于生成响应数据的函数。当拦截到匹配 rurl 和 rtype 的 Ajax 请求时，函数 function(options) 将被执行，并把执行结果作为响应数据返回。
    'get|/parameter/query': (option) => {
      // 可以在这个地方对demoList2进行一系列操作，例如增删改
      // option 指向本次请求的 Ajax 选项集，含有 url、type 和 body 三个属性
      return {
            status: 200,
            message: 'success',
            data: demoList2
        };
  }
}

当然，当我们想要展示大量数据时，不可能一个一个的写，那样又费时又费力，这是我们就可以根据mockjs的语法规范来快速生成一系列的数据

let demoList = {
  status: 200,
  message: 'success',
  data: {
    total: 100,
    'rows|10': [{
      id: '@guid',
      name: '@cname',
      'age|20-30': 23,
      'job|1': ['前端工程师', '后端工程师', 'UI工程师', '需求工程师']
    }]
  }
};
export default {
    'get|/parameter/query': demoList
}

这样我们就可以每次随机生成10条数据，总数为100条，其中id和name使用的占位符，age是随机取出20-30中的数字，job是随机取出其后数组中的某一项，这在mock文档里都有说明。

以上，就是我们在项目中如何使用mock咯。

作者：彼得潘北北

补充

因为以往我们是搞个xml文件放在项目文件夹里面，里面按格式写好假数据，就不用访问数据库了
正常操作是后端访问数据库，根据数据生成一个xml传到前端,这个和mock的这个道理差不多，项目本地的mock，在本地会启动一个mock-server来模拟数据，所有的数据模拟都是基于mockjs生成的，由于是一个真正的server，这样就可以在本地通过控制台中的network调试，清楚的知道接口返回的数据结构。如果部署到线上，就是上面那种读取本地mock文件的假数据了