Collection
Collection
基于：json-server 和 Mockjs
json-server:存储 json 数据的服务器
模拟服务器端 json 数据接口
前端可不依赖后端，自己产生接口测试数据
[json-server 官网] (https://www.npmjs.com/package/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
文件名：json-server.json
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
{ "host": "localhost", "port": 3000, //端口号 "watch": true, //自动监听 "static": "./src", //静态资源名称 "version": "1.0"}1.命令：
json-server db-items.json<!--启动json服务器-->启动后，会生成：db-items.json文件
//是一个json对象{ // 每一个属性,如api就是一个资源接口 "api1":[{...}, {...}, {...}, {...}, {...}]. "api2":[{...}, {...}, {...}, {...}, {...}]. "api3":[{...}]}
安装 Mockjs:
npm i mockjs创建
mock-data.js,生成商品演示数据将接口数据复制到
db-items.json文件中(json服务器)重启 json-server 服务,指定资源服务器是
db-items.json
json-server db-items.json
// 随机成生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)){ "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 } ]}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>