【json-server】json-serverのインストールと使い方：

記事ディレクトリ

1. ダウンロードしてインストールします。

[json-server URL] https://www.npmjs.com/package/json-server

#使用npm全局安装json-server：
npm install -g json-server

#可以通过查看版本号，来测试是否安装成功：
json-server -v

2. db.json データと関連パラメータを開始します。

json-server --watch .\db.json --port 5000

ここに画像の説明を挿入

パラメータ	略語	デフォルト	説明する
–config	-c	設定ファイルを指定する	[デフォルト: "json-server.json"]
-ポート	-p	ポートを設定する	[デフォルト: 3000]
-ホスト	-H	ドメインを設定する	[デフォルト:「0.0.0.0」]
-時計	-w	ファイルを監視する	監視するかどうか
–ルート	-r	カスタムルートを指定する
–ミドルウェア	-m	ミドルウェアファイルの指定	[配列]
-静的	-s	静的ファイルのディレクトリを設定する	静的ディレクトリ、類似: 高速静的ディレクトリ
–読み取り専用	–ろ	GET リクエストのみを許可する [bool]
–ノコル	–nc	クロスオリジンリソース共有を無効にする [ブール値]
–no-gzip	-の	GZIP コンテンツエンコーディングを無効にする	[ブール]
–スナップショット	-S	スナップショットのディレクトリを設定する	[デフォルト:「.」]
-遅れ	-d	応答に遅延を追加(ミリ秒)
–id	-私	データベース ID プロパティ (例: _id) を設定します。	[デフォルト: "ID"]
–foreignKeySuffix	–	例: 外部キーのサフィックスを設定します (例: post_id の _id)	[デフォルト:「ID」]
-ヘルプ	-h ヘルプ情報を表示します	[ブール]
-バージョン	-v	バージョン番号を表示	[ブール]

