json-server はバックエンド データ シミュレーションを実装します

今回は、バックエンド データ シミュレーションを実装するための json-server について説明します。json-server がバックエンド データ シミュレーションを実装するための 注意事項 について説明します。実際のケースを見てみましょう。

開発プロセス中、フロントエンドとバックエンドは分離されているか、分離されていない場合があり、インターフェイスはほとんど後からページで開発されるため、フロントエンドに仮想データを提供するためのREST APLインターフェイスを確立することが非常に必要です。ここでは、ツールとして json-server を使用します。CORS および

JSONP クロスドメイン リクエスト をサポートし、GET、POST、PUT、PATCH、DELETE メソッドをサポートし、limit などの一連の query メソッドも提供します。次に、自分の使い方をDocument

installation

として書きました。まず、ノード環境を用意する必要があります(json-serverを使用する場合は、ノード環境が必要です)。次に、json-をインストールします。サーバーをグローバルに

npm install json-server -g

インストールが完了したら、グローバル インストールが成功したかどうかを確認します

G:\demo\JavaScript\Vue\Vue one\project\my-project\Vue_two\my-project>json-server -h
index.js [options] <source>
Options:
 --config, -c        Path to config file  [default: "json-server.json"]
 --port, -p         Set port              [default: 3000]
 --host, -H         Set host            [default: "0.0.0.0"]
 --watch, -w        Watch file(s)               [boolean]
 --routes, -r        Path to routes file
 --middlewares, -m     Paths to middleware files          [array]
 --static, -s        Set static files directory
 --read-only, --ro     Allow only GET requests          [boolean]
 --no-cors, --nc      Disable Cross-Origin Resource Sharing   [boolean]
 --no-gzip, --ng      Disable GZIP Content-Encoding       [boolean]
 --snapshots, -S      Set snapshots directory       [default: "."]
 --delay, -d        Add delay to responses (ms)
 --id, -i          Set database id property (e.g. _id) [default: "id"]
 --foreignKeySuffix, --fks Set foreign key suffix (e.g. _id as in post_id)
                                 [default: "Id"]
 --quiet, -q        Suppress log messages from output     [boolean]
 --help, -h         Show help                 [boolean]
 --version, -v       Show version number            [boolean]
Examples:
 index.js db.json
 index.js file.js
 index.js http://example.com/db.json
https://github.com/typicode/json-server</source>

プロジェクトのルート ディレクトリに db.json ディレクトリを作成し、情報を書き込みます

{
 "api": [
  {
   "text": "数据统计",
   "link": "#",
   "hot": true
  },
  {
   "text": "数据检测",
   "link": "#",
   "hot": true
  },
  {
   "text": "流量分析",
   "link": "#",
   "hot": true
  },
  {
   "text": "广告发布",
   "link": "#",
   "hot": false
  }
 ]
}

のスクリプトにコマンド行を追加しますpackage.json

  "json": "json-server db.json --port 3003"

プロジェクトディレクトリでコマンドを実行します

npm run json

bashインターフェースではこのようなものが表示されます

> vue@1.0.0 json g:\demo\JavaScript\Vue\Vue one\project\my-project\Vue_two\my-project
> json-server db.json --port 3003
 \{^_^}/ hi!
 Loading db.json
 Done
 Resources
 http://localhost:3003/api
 Home
 http://localhost:3003
 Type s + enter at any time to create a snapshot of the database

起動成功おめでとうございます!

Webページに入って今すぐアクセスしてください

今すぐアクセスしてください

http://localhost:3003/api

前に書いたjson文字列が確認できます

これでjson-serverが起動しました

呼び出しコードはこんな感じです

this.$http.get('http://localhost:3003/api')
   .then((data) => {
    console.log(data.body)
   }, () => {
    console.log('这里是用了vue-source,后端没有接口')
   })

ページの初期化後にデータが完成します

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、PHP 中国語 Web サイトの他の関連記事に注目してください。

推奨書籍:

Vue-cropper 画像をトリミングする手順の詳細な説明

Vue Mixin 機能の使用手順の詳細な説明

以上がjson-server はバックエンド データ シミュレーションを実装しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。