于是就需要在前后端分离开发时,能够代替对方进行模拟测试的工具,通常前端使用 Mockjs,后端使用 Postman。
双方讨论设计好 API 后(比如 RESTful API),都根据 API 文档的规范进行 API 实现以及调用。在做好 API 文档后,前端和后端就可以老死不相往来,各自调试各自的代码了
如果后端 API 接口还未开发完成,前端需要模拟后端接口返回随机数据,来完成数据交互
npm install mockjs
//引入mock模块
import Mock from 'mockjs';
Mock.mock('https://www.test.com',{
……
})
import Vue from 'vue'
import App from './App.vue'
import './mock/mock.js'
new Vue({
render: h => h(App),
}).$mount('#app')
npm install axios
import axios from 'axios'
# 定义 Post 请求
Mock.mock('/api/post/user','post',()=>{
return {
status: 200,
message: '添加新闻列表数据成功'
}
})
<template>
<div id="app">
div>
template>
<script>
export default {
created() {
axios.post('/api/post/user')
.then(res => console.log(res)),
}
}
script>
<style lang="less" scoped>
style>
'name | rule' : value
属性名|生成规则:属性值
# 通过重复 string 生成一个字符串,重复次数大于等于 min,小于等于 max
'name|min-max': string
Mock.mock({
"string|1-10": "★"
})
$.ajax({
url: 'http : / /test.com',type: 'get' ,
dataType: 'json'
}).done(function(data,status, xhr) {
console.log( SOw.stringify(data,null,4) );});
Mock.mock( ' http: //test.com', 'get ', function() {
return Mock.mock({
"user|1-3":[{
'name ': '@cname ' ,'id ': 88
}
]});});
{
'user" : [
{
"name" :“许超","id": 88
}
]
}
Mock.Random是一个工具类,用于生成各种格式随机数据.
Type | Method |
---|---|
Basic | boolean, natural, integer, float, character, string, range, date, time, datetime, now |
Image | image,dataImage |
Color | color |
Text | paragraph, sentence, word, title, cparagraph, csentence, cword, ctitle |
Name | first, last, name, cfirst, clast, cname |
Web | url, domain, email, ip, tld |
Address | area, region |
//设置4秒后再响应
Mock.setup({ timeout: 4000 });
//设置1秒至4秒间响应
Mock.setup({ timeout : '1000-4000’});
Mock.valid(template,data)
:用来校验真实数据 data
是否与数据模板 template
匹配var tempobj = { "user|1-3": [{ 'name ' : '@cname ' , 'id|18-28': 88 }]};
var realData = { "user": [{ 'name ' : '张三', 'id': 90 } ]};
console.log(Mock.valid(tempobj, realData) ) ;
Mock.toJSONSchema(template)
:用来把 Mock.js
风格的数据模板 template
转换成 JsoN Schemavar tempobj = { "user|1-3": [{ 'name ' : '@cname ' , 'id|18-28': 88 } ]};
console.log(Mock.toJsoNschema(tempobj)) ;
tar zxvf ***.tar.gz
sudo ln -s /home/XXX(下载目录)/Postman/Postman /usr/bin/postman
postman
打开New: 新建,可以创建 request(请求),collection(请求集),environment(环境变量)等。
Inport:导入,可以导入 postman 请求集,curl 等一些请求文件。
Runner: 执行请求,可以选择执行请求的 collection,并且添加执行参数,例如执行时间,执行次数等等。
Workspace: 工作台,可以选择使用个人工作台或团队工作台,可以创建 team 并且邀请成员加入一起编辑使用请求集。
History: 历史请求,所有调试的历史请求数据
Collection: 请求集,可以创建保存,将某些请求放到一起形成请求集
Environment: 环境变量,管理设置的环境变量,可以设置全局环境变量,也可新建环境,添加环境变量
HTTP 请求的4部分包括 Url、请求的 Method,Headers,Body。
body 也有不同的类型
1.
form-data
网页表单用来传输数据的默认格式,可以模拟填写表单,并且提交表单。既可以上传键值,也可以上传文件,作为 key 的 value 提交。
2.x-www-form-urlencoded
即 application/x-www-from-urlencoded,会将表单内的数据转换为键值
3.raw
可以上传任意格式的文本,如 text、json、xml、html 等
4.binary
相当于Content-Type – application/octet-stream,只可以上传二进制数据,通常用来上传文件
- pretty:格式化 json 或 xml 形式的内容
- raw:响应体的一个大文本
- preview:在一个沙盒的 frame 中渲染响应的内容
POST 参数格式 | Content-Type | 参数示例 |
---|---|---|
表单提交 | application/x-www-form-urlencoded | name=MOSAD&&password=2020 |
JSON 提交 | application/json | {“name”:“MOSAD”,“pwd”:“2020”} |
xml 提交 | text/xml | 现代操作系统 |
1、
Basic Auth
基础的验证,直接把用户名、密码的信息放在请求的 Header 中
2、Digest Auth
使用当前填写的值生成 authorization header
3、OAuth 1.0
postman 的 OAuth helper 让你签署支持 OAuth 1.0基于身份验证的请求。OAuth 不用获取 access token。OAuth 1.0 可以在 header 或者查询参数中设置 value
4、OAuth 2.0
postman 支持获得 OAuth 2.0 token 并添加到 request 中