mock

一、mock解决的问题 　　开发时，后端还没完成数据输出，前端只好写静态模拟数据。数据太长了，将数据写在js文件里，完成后挨个改url。某些逻辑复杂的代码，加入或去除模拟数据时得小心翼翼。想要尽可能还原真实的数据，要么编写更多代码，要么手动修改模拟数据。特殊的格式，例如IP,随机数，图片，地址，需要去收集 二、mock优点 　　 　　1、前后端分离 　　让前端工程师独立于后端进行开发。 　　2、增加单元测试的真实性 　　通过随机数据，模拟各种场景。 　　3、开发无侵入 　　不需要修改既有代码，就可以拦截Ajax请求，返回模拟的响应数据。 　　4、用法简单 　　符合直觉的接口。 　　5、数据类型丰富 　　支持生成随机的文本、数字、布尔值、日期、邮箱、链接、图片、颜色等。 　　6、方便扩展 　　支持支持扩展更多数据类型，支持自定义函数和正则。 　　7、在已有接口文档的情况下，我们可以直接按照接口文档来开发，将相应的字段写好，在接口完成 之后，只需要改变url地址即可。 三、mock的基本使用 　　 　　1、安装mockJS cnpm install mockjs -S 　 2、使用mockJS（mock/index.js） import Mock from "mock"; 3、官方文档 https://github.com/nuysoft/Mock/wiki/Syntax

一、准备工作 1、vue全家桶 2、mock 安装配置 作⽤：⽣成随机数据，拦截ajax请求 安装： 用yarn或者npm yarn add mockjs npm install mockjs 核⼼： Mock.mock() // 根据数据模板⽣成模拟数据 Mock. mock ( rurl, rtype, template ) /* ** rurl: 表示需要拦截的 URL，可以是 URL 字符串或 URL 正则 ** eg. /\/domain\/list\.json/、'/domian/list.json' */ Mock.Random() 随机⽣成数据 3、axios 全局配置 安装: npm install axios 目录 src/api/config.js import axios from "axios" ; // 创建一个axios实例 const service = axios.create ( { // 请求超时时间 timeout: 3000 } ) ; // 添加请求拦截器 service.interceptors.request.use ( config = > { return config ; } , err = > { console.log ( err ) ; } ) ; // 添加响应拦截器 service.interceptors

前后台分离开发 mock数据 前后台分离，在后端接口，没有写好时，自己mock数据。数据字段 一定要和后端 设计数据库一样 json-sever https://github.com/typicode/json-server#getting-started 1，安装 全局 npm i json-server -g 2,在任意目录 （项目根目录）创建 db.json { "posts": [ { "id": 1, "title": "json-server", "author": "typicode" } ], "comments": [ { "id": 1, "body": "some comment", "postId": 1 } ], "profile": { "name": "typicode" } } 在命令行 json-server --watch db.json Now if you go to http://localhost:3000/posts/1 { "id": 1, "title": "json-server", "author": "typicode" } charles 抓包工具 vuex Vuex 是一个专为 Vue.js 应用程序开发的 状态管理模式 。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex

首先来简单介绍一下mock是什么，是用来做什么的（复制的官网内容）： 生成随机数据，拦截 Ajax 请求 官网给了一句话来介绍mock，按照我的个人理解，就是mock会把我们通过ajax或者axios发送的请求给拦截，并同时给我们模仿后端给返回我们需要的数据。 接下来给大家简单说一下vue中mock 的安装及使用。 安装： npm install mockjs - D 我们执行命令后就可以在我们的项目中安装好mock的依赖，我前面说过，mock是拦截请求的，所以我们的基础是要发请求，所以安装mock的前提是安装好axios，如果有些朋友不太清楚axios的安装，我把命令贴出来： npm install axios - S 安装完成之后，我们vue的项目就可以开始使用mock了 使用方法： 我们可以新建一个mock.js的文件，当然这个文件的名称可以随便起，然后我们在里面内容，例子如下： var Mock = require ( 'mockjs' ) Mock . mock ( "/getNewsList" , ( ) => { return [ 1 , 12 , 3 , 5 , 4 , 45 , "nihao" ] ; } ) 完成了mock.js的内容后，我们在main.js中引入mcok.js（路径写相对路径就行），代码如下： require ( "./mock.js" )

第1章 课程介绍（不要错过） 本章主要讲解课程的详细安排、课程学习要求、课程面向用户等，让大家很直观的对课程有整体认知！ 第2章 接口测试工具Fiddler的运用 本章重点讲解如何抓app\web的http\https请求包、如何模拟请求数据、过滤规则及修改响应数据、如何解决无法抓包问题 以及fiddler接口测试，让大家能应用好工具！ 第3章 Requests常见方法实战运用 本章重点讲解 get\post请求测试、接口测试中结果处理、上传\下载文件接口测试、请求中header及cookie处理、登陆接口加秘密字段处理及session的管理，重点让大家掌握Requests常见的方法。 第4章 get\post接口开发实战 本章主要讲解开发接口环节搭建、flask开发get接口以及flask开发post接口，让大家深入掌握接口开发！ 第5章 Mock服务如何实现 本章重点讲解Mock实现原理和实现、case中Mock的实现以及MockRunner的使用，重点让大家掌握Mock服务。 第6章 Unittest的使用 本章重点讲解unittest介绍及使用 、unittest中断言、unittest中case的管理、unittest和接口测试结合及接口测试之报告生成。 第7章 接口自动化框架设计 本章重点讲解持续集成环境搭建、 jenkins插件管理、Jenkins邮件配置

