今回は、json-serverがバックエンドデータを生成する方法と、json-serverがバックエンドデータを生成する際の注意点について説明します。以下は実際的なケースです。
開発プロセス中、フロントエンドとバックエンドは分離されているか、分離されていない場合があり、インターフェイスはほとんど後からページで開発されるため、フロントエンドに仮想データを提供するためのREST APLインターフェイスを確立することが非常に必要です。ここでは、ツールとして json-server を使用します。CORS および JSONP のクロスドメイン リクエストをサポートし、GET、POST、PUT、PATCH、DELETE メソッドをサポートし、limit、order などの一連のクエリ メソッドも提供します。次に、私自身の使用方法を文書化します
インストール
まず、ノード環境を用意する必要があります (json-server を使用する場合は、ノード環境が必要です)。次に、json-server をグローバルにインストールします
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
プロジェクトのルートディレクトリに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 サイトの他の関連記事にご注目ください。
推奨読書:
以上がjson-serverを使用してバックエンドデータを作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。