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