# JSON 服務器教程 > 原文： [http://zetcode.com/javascript/jsonserver/](http://zetcode.com/javascript/jsonserver/) JSON 服務器教程介紹了 JavaScript `json-server`庫，該庫可用于創建偽造的 REST API。 ## JSON 服務器 json 服務器是一個 JavaScript 庫，用于創建測試 REST API。 ## JSON 服務器安裝 首先，我們創建一個項目目錄并安裝`json-server`模塊。 ```js $ mkdir json-server-lib $ cd json-server-lib $ npm init -y $ npm i -g json-server ``` JSON 服務器模塊與`npm`一起全局安裝。 ```js $ npm install axios ``` 此外，我們安裝了`axios`模塊，這是一個基于`Promise`的 JavaScript HTTP 客戶端。 ```js $ cat package.json { "name": "json-server-lib", "version": "1.0.0", "description": "", "main": "index.js", "dependencies": { "axios": "^0.18.0" }, "devDependencies": {}, "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "keywords": [], "author": "", "license": "ISC" } ``` 這是我們的`package.json`文件。 ## JSON 測試數據 我們有一些 JSON 測試數據： `users.json` ```js { "users": [ { "id": 1, "first_name": "Robert", "last_name": "Schwartz", "email": "rob23@gmail.com" }, { "id": 2, "first_name": "Lucy", "last_name": "Ballmer", "email": "lucyb56@gmail.com" }, { "id": 3, "first_name": "Anna", "last_name": "Smith", "email": "annasmith23@gmail.com" }, { "id": 4, "first_name": "Robert", "last_name": "Brown", "email": "bobbrown432@yahoo.com" }, { "id": 5, "first_name": "Roger", "last_name": "Bacon", "email": "rogerbacon12@yahoo.com" } ] } ``` ## 啟動 JSON 服務器 JSON 服務器從`json-server`啟動，該服務器已在全球范圍內安裝。 ```js $ json-server --watch users.json ``` `--watch`命令用于指定服務器的數據。 ```js $ curl localhost:3000/users/3/ { "id": 3, "first_name": "Anna", "last_name": "Smith", "email": "annasmith23@gmail.com" } ``` 使用`curl`命令，我們為用戶提供 ID 3。 ## JSON 服務器 GET 請求 在下一個示例中，我們使用 GET 請求檢索數據。 `get_request.js` ```js const axios = require('axios'); axios.get('http://localhost:3000/users') .then(resp => { data = resp.data; data.forEach(e => { console.log(`${e.first_name}, ${e.last_name}, ${e.email}`); }); }) .catch(error => { console.log(error); }); ``` 使用 axios 模塊，我們將所有用戶作為 JSON 數組獲取，并使用`forEach()`遍歷它。 ```js $ node get_request.js Robert, Schwartz, rob23@gmail.com Lucy, Ballmer, lucyb56@gmail.com Anna, Smith, annasmith23@gmail.com Robert, Brown, bobbrown432@yahoo.com Roger, Bacon, rogerbacon12@yahoo.com ``` 這是示例的輸出。 我們得到所有用戶并打印其全名和電子郵件。 ## JSON 服務器 POST 請求 通過 POST 請求，我們創建了一個新用戶。 `post_request.js` ```js const axios = require('axios'); axios.post('http://localhost:3000/users', { id: 6, first_name: 'Fred', last_name: 'Blair', email: 'freddyb34@gmail.com' }).then(resp => { console.log(resp.data); }).catch(error => { console.log(error); }); ``` 使用 axios 創建一個新用戶。 ```js $ node post_request.js { id: 6, first_name: 'Fred', last_name: 'Blair', email: 'freddyb34@gmail.com' } ``` 服務器以新創建的對象作為響應。 ```js $ curl localhost:3000/users/6/ { "id": 6, "first_name": "Fred", "last_name": "Blair", "email": "freddyb34@gmail.com" } ``` 我們使用`curl`命令驗證新創建的用戶。 ## JSON 服務器使用 PUT 請求修改數據 在以下示例中，我們使用 PUT 請求修改數據。 `put_request.js` ```js const axios = require('axios'); axios.put('http://localhost:3000/users/6/', { first_name: 'Fred', last_name: 'Blair', email: 'freddyb34@yahoo.com' }).then(resp => { console.log(resp.data); }).catch(error => { console.log(error); }); ``` 在示例中，我們修改了用戶的電子郵件地址。 ```js $ node put_request.js { first_name: 'Fred', last_name: 'Blair', email: 'freddyb34@yahoo.com', id: 6 } ``` 這是輸出。 ## JSON 服務器 DELETE 請求 在下面的示例中，我們顯示了如何通過 DELETE 請求刪除用戶。 `delete_request.js` ```js const axios = require('axios'); axios.delete('http://localhost:3000/users/1/') .then(resp => { console.log(resp.data) }).catch(error => { console.log(error); }); ``` 在示例中，我們刪除 ID 為 1 的用戶。 ```js $ node delete_request.js {} ``` 服務器以空 JSON 數據響應。 ## JSON 服務器排序數據 在下一個示例中，我們對數據進行排序。 `sort_data.js` ```js const axios = require('axios'); axios.get('http://localhost:3000/users?_sort=last_name&_order=asc') .then(resp => { data = resp.data; data.forEach(e => { console.log(`${e.first_name}, ${e.last_name}, ${e.email}`) }); }).catch(error => { console.log(error); }); ``` 該代碼示例按用戶的姓氏升序對數據進行排序。 我們使用`_sort`和`_order`查詢參數。 ```js $ node sort_data.js Roger, Bacon, rogerbacon12@yahoo.com Lucy, Ballmer, lucyb56@gmail.com Fred, Blair, freddyb34@yahoo.com Robert, Brown, bobbrown432@yahoo.com Robert, Schwartz, rob23@gmail.com Anna, Smith, annasmith23@gmail.com ``` 這是輸出。 ## JSON 服務器運算符 我們可以使用`_gte`和`_lte`獲取特定范圍的數據。 `operators.js` ```js const axios = require('axios'); axios.get('http://localhost:3000/users?id_gte=4') .then(resp => { console.log(resp.data) }).catch(error => { console.log(error); }); ``` 該代碼示例顯示 ID 大于或等于 4 的用戶。 ```js $ node operators.js [ { id: 4, first_name: 'Robert', last_name: 'Brown', email: 'bobbrown432@yahoo.com' }, { id: '5', first_name: 'Roger', last_name: 'Bacon', email: 'rogerbacon12@yahoo.com' }, { first_name: 'Fred', last_name: 'Blair', email: 'freddyb34@yahoo.com', id: 6 } ] ``` 這是輸出。 ## JSON 服務器全文搜索 可以使用`q`參數執行全文搜索。 `full_text_search.js` ```js const axios = require('axios'); axios.get('http://localhost:3000/users?q=yahoo') .then(resp => { console.log(resp.data) }).catch(error => { console.log(error); }); ``` 該代碼示例搜索 yahoo 術語。 ```js $ node full_text_search.js [ { id: 4, first_name: 'Robert', last_name: 'Brown', email: 'bobbrown432@yahoo.com' }, { id: '5', first_name: 'Roger', last_name: 'Bacon', email: 'rogerbacon12@yahoo.com' }, { first_name: 'Fred', last_name: 'Blair', email: 'freddyb34@yahoo.com', id: 6 } ] ``` 搜索查詢返回了這三個用戶。 在本教程中，我們介紹了 JSONServer JavaScript 庫。 您可能也對以下相關教程感興趣：[數據表 JSON 服務器教程](/articles/datatablesjsonserver/)， [Axios 教程](/javascript/axios/)，[笑話教程](/javascript/jest/)， [faker.js 教程](/javascript/fakerjs/)， [`Document.querySelector()`教程](/javascript/queryselector/)，[從 JavaScript 中的 URL 讀取 JSON](/articles/javascriptjsonurl/) ， [JavaScript 貪食蛇教程](/javascript/snake/)， [JQuery 教程](/web/jquery/)， [jQuery 自動完成教程](/articles/jqueryautocomplete/)或 [Node Sass 教程](/javascript/nodesass/)。