首页 > 博客列表 > 【JSON-SERVER】Restful API数据接口测试(基于：json-server 和 Mockjs)

博主信息

博文 94

粉丝 0

访问量 89441

专题推荐

更多>

Restful API数据接口测试

基于：json-server 和 Mockjs

1. JSON-SERVER

1.1 json-server 介绍

json-server:存储 json 数据的服务器
模拟服务器端 json 数据接口
前端可不依赖后端，自己产生接口测试数据
[json-server 官网] (https://www.npmjs.com/package/json-server)

1.2 检查环境 && 安装 json-server

node -v #查看node版本npm -v #查看npm版本npm root -g #查看npm全局安装路径npm root #查看当前路径npm uninstall json-server -g #卸载josn-servernpm -list -g #查看npm安装的应用npm install json-server -g #安装 json-server 到全局json-server -v  #查看 json-server 版本如果提示：#Error:此系统禁止运行脚本，输入这条指令提权set-executionpolicy remotesigned

1.3 配置 json-server

文件名：json-server.json

{    "host": "localhost",    "port": 3000,   //端口号    "watch": true,  //自动监听    "static": "./src",  //静态资源名称    "version": "1.0"}

1.4 启动服务

1.命令： json-server db-items.json 
启动后，会生成：db-items.json文件

//是一个json对象{    // 每一个属性,如api就是一个资源接口    "api1":[{...}, {...}, {...}, {...}, {...}].    "api2":[{...}, {...}, {...}, {...}, {...}].    "api3":[{...}]}

2. Mockjs 产生接口测试数据

2.1 Mockjs 安装调试

安装 Mockjs: npm i mockjs
创建 mock-data.js ,生成商品演示数据
将接口数据复制到 db-items.json 文件中(json服务器)
重启 json-server 服务,指定资源服务器是 db-items.json
json-server db-items.json

2.2 测试数据生成器基于:Mockjs

// 随机成生5个商品信息const Mock = require('mockjs')// 一条商品信息的字段const item = {    // id:自增    'id|+1':1,    // 商品名称    title:'@ctitle(3,10)',    // 商品价格    price:'@float(5,100,1,2)',    // 商品库存    stock:'@integer(1,10)',    // 商品描述    desc:'@cparagraph(1,2)',}// 生成5条数据const opts = {    'items|5': [item],}// 调用 Mock.mock生成数据const data = Mock.mock(opts)console.log(JSON.stringify(data, null, 2))

2.3 复制生成的 json 数据到 db-items.json

{  "items": [    {      "title": "手机",      "price": 5000,      "desc": "华为手机真好用",      "id": 1    },    {      "id": 2,      "title": "笔记本电脑",      "price": 6000,      "stock": 2,      "desc": "精即强感六步流位中己飞向间及安农立数。"    },    {      "id": 4,      "title": "军已提联龙候月传或",      "price": 94.5,      "stock": 4,      "desc": "切为通明证见进利气多细式革商下记且圆。几三断东放做每何说国物保处。"    },    {      "id": 5,      "title": "才性很出",      "price": 47.35,      "stock": 2,      "desc": "军书律地前选情示按史报定立月才。将件空油江难感素志基两并理装合表按。"    },    {      "title": "西瓜",      "price": 50,      "stock": 100,      "desc": "西瓜大又甜.西瓜大又甜",      "id": 6    },    {      "title": "西瓜",      "price": 50,      "stock": 100,      "desc": "西瓜大又甜.西瓜大又甜",      "id": 7    }  ]}

3. 接口文件示例

GET: 获取POST: 添加PUT: 整体更新PATCH:部分更新DELETE:删除

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta http-equiv="X-UA-Compatible" content="IE=edge">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>JSON-SERVER测试接口</title></head><body>    <h1>欢迎访问JSON-SERVER测试接口</h1>    <!--     GET: 获取    POST: 添加    PUT: 整体更新    PATCH:部分更新    DELETE:删除     -->    <!-- GET -->    <h2>GET:获取资源</h2>    <ul>        <!-- 获取全部数据 -->        <li><a href="http://localhost:3000/items">items接口(全部数据)</a></li>        <!-- 获取1条,默认根据ID -->        <li><a href="http://localhost:3000/items/1">items接口(单条数据)</a></li>        <!-- 获取多条数据 -->        <li><a href="http://localhost:3000/items?id=1&id=2">items接口(多条数据)</a></li>        <!-- 模糊查询 -->        <li><a href="http://localhost:3000/items?title_like=军">items接口(模糊查询)</a></li>        <!-- 区间查询 关键字:gte (大于等于), lte (小于等于) -->        <li><a href="http://localhost:3000/items?price_gte=20&price_lte=50">items接口(区间查询)</a></li>        <!-- 全文搜索 q -->        <li><a href="http://localhost:3000/items?q=军">items接口(全文搜索)</a></li>    </ul>    <hr>    <h2>POST:添加资源</h2>    <button onclick="addItem()">添加一个商品</button>    <script>        async function addItem() {            const url = "http://localhost:3000/items"            //创建需要增加的数据            const item = {                //id:6,可不写                title: "西瓜",                price: 50,                stock: 100,                desc: '西瓜大又甜.西瓜大又甜',            }            // 定义一个 fetch 对象            const response = await fetch(url, {                method: 'POST',                headers: {                    'Content-Type': 'application/json;charset=utf-8',                },                body: JSON.stringify(item),            })            // 执行 response object            const data = await response.json();            // 打印输入            console.log(data);        }    </script><h2>PUT:覆盖式更新资源</h2><button onclick="editItem()">更新一个商品</button><script>    async function editItem() {        const url = 'http://localhost:3000/items/1'        //创建需要增加的数据        const item = {            //id:6,可不写            title: "手机",            price: 5000,            desc: '华为手机真好用',        }        // 定义一个 fetch 对象        const response = await fetch(url, {            method: 'PUT',            headers: {                'Content-Type': 'application/json;charset=utf-8',            },            body: JSON.stringify(item),        })        // 执行 response object        const data = await response.json();        // 打印输入        console.log(data);    }</script><h2>PATCH:局部式更新资源</h2><button onclick="partItem()">更新一个商品</button><script>    async function partItem() {        const url = 'http://localhost:3000/items/2'        //创建需要增加的数据        const item = {            //id:6,可不写            title: "笔记本电脑",            price: 6000,        }        // 定义一个 fetch 对象        const response = await fetch(url, {            method: 'PATCH',            headers: {                'Content-Type': 'application/json;charset=utf-8',            },            body: JSON.stringify(item),        })        // 执行 response object        const data = await response.json();        // 打印输入        console.log(data);    }</script><h2>DELETE:删除资源</h2><button onclick="del()">删除一个商品</button><script>    function del(){            return confirm('是否真的删除') ? delItem() : false;        }    async function delItem() {        const url = 'http://localhost:3000/items/3'        // 定义一个 fetch 对象        const response = await fetch(url, {            method: 'DELETE',        })        // 执行 response object        const data = await response.json();        // ok:{}        console.log(data);    }</script></body></html>

本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！

全部评论文明上网理性发言，请遵守新闻评论服务协议

0条评论

作者最新博文

【HTML】文档结构与元素，标签，属性的类型

2022-11-27 20:51:59

首页

PHP培训

视频教程

学习路径

资源下载

技术文章

社区

微信公众号

Restful API数据接口测试

1. JSON-SERVER

1.1 json-server 介绍

1.2 检查环境 && 安装 json-server

1.3 配置 json-server

1.4 启动服务

2. Mockjs 产生接口测试数据

2.1 Mockjs 安装调试

2.2 测试数据生成器 基于:Mockjs

2.3 复制生成的 json 数据到 db-items.json

3. 接口文件示例

2.2 测试数据生成器基于:Mockjs