1. 测试类型 单元测试：指的是以原件的单元为单位，对软件进行测试。单元可以是一个函数，也可以是一个模块或一个组件，基本特征就是只要输入不变，必定返回同样的输出。一个软件越容易些单元测试，就表明它的模块化结构越好，给模块之间的耦合越弱。React的组件化和函数式编程，天生适合进行单元测试 功能测试：相当于是黑盒测试，测试者不了解程序的内部情况，不需要具备编程语言的专门知识，只知道程序的输入、输出和功能，从用户的角度针对软件界面、功能和外部结构进行测试，不考虑内部的逻辑 集成测试：在单元测试的基础上，将所有模块按照设计要求组装成子系统或者系统，进行测试 冒烟测试：在正式全面的测试之前，对主要功能进行的与测试，确认主要功能是否满足需要，软件是否能正常运行 2. 开发模式 TDD: 测试驱动开发，英文为Testing Driven Development，强调的是一种开发方式，以测试来驱动整个项目，即先根据接口完成测试编写，然后在完成功能是要不断通过测试，最终目的是通过所有测试 BDD: 行为驱动测试，英文为Behavior Driven Development，强调的是写测试的风格，即测试要写的像自然语言，让项目的各个成员甚至产品都能看懂测试，甚至编写测试 TDD和BDD有各自的使用场景，BDD一般偏向于系统功能和业务逻辑的自动化测试设计

mock-server 在新项目开始的时候，后端框架还没有，前端就有能够自己操作的模拟数据的服务是可以有的 express-mockjs 是楼教主结合 express+mock-lite 造的一个轮子，可以快速的帮助我们在本地搭建一个 mock 服务器 相关资料： express-mockjs mock-lite express 安装 express-mockjs 到项目 安装 express-mockjs(v0.4.9): npm install express-mockjs --save-dev 安装 nodemon 到项目 以监听 mock 代码修改 安装 nodemon(v1.17.4): npm install nodemon --save-dev 新建 mock-server/index.js 编写启动服务器代码 var path = require('path') var express = require('express') var mockjs = require('express-mockjs') var app = express() // 自定义路径 前缀： '/api' var config = { port: 3000 } //以/api为前缀，寻找api目录下的所有接口 app.use('/api', mockjs(path.join(_

jest 是facebook推出的一款测试框架，集成了 Mocha，chai，jsdom，sinon等功能。 安装与配置 npm install --save-dev jest npm install -g jest 运行命令 jest 后会自动运行项目下所有 .test.js和 .spec.js这种格式的文件。涉及到运用 ES 或 react 的，要与babel相结合，加上.babelrc文件即可。jest的配置默认只需要在package.json中配置即可，当然也可以用独立的配置文件。 我们这里直接将 jest 的运行范围限定在test文件夹下，而不是全部，所以在package.json中加入如下配置： "jest": { "testRegex": "/test/.*.test.jsx?$" } 注意到这里的匹配规则是正则表达式 基本用法 和之前介绍的 mocha 和 chai 的功能很像，甚至可以兼容部分 mocha 和 chai 的语法。可以这么写 import React from 'react' import { shallow } from 'enzyme' import CommentItem from './commentItem' describe('测试评论列表项组件', () => { // 这是mocha的玩法，jest可以直接兼容 it(

mock数组数据： import Mock from ‘mockjs’ // 获取用户的 //响应模板 // Mock.mock(//api/sendwork/, { // ‘code’: 2000, // ‘data|2-10’: [ // { // ‘SNO|+1’: 1, // ‘name’: ‘@CNAME’, // ‘ischecked’: false, // ‘account|+1’: 10000, // ‘SNO|+1’: 1, // ‘avatar’: { // ‘url’: ‘@IMAGE(50x50)’ // }, // } // ] // }) // //获取历史发送人列表 // Mock.mock(//api/sendhistory/, { // ‘code’: 2000, // ‘data|4-10’: [ // { // ‘SNO|+1’: 1, // ‘name’: ‘@CNAME’, // ‘ischecked’: false, // ‘account|+1’: 10000, // ‘SNO|+1’: 1, // ‘avatar’: { // ‘url’: ‘@IMAGE(50x50)’ // } // } // ] // }) //历史联系人默认值 // const initUserHistory = Mock.mock([ // { //

http://mockjs.com/ Mock.js 是一款前端开发中拦截 Ajax 请求再生成随机数据响应的工具.可以用来模拟服务器响应. 优点是非常简单方便, 无侵入性, 基本覆盖常用的接口数据类型. 大概记录下使用过程, 详细使用可以参见Mock文档 Mock Wiki 安装 使用npm安装: npm install mockjs ; 或直接 <script src="http://mockjs.com/dist/mock.js"></script> ; 数据模板格式: 'name|rule': value 属性名|生成规则: 属性值 GET请求 发起get请求: $.ajax({ url: 'http://test.com', type: 'get', dataType: 'json' }).done(function(data, status, xhr) { console.log(JSON.stringify(data, null, 4)); }); Mock.js响应: var obj = {'aa':'11', 'bb':'22', 'cc':'33', 'dd':'44'}; // Mock响应模板 Mock.mock('http://test.com', { "user|1-3": [{ // 随机生成1到3个数组元素 'name': '@cname', //