db.json を編集しました (db.json データは変更されました)、両方关闭服务重新启动。(注: CTRL + C を使用してサービスを停止しないでください。この方法を使用すると、node.js がポート 3004 を占有し続け、次の起動が失敗することになります。ウィンドウを閉じるだけです。 —— 個人用ウィンドウシステムでは、他のシステムでは停止できない場合があります。とても迷惑です。）

3. json データを作成します - db.json:

データを作成するので、jsonデータを作成する必要があります。任意のフォルダー (ここでは myserver フォルダーを作成したと仮定します) の下で、そのフォルダーに入り、コードを実行します。

json-server --watch db.json

元々空だったフォルダーには、追加の db.json ファイルが存在します。同時に、コード実行結果のプロンプトに従って、http://localhost:3000 にアクセスし (クリックは json サーバーの起動後にのみ有効になります)、次のページを参照できます。 /posts /comment /profile /db リンクをそれぞれ参照してください。ページのジャンプを確認した後、アドレスバーとページのコンテンツの変化を観察してください。何が見えますか? そうです、それはそれぞれの json データです。

#db.json里面自带的数据：
{
    
    
  "posts": [
    {
    
    
      "id": 1,
      "title": "json-server",
      "author": "typicode"
    }
  ],
  "comments": [
    {
    
    
      "id": 1,
      "body": "some comment",
      "postId": 1
    }
  ],
  "profile": {
    
    
    "name": "typicode"
  }
}

次に、myserver/db.json ファイル内のデータを比較すると、/db が db.json データパッケージ全体であり、/posts /comment /profile がそれぞれ db.json のサブオブジェクトであることがわかります。そのため、json-server は db.json のルートノードの各キーをルーターとみなします。このルールに従ってテストデータを書き込むことができます。

4 番目に、ポート番号を変更します。

json-server のデフォルトは3000ポートですが、自分でポートを指定することもできます。コマンドは次のとおりです。

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

まあ、面倒でサービスを開始するためのコードが少し長いと感じる場合は、同级db.json フォルダー (つまり、myserver フォルダー) に新しい package.json を作成し、そこに構成情報を書き込むことも検討できます。それ：

{
    
    
    "scripts": {
    
    
        "mock": "json-server db.json --port 3004"
    }
}

サービスを開始したら、次のコマンドを実行するだけです。

npm run mock

5. 動作データGET：

{
    
    
    "fruits": [
        {
    
    
            "id": 1,
            "name": "苹果",
            "price": 1.28
        },
        {
    
    
            "id": 2,
            "name": "橘子",
            "price": 3.88
        },
        {
    
    
            "id": 3,
            "name": "西瓜",
            "price": 1.98
        }
    ],
    "users": [
        {
    
    
            "name": {
    
    
                "username":"admin",
                "nickname":"zhangsan"
            },
            "pwd": "123456"
        }
    ]
}

【1】定期取得：

http://localhost:3004/fruits = "すべての果物データを取得できます ( 对象数组)

[
    {
    
    
        "id": 1,
        "name": "苹果",
        "price": 1.28
    },
    {
    
    
        "id": 2,
        "name": "橘子",
        "price": 3.88
    },
    {
    
    
        "id": 3,
        "name": "西瓜",
        "price": 1.98
    }
]

[2] 取得するフィルタ Filter:

返されるデータは对象
【1】http://localhost:3004/fruits/1

{
    
    
    "id": 1,
    "name": "苹果",
    "price": 1.28
}

返されるデータは数组
[2] http://localhost:3004/fruits?id=1
[3] http://localhost:3004/fruits?name=apple
[4] http://localhost:3004/fruits? name=apple&price=1.28 //複数の条件を指定して&記号で結びます

[
    {
    
    
        "id": 1,
        "name": "苹果",
        "price": 1.28
    }
]

obj.key[5]オブジェクトの属性値の取得方法：http://localhost:3004/users?name.nickname=zhangsan

[
  {
    
    
    "name": {
    
    
      "username": "admin",
      "nickname": "zhangsan"
    },
    "pwd": "123456"
  }
]

[3] ページングページ付け:

{
    
    
    "fruits": [
        {
    
    
            "id": 1,
            "name": "糖心富士苹果",
            "price": 2.38
        },
        {
    
    
            "id": 2,
            "name": "橘子",
            "price": 3.88
        },
        {
    
    
            "id": 3,
            "name": "宁夏西瓜",
            "price": 1.98
        },
        {
    
    
            "id": 4,
            "name": "麒麟西瓜",
            "price": 3.98
        },
        {
    
    
            "id": 5,
            "name": "红蛇果",
            "price": 2.5
        },
        {
    
    
            "id": 6,
            "name": "黑皮西瓜",
            "price": 0.98
        },
        {
    
    
            "id": 7,
            "name": "红心火龙果",
            "price": 2.69
        },
        {
    
    
            "id": 8,
            "name": "国产火龙果",
            "price": 1.69
        },
        {
    
    
            "id": 9,
            "name": "海南荔枝",
            "price": 9.9
        },
        {
    
    
            "id": 10,
            "name": "陕西冬枣",
            "price": 5.39
        },
        {
    
    
            "id": 11,
            "name": "软籽石榴",
            "price": 2.39
        },
        {
    
    
            "id": 12,
            "name": "蜜橘",
            "price": 1.99
        },
        {
    
    
            "id": 13,
            "name": "海南香蕉",
            "price": 1.45
        }
    ],
    "users": [
        {
    
    
            "name": {
    
    
                "username":"admin",
                "nickname":"zhangsan"
            },
            "pwd": "123456"
        }
    ]
}

db.json を編集しました (db.json データは変更されました)、両方关闭服务重新启动。(注: CTRL + C を使用してサービスを停止しないでください。この方法を使用すると、node.js がポート 3004 を占有し続け、次の起動が失敗することになります。ウィンドウを閉じるだけです。 —— 個人用ウィンドウシステムでは、他のシステムでは停止できない場合があります。とても迷惑です。）

ページネーションは _page によって設定され页码、_limit は各ページの表示を制御するために使用されます条数。_limit が指定されていない場合、デフォルトでは 1 ページあたり 10 個のエントリが表示されます。
http://localhost:3004/fruits?_page=2&_limit=5

[4] 並べ替え並べ替え：

_sort 並べ替えは、並べ替えるフィールドを指定し、 _order並べ替えが正の並べ替えであるか逆の並べ替えであるかを指定するために使用されます(asc | desc, 默认是asc)
http://localhost:3004/fruits?_sort=price&_order=desc

また、通常は並べ替えの後に、並べ替える複数のフィールドを指定することもできます。価格順、同じ価格は ID に従って並べ替えられます:
http://localhost:3004/fruits?_sort=price,id&_order=desc,asc

[5] ローカルデータスライスの取得

スライスメソッドは Array.slice() メソッドに似ています。開始位置を指定するには _start を使用し、終了位置を指定するには _end を使用します。開始位置からフェッチするデータの数を指定するには _limit を使用します。
http://localhost:3004/fruits? _start=0&_end=2

http://localhost:3004/fruits?_start=2&_limit=4

[6] 演算子の範囲を取得する

[1] _gte _lte を使用して値の範囲 (範囲) を設定します。

http://localhost:3004/fruits?id_gte=4&id_lte=6

[2] _ne を使用して、特定の値が含まれないように設定します。

http://localhost:3004/fruits?id_ne=1&id_ne=10

[3] _like を使用して、一致する文字列 (または正規表現) を設定します。

http://localhost:3004/fruits?name_like=果

[7] 全文検索全文検索：qで検索内容を設定

http://localhost:3004/fruits?q=3

【8】ケース

db.json 内のすべての果物情報を取得し、テーブルに表示します。

<!DOCTYPE html>
<html>

<head>
  <title>使用jquery ajax方法操作数据</title>
  <script type="text/javascript" src="./jquery.js"></script>
  <style>
    table,
    td,
    th {
    
    
      border: 1px solid black;
      border-collapse: collapse;
    }

    table {
    
    
      width: 500px;
      text-align: center;
    }

    tr {
    
    
      height: 35px;
    }
  </style>
</head>

<body>
  <button id="getBtn">获取所有水果数据</button>
  <div id="showData"></div>

  <script type="text/javascript">
    $("#getBtn").click(function () {
    
    
      $.ajax({
    
    
        type: 'get',
        url: 'http://localhost:3004/fruits',
        success: function (data) {
    
    
          // data 对象数组
          var h = ""
          h += "<table border='1'>"
          h += "<thead><th>ID</th><th>name</th><th>price</th></thead>"
          h += "<tbody>"
          for (var i = 0; i < data.length; i++) {
    
    
            var o = data[i]
            h += "<tr>"
            h += "<td>" + o.id + "</td><td>" + o.name + "</td><td>" + o.price + "</td>"
            h += "</tr>"
          }
          h += "<tbody>"
          h += "</table>"
          $("#showData").empty().append(h)
        },
        error: function () {
    
    
          alert("get : error")
        }
      })
    })
  </script>
</body>

</html>

ここに画像の説明を挿入

6. データの追加: POST メソッド。新しいリソースの作成に一般的に使用されます。

ケース: ページ上の入力ボックスに新しい果物の名前と価格を入力し、post 経由で db.json に追加します。

水果：<input id="fruitName" type="text" name="fruitName"><br>
价格：<input id="fruitPrice" type="text" name="fruitPrice"><br>
<button id="postBtn">添加水果</button>

$("#postBtn").click(function () {
    
    
    $.ajax({
    
    
        type: 'post',
        url: 'http://localhost:3004/fruits',
        data: {
    
    
            name: $("#fruitName").val(),
            price: $("#fruitPrice").val()
        },
        success: function (data) {
    
    
            console.log("post success")
        },
        error: function () {
    
    
            alert("post error")
        }
    })
})

ここに画像の説明を挿入

7. データの更新: 既存リソースの更新によく使用される PUT メソッド、リソースが存在しない場合は作成されます; PATCH: 部分更新

ケース: 果物に対応する ID を入力し、その価格を変更します。

<p>更新水果价格</p>
水果id：<input id="putId" type="text" name="fruitId"><br>
价格：<input id="putPrice" type="text" name="fruitPrice"><br>
<button id="putBtn">put更新</button>

$("#putBtn").click(function () {
    
    
    $.ajax({
    
    
        type: 'put',
        url: 'http://localhost:3004/fruits/' + $("#putId").val(),
        data: {
    
    
            price: $("#putPrice").val()
        },
        success: function (data) {
    
    
            console.log("put success")
        },
        error: function () {
    
    
            alert("put error")
        }
    })
})

ここに画像の説明を挿入

これは、であるためですPUT方法会更新整个资源对象，前端没有给出的字段，会自动清空。したがって、完全なオブジェクト情報を ajax データで指定するか、PATCH メソッドを使用します。PATCHこれは、PUT メソッドを補足するものと見なすことができる新しいメソッドであり、主にを実行するために使用されます局部更新。
ケース: PUT メソッドと同じ。

$("#putBtn").click(function () {
    
    
    $.ajax({
    
    
        type: 'patch',
        url: 'http://localhost:3004/fruits/' + $("#putId").val(),
        data: {
    
    
            price: $("#putPrice").val()
        },
        success: function (data) {
    
    
            console.log("put success")
        },
        error: function () {
    
    
            alert("put error")
        }
    })
})

ここに画像の説明を挿入

ただし、果物の名前を入力して果物の価格を動的に更新したい場合があります。ただし、「http://localhost:3004/fruits/tangerine」の URL は間違っており、「http://localhost:3004/fruits?name = orange」のような URL はデータを取得する GET メソッドにのみ使用できます。この場合は、迂回して GET メソッドで ID を取得し、その ID を使用してデータに PATCH します。
実装方法は以下の通りです。

<p>通过水果名更新水果价格</p>
水果：<input id="editName" type="text" name="fruitName"><br>
价格：<input id="editPrice" type="text" name="fruitPrice"><br>
<button id="editBtn">edit</button>

$("#editBtn").click(function () {
    
    
    getFun($("#editName").val(), patchFun)
})
 
function getFun(name, f) {
    
    
    $.ajax({
    
    
        type: 'get',
        url: 'http://localhost:3004/fruits' + '?name=' + name,
        success: function (data) {
    
    
            // data 对象数组
            console.log(data[0]);
            if (typeof f == "function") f.call(this, data[0].id)
        },
        error: function () {
    
    
            alert("error")
        }
    })
}
 
function patchFun(id) {
    
    
    $.ajax({
    
    
        type: 'patch',
        url: 'http://localhost:3004/fruits/' + id,
        data: {
    
    
            price: $("#editPrice").val()
        },
        success: function (data) {
    
    
            console.log("success", data)
        },
        error: function () {
    
    
            alert("error")
        }
    })
}

8、データの削除: DELETE メソッド。既存のリソースを削除するためによく使用されます。

ケース: IDに応じて果物データを削除する

<p>删除水果</p>
水果id：<input id="delId" type="text" name="delName"><br>
<button id="delOne">根据id删除</button>
<button id="delAll">删除所有</button>

$("#delOne").click(function () {
    
    
    $.ajax({
    
    
        type: 'delete',
        url: 'http://localhost:3004/fruits/' + $("#delId").val(),
        success: function (data) {
    
    
            console.log("del success")
        },
        error: function () {
    
    
            alert("del error")
        }
    })
})

全て削除したい場合はリクエストURL「http://localhost:3004/fruits」を使用する方法はありません。削除するオブジェクト ID を指定する必要があるためです。したがって、ループでのみ削除できます。これには、ループの境界として現在の最大 ID (データの数ではなく最大 ID であることに注意してください) を取得する GET メソッドの実装が必要です。

$("#delAll").click(function () {
    
    
    // 此处就没有动态去获取db.json中fruits的最大id，直接带入10
    for (var i = 0; i <= 10; i++) {
    
    
        delFun(i)
    }
})
 
function delFun(id) {
    
    
    $.ajax({
    
    
        type: 'delete',
        url: 'http://localhost:3004/fruits/' + id,
        data: '',
        success: function (data) {
    
    
            console.log("del success", data)
        },
        error: function () {
    
    
            console.log("del error")
        }
    })
}

9. 関連関係 = "下向き検索_埋め込み

ここに画像の説明を挿入

http://localhost:8000/posts? _embed=コメント

ここに画像の説明を挿入

10. 関係 = "検索 _expand

http://localhost:8000/comments? _expand=投稿

ここに画像の説明を挿入

11. 静的リソースサーバーの構成: 主に画像、オーディオ、ビデオリソースの構成に使用されます。

コマンドラインを使用してルーティング、データファイル、監視などを設定すると、コマンドが非常に長くなり、入力を間違えやすくなりますが、
json-server を使用すると、すべての設定を設定ファイル (通常はという名前) に入れることができますjson_sever_config.json。

【1】json_sever_config.json

{
    
    
  "port": 3004,            
  "watch": true,           
  "static": "./public",
  "read-only": false, 
  "no-cors": false, 
  "no-gzip": false
}

【2】package.json

{
    
    
    "scripts": {
    
    
        "mock": "json-server --c json_sever_config.json db.json"
    }
}

すべての画像リソースをパブリックディレクトリに置くことができますが、パブリックディレクトリには画像だけでなくオーディオやビデオも置くことができます。リソースを置くときは、public の下に画像を作成して画像を配置し、オーディオ/ビデオを作成します。オーディオとビデオを別々に配置します。 ;
json_server_config.json で静的ファイルのディレクトリを指定しているので、アクセスするときは public を無視できます;

画像: http://localhost:3004/画像名

【json-server】json-serverのインストールと使い方：

記事ディレクトリ

1. ダウンロードしてインストールします。

2. db.json データと関連パラメータを開始します。

3. json データを作成します - db.json:

4 番目に、ポート番号を変更します。

5. 動作データGET：

【1】定期取得：

[2] 取得するフィルタ Filter:

[3] ページング ページ付け:

[4] 並べ替え 並べ替え：

[5] ローカルデータスライスの取得

[6] 演算子の範囲を取得する

[7] 全文検索 全文検索：qで検索内容を設定

【8】ケース

6. データの追加: POST メソッド。新しいリソースの作成に一般的に使用されます。

7. データの更新: 既存リソースの更新によく使用される PUT メソッド、リソースが存在しない場合は作成されます; PATCH: 部分更新

8、データの削除: DELETE メソッド。既存のリソースを削除するためによく使用されます。

9. 関連関係 = "下向き検索_埋め込み

10. 関係 = "検索 _expand

11. 静的リソース サーバーの構成: 主に画像、オーディオ、ビデオ リソースの構成に使用されます。

【1】json_sever_config.json

【2】package.json

おすすめ

[3] ページングページ付け:

[4] 並べ替え並べ替え：

[7] 全文検索全文検索：qで検索内容を設定

11. 静的リソースサーバーの構成: 主に画像、オーディオ、ビデオリソースの構成に使用されます。