首頁 >web前端 >js教程 >JSON服務器示例

JSON服務器示例

Joseph Gordon-Levitt
Joseph Gordon-Levitt原創
2025-03-09 00:33:22469瀏覽

JSON Server Example

JSON服務器示例

>此JSON服務器示例是一系列文章系列的一部分,該系列在2017年中期重寫,其中包含最新信息和新示例。 JSON服務器是前端開發人員的流行工具,可在不到一分鐘的時間內快速設置完全偽造的REST API。您需要首先通過NPM安裝它:

接下來,將一些數據保存在JSON文件中,並將其命名db.json:
<span>npm install -global json-server
</span>

>最後,使用以下命令啟動服務器:>

<span>{
</span>  <span>"clients": [
</span>    <span>{
</span>      <span>"id": "59761c23b30d971669fb42ff",
</span>      <span>"isActive": true,
</span>      <span>"age": 36,
</span>      <span>"name": "Dunlap Hubbard",
</span>      <span>"gender": "male",
</span>      <span>"company": "CEDWARD",
</span>      <span>"email": "dunlaphubbard@cedward.com",
</span>      <span>"phone": "+1 (890) 543-2508",
</span>      <span>"address": "169 Rutledge Street, Konterra, Northern Mariana Islands, 8551"
</span>    <span>},
</span>    <span>{
</span>      <span>"id": "59761c233d8d0f92a6b0570d",
</span>      <span>"isActive": true,
</span>      <span>"age": 24,
</span>      <span>"name": "Kirsten Sellers",
</span>      <span>"gender": "female",
</span>      <span>"company": "EMERGENT",
</span>      <span>"email": "kirstensellers@emergent.com",
</span>      <span>"phone": "+1 (831) 564-2190",
</span>      <span>"address": "886 Gallatin Place, Fannett, Arkansas, 4656"
</span>    <span>},
</span>    <span>{
</span>      <span>"id": "59761c23fcb6254b1a06dad5",
</span>      <span>"isActive": true,
</span>      <span>"age": 30,
</span>      <span>"name": "Acosta Robbins",
</span>      <span>"gender": "male",
</span>      <span>"company": "ORGANICA",
</span>      <span>"email": "acostarobbins@organica.com",
</span>      <span>"phone": "+1 (882) 441-3367",
</span>      <span>"address": "697 Linden Boulevard, Sattley, Idaho, 1035"
</span>    <span>}
</span>  <span>]
</span><span>}
</span>
>現在,您可以使用合適的客戶端訪問簡單的REST API。目前,像Chrome,Firefox或Safari這樣的現代瀏覽器會做。打開http:// localhost:3000/客戶端,您將以JSON格式看到整個微型數據庫。您可以使用請求格式http:// localhost:3000/client/{id}查看項目。例如,打開http:// localhost:3000/clients/59761c23333d8d0f92a6b0570d將產生:

>

json-server <span>--watch src/db.json
</span>
要了解有關JSON服務器的更多信息,請使用JSON-Server

查看教程模擬REST API

另外:請參閱更多JSON示例。
<span>{
</span>  <span>"id": "59761c233d8d0f92a6b0570d",
</span>  <span>"isActive": true,
</span>  <span>"age": 24,
</span>  <span>"name": "Kirsten Sellers",
</span>  <span>"gender": "female",
</span>  <span>"company": "EMERGENT",
</span>  <span>"email": "kirstensellers@emergent.com",
</span>  <span>"phone": "+1 (831) 564-2190",
</span>  <span>"address": "886 Gallatin Place, Fannett, Arkansas, 4656"
</span><span>}
</span>
這是本系列中的其他示例:

顏色json示例

Google Maps JSON示例
  • > YouTube JSON示例
  • > Twitter JSON示例
  • geoip json示例
  • > wordpress json示例
  • >數據庫JSON示例
  • 本地休息示例
  • 測試數據JSON示例
  • 經常詢問有關JSON服務器的問題(常見問題解答)
  • >使用JSON服務器的主要目的是什麼?它允許開發人員原型和開發應用程序,而無需設置複雜的後端。當您想通過模擬後端快速測試前端代碼時,這特別有用。它使用JSON文件來創建數據庫,並在框外提供所有標準的REST API端點。
>我如何安裝JSON Server?

JSON Server是Node.js模塊,可以使用NPM(Node Package Manager)安裝。您可以通過在終端或命令提示符中運行命令NPM install -G JSON服務器來在系統上安裝它。安裝後,您可以使用命令json-server -watch db.json啟動服務器,其中db.json是您的數據庫文件。

如何在JSON Server中創建自定義路由?

json Server允許您通過創建doutes.json文件來定義自定義路由。在此文件中,您可以將路由映射到不同的JSON對象。例如,如果要將/api/posts映射到/帖子,則將其定義為{/api/posts“:“/posts”}在您的doutes.json文件中。然後,您可以通過運行JSON-Server-Watch DB.JSON-ROUTESROUTES.JSON。

來啟動服務器。

>我可以將JSON服務器用於生產嗎?

當JSON服務器是用於原型製作和開發的強大工具時,不建議用於生產使用。它缺乏生產環境所需的安全性和性能優化。對於生產,您應該使用適當的數據庫和服務器設置。

>如何將數據添加到我的JSON服務器?

您可以通過修改db.json文件將數據添加到JSON服務器中。該文件充當您的數據庫,JSON對像中的每個密鑰都對應於其他資源。例如,如果要添加新帖子,則會在db.json文件中的帖子數組中添加一個新對象。

如何在JSON Server中過濾數據?

JSON Server支持使用查詢參數過濾數據。例如,如果您想獲取所有標題“ Hello World”的帖子,則會將Get請求發送到 /帖子? title = Hello World。這將返回標題為“ Hello World”的所有帖子。

>我可以將JSON服務器與其他編程語言一起使用嗎?

是的,JSON Server是語言 - 敏捷的,並且可以與任何可以發送HTTP請求的編程語言一起使用。這包括JavaScript,Python,Ruby,Java等。例如,如果您想獲得前10個帖子,則將get請求發送到 /帖子? _page = 1&_limit = 10。這將返回前10個帖子。

>我可以在JSON服務器中對數據進行排序嗎?

是的,JSON Server支持使用_sort和_order查詢參數對數據進行分類。例如,如果您想以升級順序按標題排序的帖子,則將get請求發送到 /帖子? _ _sort = title&_order = asc。例如,如果您想更新帖子的標題,則將put或patch請求發送到 /posts /1,其中1是帖子的ID,並在請求正文中帶有新標題。

以上是JSON服務器示例的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn