So betreiben Sie die Datenbank in Vue.js

Mit der Entwicklung moderner Front-End-Technologie konzentrieren sich immer mehr Entwickler auf die nahtlose Kombination von Front-End und Back-End. Vue.js ist ein beliebtes JavaScript-Framework für die Entwicklung interaktiver Single-Page-Webanwendungen. In Vue.js können wir verschiedene Methoden zur Kommunikation mit dem Server verwenden, die gebräuchlichsten sind AJAX und Axios. In den meisten Fällen müssen wir jedoch Vue.js mit einer Datenbank verwenden. In diesem Artikel wird erläutert, wie Sie die Datenbank in Vue.js betreiben.

1. Lesen Sie die Dokumentation

Das erste, was Sie bei der Verwendung von Vue.js tun müssen, ist sicherzustellen, dass Sie die offizielle Vue.js-Dokumentation gelesen haben. In der Dokumentation hat der Autor von Vue.js ausführlich erklärt, wie man Vue.js für die Kommunikation mit dem Server verwendet, wie man Vuex zum Verwalten des Status verwendet und wie man mit externen Bibliotheken integriert. In der offiziellen Dokumentation von Vue.js finden Sie Module und Bibliotheken, die mit Ihrer Backend-Sprache kompatibel sind. Dies ist ein wichtiger Schritt, um mit der Arbeit am Frontend zu beginnen.

2. Wählen Sie die geeignete Backend-Sprache und das entsprechende Framework.

Berücksichtigen Sie bei der Auswahl der geeigneten Backend-Sprache und des geeigneten Frameworks die folgenden Faktoren:

• Datenbankunterstützung: Wählen Sie eine Sprache und ein Framework, die die Datenbank unterstützen, die Sie verwenden möchten.
• Leistung und Skalierbarkeit: Wählen Sie Sprachen und Frameworks, die den Leistungs- und Skalierbarkeitsanforderungen Ihres Systems entsprechen.
• Community-Unterstützung: Wählen Sie Sprachen und Frameworks mit starker und aktiver Community-Unterstützung.

Hier nehmen wir Node.js als Beispiel und verwenden das Express.js-Framework und die MongoDB-Datenbank, um zu veranschaulichen, wie eine Datenbank in Vue.js implementiert wird.

3. Node.js und MongoDB installieren

Zuerst müssen Sie Node.js und MongoDB installieren. Sie können es von der offiziellen Website herunterladen und den Anweisungen folgen, um die Installation abzuschließen.

4. Erstellen eines Express.js-Projekts

Erstellen Sie nach der Installation von Node.js und MongoDB ein Express.js-Projekt in der Befehlszeile, indem Sie den folgenden Befehl ausführen:

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

Diese einfache Node.js-Anwendung erstellt ein Express.js-Projekt Server. Jetzt richten wir Routing und Middleware auf diesem Server ein.

5. Routing und Middleware einrichten

In Express.js-Anwendungen sind Routing und Middleware sehr wichtig. Eine Route ist eine Kombination aus dem Anforderungspfad einer Webanforderung und den von HTTP-Methoden verarbeiteten Ereignissen. Middleware ist eine Funktion, die vor und nach der Verarbeitung einer Anfrage ausgeführt wird. In einer Vue.js-Anwendung verwenden wir Axios, um Anfragen an den Express.js-Server zu senden.

Hier richten wir eine einfache Route ein, die verarbeitete JSON-Daten zurückgibt, wenn der Client eine Anfrage an den Server sendet. :

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-Datenbank erstellen

In diesem Schritt verwenden wir die MongoDB-Datenbank zum Speichern von Daten. MongoDB ist eine dokumentenbasierte Open-Source-Datenbank. Im Gegensatz zu herkömmlichen relationalen Datenbanken verwendet MongoDB keine Tabellen, sondern Sammlungen und Dokumente. Im Stammverzeichnis des Express.js-Projekts erstellen wir eine Sammlung mit dem Namen data: data 的集合：

mongo
use mydatabase
db.createCollection('data')

7. 配置 MongoDB 数据库模型

我们使用 Mongoose.js 包来在 Express.js 项目中启用 MongoDB 数据库模型。 Mongoose.js 包提供了在服务器上使用 MongoDB 时更精细的控制。 为使用 MongoDB，在项目中安装 Mongoose.js:

$ npm install mongoose --save

创建一个 data.js 文件，在其中创建 Mongoose.js 数据库模型。 在这个文件中，我们使用 mongoose.Schema() 函数创建数据模型。 在这个例子中，我们将模型设置为包含两个字段：名称和年龄。

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 是一个基于 Promise 的 HTTP 客户端，它很容易集成到Vue.js 应用中。

在 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()rrreee

Konfigurieren Sie das MongoDB-Datenbankmodell

Wir verwenden das Mongoose.js-Paket um das MongoDB-Datenbankmodell im Express.js-Projekt zu aktivieren. Das Mongoose.js-Paket bietet eine genauere Kontrolle bei der Verwendung von MongoDB auf dem Server. Um MongoDB zu verwenden, installieren Sie Mongoose.js in Ihrem Projekt:

rrreee🎜 Erstellen Sie eine data.js-Datei und erstellen Sie darin das Mongoose.js-Datenbankmodell. In dieser Datei erstellen wir das Datenmodell mit der Funktion mongoose.Schema(). In diesem Beispiel richten wir das Modell so ein, dass es zwei Felder enthält: Name und Alter. 🎜rrreee
🎜Anwendungen und Datenbanken verbinden🎜🎜🎜Die Verbindung zu einer Datenbank ist normalerweise sehr umständlich, aber Mongoose.js macht es sehr einfach. Hier ist der Code, der zum Herstellen einer Verbindung zur Datenbank benötigt wird: 🎜rrreee
🎜Express.js und MongoDB in eine Vue.js-Anwendung integrieren🎜🎜🎜Jetzt sind wir mit dem Backend fertig. Der nächste Schritt besteht darin, es in das Vue.js-Frontend zu integrieren. In einer Vue.js-Anwendung verwenden wir Axios, um Anfragen an den Server zu stellen. Axios ist ein Promise-basierter HTTP-Client, der problemlos in Vue.js-Anwendungen integriert werden kann. 🎜🎜In einer Vue.js-Anwendung können wir den folgenden Code verwenden, um vom Server bereitgestellte Daten abzurufen: 🎜rrreee🎜In diesem Beispiel verwenden wir Komponenten von Vue.js, um die Daten auf der Seite darzustellen. In der Methode montiert() senden wir eine Anfrage an den von uns eingerichteten Express.js-Server und verwenden Axios, um die Antwortdaten im Datenobjekt der Komponente zu speichern. Anschließend verwenden wir Vorlagen, um die Daten in das JSON-Format zu rendern. 🎜🎜Zusammenfassung🎜🎜In diesem Artikel haben wir vorgestellt, wie man mit Express.js und MongoDB eine Datenbank in Vue.js erstellt. Wir haben einen Express.js-Server erstellt und Axios verwendet, um Daten zwischen Server und Client zu übertragen. In der Vue.js-Anwendung verwenden wir Axios zum Senden von Anfragen und MongoDB zum Speichern der Daten. Die oben genannten Schritte können problemlos auf eine Vielzahl verschiedener Technologien und Frameworks angewendet werden, sodass Sie die von uns behandelten Techniken für jede Funktionalität und Technologie verwenden können. 🎜

Das obige ist der detaillierte Inhalt vonSo betreiben Sie die Datenbank in Vue.js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!