JSON Server 使用

JSON Server

npm 套件将 JSON 档案 模拟成资料库可作 CRUD 的 API 模拟预设支援跨网域 CORS & JSONP仅作测试用,因为无权限控管功能JSON Server Github

安装

npm i -g json-server建立 db.json 档案 最外层必须是 Object
  {    "posts": [      { "id": 1, "title": "json-server", "author": "typicode" }    ],    "comments": [      { "id": 1, "body": "some comment", "postId": 1 }    ],    "profile": { "name": "typicode" }  }

开启 JSON Server

json-server --watch db.json前往 http://localhost:3000/posts/1 即可确认是否成功localhost:3000 可见有哪些资料于 VSCode Console 可见 状态码 & 操作动作

更改 Port 号

json-server --watch db.json --port 3004

注意事项

id 为不可变更且自动产生 (可省略不传、亦可传目前不存在的id)若传入相同 id 会喷错 500使用 POST,PUT,PATCH 必须使用 Content-Type: application/json 表头,否则不会更新资料在 VSCode Console 按下 s 输入后可以迅速备份当前资料 !!!!使用 POSTMAN 产生的 Code 有些 Header Chrome 会不建议修改

LiveServer Auto Reload 问题

与 LiveServer 一起使用会因为自动存档而导致 请求无限发送 & 刷新页面解法 Alex宅干嘛 1:19:50原理: API Call => JSON Server 运作 => 改变 db.json=> 档案变了 Live Server Reload => 刷新页面又再次执行 API Call (Loop)
  "liveServer.settings.ignoreFiles":[    "db.json"   // 加上  ],

Refused to set unsafe header

Chrome 拒绝自订的 Header'Cache-Control' 则依照需求而订
    const headers = {       Host: 'localhost:3000',      'content-length': '19',      Connection: 'keep-alive',      'accept-encoding': 'gzip, deflate',      'User-Agent': 'PostmanRuntime/7.15.0',      // 正常的 request 不需要此 token      'Postman-Token': 'b0a75f76-8b4a-4a9f-b398-9f7a1cd7bf51,9a5e1c49-89ed-4e7d-b3d3-30bf3ab8ab5b',    }

JSON

JSON 最后一项属性不用加 , 号只用双引号无注释的语法

Content-Type: application/x-www-form-urlencoded

最常见的提交方法以 key1=val1&key2=val2 的方式编码jQuery 默认提交方式PHP中以 $_POST['title'] 取得对应值
  Content-Type: application/x-www-form-urlencoded;charset=utf-8  url/?title=test&name=Tom

API 练习

GET 取得POST 新增资料PUT 修改资料(完整、会将原本包含的删除)PATCH 修改资料(局部、只更动修改部分)DELETE 删除

POSTMAN

Chrome 插件连结(已弃用、可能出错)Window版下载 (推荐)JSON Viewer(Chrome上浏览JSON用 推荐!)模拟 API 呼叫,免写 JavaScript Code还能帮你产生 JavaScript XHR 或 jQuery Code !!!!!!!

在 Send按钮的下面有个 Code 选择 JavaScript

产生练习用的假资料

JSON Generator 线上产生(好用)Faker.js 库自行撰写JS再複製
  const data = { users: [] }  // Create 1000 users  for (let i = 0; i < 1000; i++) { data.users.push({ id: i, name: `user${i}` }) }  return data

静态资源

更新静态资源 必须重新启动 JSON Server法1: 建立 public 资料夹 (内部放资源 index.html...等)
public/index.html => localhost:3000 即可取得法2: json-server db.json --static ./资料夹名

自订路径

建立 routes.json必须起动才能使用json-server db.json --routes routes.json
  {    "新的路径": "预设的路径",    // 用 /api/posts 取代原本的 /posts    "/api/*": "/$1",    // 用 /api/posts/1  取代 /posts/1    "/:resource/:id/show": "/:resource/:id",    // 用 posts/html 取代 /posts?category=html    "/posts/:category": "/posts?category=:category",    // 用 articles?id=1 取代 /posts/1    "/articles\\?id=:id": "/posts/:id"  }

JSON Server 进阶操作

筛选资料 / 搜寻全文 (?q)

GET 直接利用网址待入参数?q=关键字 搜寻所有属性的内容_like 相似于的判断 (支援 RegExp)
  // url?属性=值&另属性=值  GET /posts?author.name=Tim&year=1800  // 支援 RegExp  GET /posts?title_like=server

分页功能

_page 为第几页,预设为一页10笔_limit 为一页几笔 (optional)
  GET /posts?_page=7  GET /posts?_page=7&_limit=20

字串 & 数值大小于

_gte 大于等于_lte 小于等于_ne 不等于
  GET /posts?views_gte=10&views_lte=20  GET /posts?id_ne=1  GET /posts?title_like=server

排序 Sort

参数为 asc正数(预设)、 desc倒数_sort_order
  GET /posts?_sort=views&_order=asc  // 选择一数性并排序  GET /posts/1/comments?_sort=votes&_order=asc  // 多个属性排序  GET /posts?_sort=user,views&_order=desc,asc

选取範围 Slice

_start_end 或 _limit
  GET /posts?_start=20&_end=30  GET /posts/1/comments?_start=20&_end=30  GET /posts/1/comments?_start=20&_limit=10

参考资料

六角保哥作者 Github 文档

关于作者: 网站小编

码农网专注IT技术教程资源分享平台,学习资源下载网站,58码农网包含计算机技术、网站程序源码下载、编程技术论坛、互联网资源下载等产品服务,提供原创、优质、完整内容的专业码农交流分享平台。

热门文章