Vue.jsでデータベースを操作する方法

最新のフロントエンド テクノロジーの発展に伴い、フロントエンドとバックエンドをシームレスに組み合わせる方法に焦点を当てる開発者が増えています。 Vue.js は、インタラクティブな単一ページ Web アプリケーションを開発するための人気のある JavaScript フレームワークです。 Vue.js では、さまざまな方法を使用してサーバーと通信できますが、最も一般的なのは AJAX と Axios です。ただし、ほとんどの場合、データベースで Vue.js を使用する必要があります。この記事ではVue.jsでデータベースを操作する方法を紹介します。

1. ドキュメントを読む

Vue.js を使用するときに最初に行うことは、Vue.js の公式ドキュメントを必ず読んでいることです。ドキュメントの中で、Vue.js の作成者は、Vue.js を使用してサーバーと通信する方法、Vuex を使用して状態を管理する方法、および外部ライブラリと統合する方法を詳しく説明しています。 Vue.js の公式ドキュメントでは、バックエンド言語と互換性のあるモジュールとライブラリを見つけることができます。これは、フロントエンドでの作業を開始するための重要なステップです。

2. 適切なバックエンド言語とフレームワークを選択する

適切なバックエンド言語とフレームワークを選択するときは、次の要素を考慮してください:

• データベースサポート: 使用するデータベースをサポートする言語とフレームワークを選択します。
• パフォーマンスとスケーラビリティ: システムのパフォーマンスとスケーラビリティのニーズを満たすことができる言語とフレームワークを選択します。
• コミュニティ サポート: 強力で活発なコミュニティ サポートがある言語とフレームワークを選択してください。

ここでは、Node.js を例として取り上げ、Express.js フレームワークと MongoDB データベースを使用して、Vue.js でデータベースを実装する方法を説明します。

3. Node.js と MongoDB をインストールする

まず、Node.js と MongoDB をインストールする必要があります。公式 Web サイトからダウンロードし、指示に従ってインストールを完了できます。

4. Express.js プロジェクトの作成

Node.js と MongoDB をインストールした後、次のコマンドを実行してコマンド ラインで Express.js プロジェクトを作成します。

$ mkdir my-project
$ cd my-project
$ npm init
$ npm install express --save

この単純な Node.js アプリケーションは Express.js サーバーを作成します。次に、このサーバーにルーティングとミドルウェアを設定します。

5. ルーティングとミドルウェアのセットアップ

Express.js アプリケーションでは、ルーティングとミドルウェアが非常に重要です。ルートは、Web リクエストのリクエスト パスと HTTP メソッドによって処理されるイベントの組み合わせです。ミドルウェアは、リクエストの処理の前後に実行される機能です。 Vue.js アプリケーションでは、Axios を使用して Express.js サーバーにリクエストを送信します。

ここでは、クライアントがサーバーにリクエストを送信したときに、処理された JSON データを返す単純なルートを設定します。 :

const express = require('express')
const app = express()
const port = 3000

app.get('/', (req, res) => {
  res.send('Hello World!')
})

app.get('/api/data', (req, res) => {
  const data = {
    name: 'Jack',
    age: 30
  }
  res.json(data)
})

app.listen(port, () => {
  console.log(`Example app listening at http://localhost:${port}`)
})

6. MongoDB データベースの作成

このステップでは、MongoDB データベースを使用してデータを保存します。 MongoDB は、オープンソースのドキュメントベースのデータベースです。従来のリレーショナル データベースとは異なり、MongoDB はテーブルを使用せず、コレクションとドキュメントを使用します。 Express.js プロジェクトのルート ディレクトリに、data という名前のコレクションを作成します。

mongo
use mydatabase
db.createCollection('data')

7. MongoDB データベース モデルの構成

Mongoose を使用します。 Express.js プロジェクトで MongoDB データベース モデルを有効にする .js パッケージ。 Mongoose.js パッケージは、サーバー上で MongoDB を使用するときに、より詳細な制御を提供します。 MongoDB を使用するには、プロジェクトに Mongoose.js をインストールします。

$ npm install mongoose --save

Mongoose.js データベース モデルを作成する data.js ファイルを作成します。このファイルでは、mongoose.Schema() 関数を使用してデータ モデルを作成します。この例では、名前と年齢という 2 つのフィールドを含むようにモデルを設定します。

const mongoose = require('mongoose');

let dataSchema = mongoose.Schema({
    name: String,
    age: Number
});

module.exports = mongoose.model('Data', dataSchema);

8. アプリケーションとデータベースの接続

データベースへの接続は通常非常に面倒ですが、Mongoose.js を使用すると非常に簡単になります。データベースに接続するために必要なコードは次のとおりです。

const mongoose = require('mongoose');

mongoose.connect('mongodb://localhost/mydatabase', {
    useNewUrlParser: true
});

mongoose.connection.on('connected', () => console.log('MongoDB connected.'));
mongoose.connection.on('error', err => console.error('Mongoose default connection error: ', err));
mongoose.connection.on('disconnected', () => console.log('MongoDB disconnected.'));

process.on('SIGINT', () => {
    mongoose.connection.close(() => {
        console.log('MongoDB connection disconnected through app termination.');
        process.exit(0);
    });
});

9. Express.js と MongoDB を Vue.js アプリケーションに統合する

これで、バックエンドが完成しました。次のステップは、これを Vue.js フロントエンドと統合することです。 Vue.js アプリケーションでは、Axios を使用してサーバーにリクエストを送信します。 Axios は、Vue.js アプリケーションに簡単に統合できる Promise ベースの HTTP クライアントです。

Vue.js アプリケーションでは、次のコードを使用してサーバーから提供されるデータを取得できます:

<template>
  <div>
    <p>{{ data.name }}</p>
    <p>{{ data.age }}</p>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      data: {}
    };
  },
  methods: {
    fetchData() {
      axios.get('http://localhost:3000/api/data').then(
        (response) => {
          this.data = response.data;
        },
        (error) => {
          console.error(error);
        }
      );
    },
  },
  mounted() {
    this.fetchData();
  }
};
</script>

この例では、Vue.js コンポーネントを使用してデータをレンダリングします。ページの真ん中。 mounted() メソッドでは、セットアップした Express.js サーバーにリクエストを送信し、Axios を使用して応答データをコンポーネントのデータ オブジェクトに保存します。次に、テンプレートを使用してデータを JSON 形式にレンダリングします。

概要

この記事では、Express.js と MongoDB を使用して Vue.js でデータベースを作成する方法を紹介しました。 Express.js サーバーを作成し、Axios を使用してサーバーとクライアントの間でデータを受け渡しました。 Vue.js アプリケーションでは、Axios を使用してリクエストを送信し、MongoDB を使用してデータを保存します。上記の手順はさまざまなテクノロジーやフレームワークに簡単に適用できるため、ここで説明するテクニックをあらゆる機能やテクノロジーで使用できるようになります。

以上がVue.jsでデータベースを操作する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。