1.ノード環境構築
Node.js の紹介
Node.js は、オープン ソースでクロスプラットフォームの JavaScript ランタイム環境です。ほぼすべてのプロジェクトに使用できる人気のツールです。
Node.js は、ブラウザーの外部で V8 JavaScript エンジン (Google Chrome のコア) を実行します。これにより、Node.js は非常にうまく機能します。
Node.js アプリケーションは、リクエストごとに新しいスレッドを作成することなく、単一のプロセスで実行されます。Node.js は、標準ライブラリに一連の非同期 I/O ネイティブ関数を提供し (JavaScript コードがブロックされないようにするため)、Node.js のライブラリは通常、非ブロック パラダイムを使用して記述されます。
Node.js が I/O 操作 (ネットワークからの読み取り、データベースへのアクセス、ファイル システムなど) を実行する場合、Node.js は、スレッドをブロックして待機中の CPU サイクルを浪費するのではなく、応答が返ってきたときに操作を再開します。
これにより、Node.js は単一のサーバーで数千の同時接続を処理することができ、スレッドの同時実行を管理する負担 (重大なバグの原因となる可能性があります) を導入する必要がありません。
Node.js には独自の利点があります。これは、ブラウザー用の JavaScript を作成する何百万人ものフロントエンド開発者が、クライアント側のコードに加えてサーバー側のコードを書くことができ、まったく別の言語を習得する必要がないからです。
Node.js では、新しい ECMAScript 標準を問題なく使用できます。これは、すべてのユーザーがブラウザーを更新するのを待つ代わりに、Node.js のバージョンを変更することで使用する ECMAScript のバージョンを決定できるためです。 Flags for Node.js で実行して特定の実験的機能を有効にすることで使用する ECMAScript のバージョン。言葉。2009 年 5 月にリリースされ、Ryan Dahl によって開発されたこのエンジンは、基本的に Chrome V8 エンジンをカプセル化しています。
Chrome V8 エンジンの紹介
Web 関連技術の発展に伴い、JavaScript はますます多くの作業を行う必要があり、JavaScript スクリプトの高速な解析と実行が必要な「フォーム検証」の範囲をすでに超えています。
V8 エンジンはこの問題を解決するために誕生したもので、node で JavaScript を解析するためにも使用されています。V8 は JavaScript のパフォーマンスをどのように大幅に改善しますか?
詳細紹介: Chrome V8 エンジンの紹介
Node.js環境構築
Nodejs の最新のダウンロード アドレス: Download | Node.js Chinese Network
ダウンロード
windows64位.msi私のコンピューターシステムと数字の選択に応じて、ここでフォーマットのインストールパッケージ を選択します
.msi と .zip 形式の違い:
1. .msi は、Windows インストーラーによって開発されたプログラム インストール ファイルであり、インストールしたプログラムをインストール、変更、およびアンインストールできます。率直に言うと、.msi は Windows インストーラーのデータ パッケージであり、インストール ファイルに関連するすべてのコンテンツが 1 つのパッケージにカプセル化されています。
2. .zip は圧縮パッケージです。解凍後、インストールは不要です。
インストール
ダウンロードが完了したら、インストールパッケージ をダブルクリックしてインストールを開始します。nextC:\Program Files
Node.js runtime動作環境を示します
npm package managernpm パッケージ マネージャーを示します
online documentation shortcutsオンライン ドキュメントのショートカット
Add to PATH環境変数に追加
確認
インストールが完了すると、.msi 形式のインストール パッケージがnode启动程序システム環境変数に追加されますpath。システム変数を確認して確認してください。
win7 検証:
win10 検証:
ノード プログラムがグローバル システム変数に追加されたので、CMD ウィンドウの任意の場所で直接実行し、nodeCMD ウィンドウを開き、コマンドを実行してnode -vノードのバージョンを表示できます。
ノードの最新バージョンは、インストール中に npm もインストールします。実行してnpm -vnpm のバージョンを表示します。
npm の紹介
npm の正式名称は Node Package Manager. Node.js ベースのパッケージ マネージャーであり、Node.js コミュニティ全体で最も人気があり、ほとんどのサードパーティ モジュールをサポートしています。
npm の当初の意図: JavaScript 開発者がコードを共有して再利用することが容易になります。
npm の使用シナリオ:
-
ユーザーがローカルで使用するために、NPM サーバーから他のユーザーによって作成されたサードパーティ パッケージをダウンロードできるようにします。
-
ユーザーがローカルで使用するために、NPM サーバーから他のユーザーが作成したコマンドライン プログラムをダウンロードしてインストールできるようにします。
-
ユーザーが独自のパッケージまたはコマンドライン プログラムを NPM サーバーにアップロードして、他のユーザーが使用できるようにします。
古いバージョンの npm をインストールした場合は、npm コマンドで簡単にアップグレードできます。コマンドは次のとおりです。
npm install npm -gタオバオ ミラーを使用するコマンド:
npm install -g cnpm --registry=https://registry.npm.taobao.org名前が示すように、npm run は npm run-script の省略形で、スクリプトを実行します。実行されるスクリプトは、package.json の scripts オブジェクトで構成されます。
二、json-server環境構築
json サーバーの概要
フロントエンドでローカルに実行され、json データを保存できるサーバー。
平たく言えば、サーバーのインターフェースデータをシミュレートすることで、一般的にはフロントエンドとバックエンドを分離した上で使用され、フロントエンドの担当者はJSONサービスをローカルで構築し、テストデータを自分で生成することができます。 API開発について。
json-serverはその名の通り、jsonデータを格納するサーバーです～。
json-server URL: json-server-npm
ダウンロードとインストール
npm を使用して json-server をグローバルにインストールします。
npm install -g json-serverバージョン番号を確認することで、インストールが成功したかどうかをテストできます。
json-server -vjson データの作成 - db.json
データを作成しているので、jsonデータを作成する必要があります。
任意のフォルダー (ここに myserver フォルダーを作成したと仮定) の下で、フォルダーに入り、コードを実行します。
json-server --watch db.json
元の空のフォルダーには、余分な db.json ファイルがあります。
同時に、コード実行結果のプロンプトに従って、http://localhost:3000にアクセスし(クリックは json-server の起動後にのみ有効になります)、次のページを表示できます。
リンクを個別にクリックして、/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"
}
}/db次に、myserver/db.json ファイルのデータを比較すると、それが db.json データ パッケージ全体であり、/posts /comment /profileそれぞれ db.json のサブオブジェクトであること がわかります。
そのため、json-server は db.json のルート ノードの各キーをルーターと見なします。このルールに従ってテストデータを書くことができます。
ポート番号を変更する
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関連するjson-serverの起動パラメータ
-
文法：
json-server [options] <source> -
オプションのリスト:
| パラメータ | 略語 | デフォルト | 例証する |
|---|---|---|---|
| --config | -c | 設定ファイルを指定 | [デフォルト: "json-server.json"] |
| - ポート | -p | ポートの設定 [デフォルト: 3000] | 番号 |
| - ホスト | -H | ドメインを設定 [デフォルト: "0.0.0.0"] | 弦 |
| - 時計 | -w | 監視ファイル | 監視するかどうか |
| --ルート | -r | カスタム ルートを指定する | |
| --ミドルウェア | -m | ミドルウェア ファイルの指定 | [配列] |
| - 静的 | -s | 静的ファイル ディレクトリの設定 | 静的ディレクトリ、類推: 高速静的ディレクトリ |
| --読み取り専用 | --ro | GET リクエストのみを許可する [bool] | |
| --nocors | --nc | クロスオリジン リソース共有を無効にする [ブール値] | |
| - いいえ | gzip | , --ng GZIP コンテンツ エンコーディングを無効にする [bool] | |
| -- スナップショット | -S | スナップショットのディレクトリを設定 [デフォルト: "."] | |
| - 遅れ | -d | 応答に遅延を追加する (ミリ秒) | |
| --id | -私 | データベース ID プロパティを設定します (例: _id) [デフォルト: "id"] | |
| --foreignKeySuffix | -- | 例: 外部キーのサフィックスを設定します (例: post_id の _id) | [デフォルト: "ID"] |
| - ヘルプ | -h | ヘルプ情報を表示 | [ブール] |
| - バージョン | -v | バージョン番号を表示 | [ブール] |
3. 運行データ
まず、自分で db.json データをダンプしてみましょう. たとえば、現在はフルーツ モールであり、ユーザー情報と果物の価格情報を入力します。
{
"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"
}
]
}データ形式は JSON 形式に準拠していることに注意してください (特に、最後のキーと値のペアの後にコンマがないことに注意してください)。データ形式が間違っている場合、コマンド ウィンドウにエラーが報告されますが、エラー プロンプトに従って変更できます。
次に、GET、POST、PUT、PATCH、または DELETE メソッドを使用してデータを操作できます。
データを取得する
まず、GET 操作を見てみましょう。
ブラウザ アドレス アクセスは GET 操作と見なすことができるため、コードを記述せずに、最初に url -GET 操作をテストできます。
通常のアクセス
http://localhost:3004/fruitsすべての果物データを取得できます (オブジェクト配列)
[
{
"id": 1,
"name": "苹果",
"price": 1.28
},
{
"id": 2,
"name": "橘子",
"price": 3.88
},
{
"id": 3,
"name": "西瓜",
"price": 1.98
}
]フィルターを取得してフィルターを取得する
IDでデータを取得
http://localhost:3004/fruits/1指定された id を 1 としてフルーツ (オブジェクト) を取得できます。
{
"id": 1,
"name": "苹果",
"price": 1.28
}もちろん、次のコマンドでidが1の取得コマンドを指定することもできますが、このとき返されるデータは配列であることに注意してください。
http://localhost:3004/fruits?id=1[
{
"id": 1,
"name": "苹果",
"price": 1.28
}
]同様に、果物の名前または価格でデータを取得することもできます。
http://localhost:3004/fruits?name=橘子[
{
"id": 2,
"name": "橘子",
"price": 3.88
}
]& 記号でつないで複数の条件を指定することもできます。
http://localhost:3004/fruits?name=橘子&price=3.88[
{
"id": 2,
"name": "橘子",
"price": 3.88
}
]オブジェクトを使用して、プロパティ値 obj.key を取得することもできます。
http://localhost:3004/users?name.nickname=zhangsan[
{
"name": {
"username": "admin",
"nickname": "zhangsan"
},
"pwd": "123456"
}
]上記は見覚えがあるでしょうか、HTTPのGETリクエストメソッドですよね～
さて、楽しみはまだまだ続きます。
ページネーション
ページング効果を実証するために、db.json ファイルの果物にさらにいくつかの果物を追加しました。
{
"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[
{
"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
}
]ソート ソート
並べ替えでは_sort、並べ替えるフィールドを指定し_order、並べ替えが順方向か逆方向かを指定するために使用します (asc | desc、デフォルトは asc)。
http://localhost:3004/fruits?_sort=price&_order=desc[
{
"id": 9,
"name": "海南荔枝",
"price": 9.9
},
{
"id": 10,
"name": "陕西冬枣",
"price": 5.39
},
{
"id": 4,
"name": "麒麟西瓜",
"price": 3.98
},
{
"id": 2,
"name": "橘子",
"price": 3.88
},
{
"id": 7,
"name": "红心火龙果",
"price": 2.69
},
{
"id": 5,
"name": "红蛇果",
"price": 2.5
},
{
"id": 11,
"name": "软籽石榴",
"price": 2.39
},
{
"id": 1,
"name": "糖心富士苹果",
"price": 2.38
},
{
"id": 12,
"name": "蜜橘",
"price": 1.99
},
{
"id": 3,
"name": "宁夏西瓜",
"price": 1.98
},
{
"id": 8,
"name": "国产火龙果",
"price": 1.69
},
{
"id": 13,
"name": "海南香蕉",
"price": 1.45
},
{
"id": 6,
"name": "黑皮西瓜",
"price": 0.98
}
]You can also specify multiple fields to sort. 通常、価格で並べ替えた後、同じ価格を ID で並べ替えます。
http://localhost:3004/fruits?_sort=price,id&_order=desc,ascローカル データ スライスを取得する
slice メソッドは Array.slice() メソッドに似ています。開始位置の指定、終了位置の指定、または開始位置から取得するデータの数の指定_startに使用します。_end_limit
http://localhost:3004/fruits?_start=2&_end=4[
{
"id": 3,
"name": "宁夏西瓜",
"price": 1.98
},
{
"id": 4,
"name": "麒麟西瓜",
"price": 3.98
}
] http://localhost:3004/fruits?_start=2&_limit=4[
{
"id": 3,
"name": "宁夏西瓜",
"price": 1.98
},
{
"id": 4,
"name": "麒麟西瓜",
"price": 3.98
},
{
"id": 5,
"name": "红蛇果",
"price": 2.5
},
{
"id": 6,
"name": "黑皮西瓜",
"price": 0.98
}
]オペレーターの範囲を取る
(1) 値の範囲 (範囲) を設定する_gte _lteために。
http://localhost:3004/fruits?id_gte=4&id_lte=6[
{
"id": 4,
"name": "麒麟西瓜",
"price": 3.98
},
{
"id": 5,
"name": "红蛇果",
"price": 2.5
},
{
"id": 6,
"name": "黑皮西瓜",
"price": 0.98
}
] (2) set _neto set に特定の値が含まれていない場合:
http://localhost:3004/fruits?id_ne=1&id_ne=10[
{
"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": 11,
"name": "软籽石榴",
"price": 2.39
},
{
"id": 12,
"name": "蜜橘",
"price": 1.99
},
{
"id": 13,
"name": "海南香蕉",
"price": 1.45
}
] (3)_like一致する文字列 (または正規表現) を設定するために使用します。
http://localhost:3004/fruits?name_like=果[
{
"id": 1,
"name": "糖心富士苹果",
"price": 2.38
},
{
"id": 5,
"name": "红蛇果",
"price": 2.5
},
{
"id": 7,
"name": "红心火龙果",
"price": 2.69
},
{
"id": 8,
"name": "国产火龙果",
"price": 1.69
}
]全文検索全文検索
q検索コンテンツの設定に 使用します。
http://localhost:3004/fruits?q=3[
{
"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": 10,
"name": "陕西冬枣",
"price": 5.39
},
{
"id": 11,
"name": "软籽石榴",
"price": 2.39
},
{
"id": 13,
"name": "海南香蕉",
"price": 1.45
}
]データを取得するだけでなく、SQLを操作するのと同じようにデータを変更したり削除したりできることももちろん望んでいます。
そこで、ここでは、ほとんどの人が慣れ親しんでいる ajax メソッドを使用して応答データを操作します。
ケース
db.json ですべてのフルーツ情報を取得し、テーブルに表示します。
<!DOCTYPE html>
<html>
<head>
<title>使用jquery ajax方法操作数据</title>
<script type="text/javascript" src="js/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>
データの追加
新しいリソースを作成するために一般的に使用される 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")
}
})
})猕猴桃 2.68フルーツ 添加水果ボタンを入力した後、新しいフルーツを追加します。ボタンをもう一度クリックしてgetdb.json データを取得すると、新しく追加されたデータが表示されます。この時点で db.json ファイルを開くと、この新しく追加されたレコードも表示されます。
注: このとき、再度添加水果ボタン、内容は異なるが&が同じ重複データが複数猕猴桃 2.68がわかります。getidnameprice
データの更新
PUT メソッドは、既存のリソースを更新するためによく使用されます。リソースが存在しない場合は、リソースも作成されます。
ケース: 果物に対応する 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")
}
})
}) 例では、 と入力してid価格1を に変更します100。本来の目的は価格を 100 に糖心富士苹果更新するが、PUT メソッドを実行すると、 getto データnameフィールド糖心富士苹果が になりますundefined。
これは、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")
}
})
})idここでは、と 入力し2、価格を に変更します200。つまり、橘子更新されるは 200 です。PATCH メソッドを実行した後、getデータ フィールドへの価格はname実際に変更されており、PUT のように変更されることはありません。方法。橘子nameundefined
しかし、果物の名前を入力して、果物の価格を動的に更新したい場合があります。しかし、'http://localhost:3004/fruits/橘子'このようなURL は誤りであり、この'http://localhost:3004/fruits?name = 橘子'ような 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")
}
})
}データを削除する
既存のリソースを削除するために一般的に使用される 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")
}
})
}) すべて削除したい場合、'http://localhost:3004/fruits'このリクエスト URL を使用する方法はありません。
削除するオブジェクト 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")
}
})
}4 番目に、静的リソース サーバーを構成します。
主に画像、音声、およびビデオのリソースを構成するために使用されます
コマンド ラインからルーティング、データ ファイル、監視などを構成すると、コマンドが非常に長くなり、入力を間違えやすくなります。
json-server を使用すると、すべての構成を構成ファイルに入れることができます。通常、このファイルはjson_sever_config.json;という名前です。
json_sever_config.json
{
"port": 3004,
"watch": true,
"static": "./public",
"read-only": false,
"no-cors": false,
"no-gzip": false
}パッケージ.json
{
"scripts": {
"mock": "json-server --c json_sever_config.json db.json"
}
}すべての画像リソースをパブリック ディレクトリに配置できますが、パブリック ディレクトリには画像だけでなく、オーディオとビデオも配置できます. リソースを配置するときは、public の下に画像を作成して画像を配置し、オーディオ/ビデオを作成してオーディオとビデオを別々に配置します。 ;
json_server_config.json で静的ファイルのディレクトリを指定したので、アクセス時に public を無視できます。