vue-cli プロジェクトにバックグラウンド モック インターフェイスを追加する手順の詳細な説明

今回は、vue-cliプロジェクトに背景モックインターフェースを追加する手順について詳しく説明します。vue-cliプロジェクトに背景モックインターフェースを追加する際の注意事項は次のとおりです。 、見てみましょう。

vue-cli を使用してフロントエンド開発環境を構築するのは、確かに非常に便利です。フロントエンド コードを作成するときは、フロントエンドとバックエンドの対話のためにバックグラウンドで提供されるビジネス インターフェイスを呼び出す必要があります。特にアジャイル開発では、フロントエンドとバックエンドが事前にビジネスインターフェースを決めておく必要があり、開発プロセス中に呼び出せる既成のバックグラウンドは基本的に存在せず、基本的にシミュレーション用のモックを自分たちで書きます。 。

vue-cliで構築したプロジェクトではフレームワークとしてExpress Web Frameworkを使用しているのでモックを作るのにとても便利です。

すべてのニュース リストをフロントエンド ページで取得する必要があると仮定すると、すべてのニュース リスト データを返すことができるインターフェイスをモックする必要があります。

次のステップは、プロジェクトにモック関数を実装することです。

スキャフォールディング生成プロジェクト

webpack テンプレートを使用して vuestrap という名前のプロジェクトを生成するコマンドを実行します (名前は任意です)

vue init webpack vue-mock-demo

表示されるさまざまなプロンプト オプションには、便宜上、要件はありません。未使用の ESLint を配置し、テストと e2e をオフにします (これらのオプションはオプションです)。

? Project name vuestrap
? Project description A Vue.js project
? Author 省略
? Vue build standalone
? Install vue-router? Yes
? Use ESLint to lint your code? No
? Setup unit tests with Karma + Mocha? No
? Setup e2e tests with Nightwatch? No

オプションを選択すると、プロジェクトが生成されます。

コマンドを実行し、スキャフォールディングによって作成されたコンポーネントをインストールします

npm install

モックを作成します

var express = require('express');
var router = express.Router();
//对所有新闻的get进行mock
router.get('/all', function(req, res, next) {
 //响应mock数据
 res.json([{
  title: 'news-title-1' ,
  content: 'news-content-1'
 },
 {
  title: 'news-title-2' ,
  content: 'news-content-2'
 }]);
});
module.exports = router;

var mockRouterNews = require('../mock/router-news')

app.use('/mock/news', mockRouterNews)

Modular。app.useを使用してすべてのルーターを関連付けるために、対応するルーターにビジネスを渡すこともできます。

Execute

npm run dev

jQueryで電子時計機能を実装する手順の詳細説明

vue+jquery+lodash スライド時のトップフローティング固定関数の詳細説明

Angular5のまとめルーティング値の転送方法

以上がvue-cli プロジェクトにバックグラウンド モック インターフェイスを追加する手順の詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。