vue-cli プロジェクトでモックデータを使用する方法-jsチュートリアル-php.cn

vue-cli プロジェクトでモックデータを使用する方法

不言

リリース： 2018-06-29 14:01:47

オリジナル

2659 人が閲覧しました

この記事は主に vue-cli プロジェクトでのモックデータの使用方法を紹介します。内容が非常に優れているので、参考として共有します。

vue プロジェクトでは、モックデータはノードの Express モジュールを使用してサービスを構築できます

1. ルートディレクトリにテストディレクトリを作成し、シミュレートされた JSON データを保存し、テストディレクトリにシミュレートされたデータの data.json ファイルを作成します。

2. ビルドディレクトリの dev-server.js ファイルに次の変更を加えます

3. .vue でリクエストを行うと、data.json データを正常に取得できます。以下の axios リクエストを作成します

var appData = require(&#39;../test/data.json&#39;)
// 获取数据
var apiRoutes = express.Router();

//get请求
apiRoutes.get(&#39;/seller&#39;,function(req,res){
 res.send({
  appData
 });
});

app.use(&#39;/api&#39;,apiRoutes);

ログイン後にコピー

リクエストは成功し、データが取得されます

4. 投稿リクエストを行う場合は、dev-server.js に対応する変更を加える必要があります。 file

axios.get(&#39;/api/seller&#39;,{
     params: {
      ID: 12345
     }
   })
    .then(function (response) {
     console.log(response);
    })
    .catch(function (error) {
     console.log(error);
    });

ログイン後にコピー

これです。vueプロジェクトでajaxをシミュレートしてリクエストできます

以上がこの記事の全内容です。その他の関連コンテンツについては、こちらをご覧ください。 PHP 中国語 Web サイトに注意してください。

関連する推奨事項: キープアライブデータキャッシュによる

vue プロジェクトの最適化方法

vue.extend によるアラートモーダルボックスポップアップコンポーネントの実装

以上がvue-cli プロジェクトでモックデータを使用する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。