Comment faire fonctionner la base de données dans Vue.js

Avec le développement de la technologie front-end moderne, de plus en plus de développeurs se concentrent sur la façon de combiner de manière transparente le front-end et le back-end. Vue.js est un framework JavaScript populaire pour développer des applications Web interactives d'une seule page. Dans Vue.js, nous pouvons utiliser différentes méthodes pour communiquer avec le serveur, dont les plus courantes sont AJAX et Axios. Cependant, dans la plupart des cas, nous devons utiliser Vue.js avec une base de données. Cet article expliquera comment utiliser la base de données dans Vue.js.

1. Lire la documentation

Lorsque vous utilisez Vue.js, la première chose à faire est de vous assurer d'avoir lu le document officiel de Vue.js documentation. Dans la documentation, l'auteur de Vue.js a expliqué en détail comment utiliser Vue.js pour communiquer avec le serveur, comment utiliser Vuex pour gérer l'état et comment intégrer des bibliothèques externes. Dans la documentation officielle de Vue.js, vous pouvez trouver des modules et des bibliothèques compatibles avec votre langage backend, ce qui est une étape importante pour commencer à travailler sur le frontend.

2. Choisissez le langage et le framework backend appropriés

Lorsque vous choisissez le langage et le framework backend appropriés, veuillez prendre en compte les facteurs suivants :

#🎜 🎜##🎜 🎜#Support de base de données : choisissez les langages et les frameworks qui prennent en charge la base de données que vous souhaitez utiliser.

• Performance et évolutivité : choisissez des langages et des frameworks capables de répondre aux besoins de performances et d'évolutivité de votre système.
• Soutien de la communauté : choisissez des langages et des frameworks qui bénéficient d'un soutien communautaire fort et actif.
• Ici, nous prendrons Node.js comme exemple et utiliserons le framework Express.js et la base de données MongoDB pour illustrer comment implémenter une base de données dans Vue.js.

Installez Node.js et MongoDB

3. Tout d'abord, vous devez installer Node.js et MongoDB. Vous pouvez le télécharger depuis le site officiel et suivre les instructions pour terminer l'installation.

Créer un projet Express.js

4. Après avoir installé Node.js et MongoDB, créez un Express dans la ligne de commande en exécutant les commandes suivantes .js projet :

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

Cette simple application Node.js créera un serveur Express.js. Nous allons maintenant mettre en place le routage et le middleware sur ce serveur.

Configuration du routage et du middleware

5. Dans les applications Express.js, le routage et le middleware sont très importants. Une route est une combinaison du chemin de requête d'une requête Web et des événements gérés par les méthodes HTTP. Le middleware est une fonction exécutée avant et après le traitement d’une requête. Dans une application Vue.js, nous utiliserons Axios pour envoyer des requêtes au serveur Express.js.

Ici, nous mettons en place une route simple qui renverra une donnée JSON traitée lorsque le client enverra une requête au serveur. :

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}`)
})

Créer une base de données MongoDB

6. Dans cette étape, nous utiliserons la base de données MongoDB pour enregistrer les données. MongoDB est une base de données open source basée sur des documents. Contrairement aux bases de données relationnelles traditionnelles, MongoDB n'utilise pas de tables, mais des collections et des documents. Dans le répertoire racine du projet Express.js, nous allons créer une collection nommée data :

mongo
use mydatabase
db.createCollection('data')

Configurer le modèle de base de données MongoDB#🎜🎜 ## 🎜🎜#data 的集合：

$ npm install mongoose --save

7. 配置 MongoDB 数据库模型

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

const mongoose = require('mongoose');

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

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

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

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);
    });
});

8. 连接应用和数据库

连接数据库通常是非常麻烦的，但 Mongoose.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>

9. 将 Express.js 和 MongoDB 集成到 Vue.js 应用中

现在，我们已经完成了后端的工作。 下一步是将其与Vue.js 前端进行集成。 在 Vue.js 应用中，我们将使用 Axios 来向服务器发送请求。 Axios 是一个基于 Promise 的 HTTP 客户端，它很容易集成到Vue.js 应用中。

在 Vue.js 应用中，我们可以使用以下代码来获取服务器端提供的数据：

rrreee

在此示例中，我们使用 Vue.js 的组件将数据呈现在页面中。在 mounted() Nous utilisons le package Mongoose.js pour activer le modèle de base de données MongoDB dans le projet Express.js. Le package Mongoose.js offre un contrôle plus fin lors de l'utilisation de MongoDB sur le serveur. Pour utiliser MongoDB, installez Mongoose.js dans votre projet :

rrreee

Créez un fichier data.js dans lequel créer le modèle de base de données Mongoose.js. Dans ce fichier, nous créons le modèle de données à l'aide de la fonction mongoose.Schema(). Dans cet exemple, nous avons configuré le modèle pour qu'il contienne deux champs : nom et âge.

rrreee

Connexion d'applications et de bases de données

#🎜🎜##🎜🎜#La connexion à une base de données est généralement très fastidieuse, mais Mongoose.js la rend très simple Simple. Voici le code nécessaire pour se connecter à la base de données : #🎜🎜#rrreee
#🎜🎜#Intégration d'Express.js et MongoDB dans une application Vue.js #🎜🎜##🎜🎜##🎜 🎜 #Maintenant, nous avons terminé le travail backend. La prochaine étape consiste à l'intégrer à l'interface Vue.js. Dans une application Vue.js, nous utiliserons Axios pour faire des requêtes au serveur. Axios est un client HTTP basé sur Promise qui s'intègre facilement aux applications Vue.js. #🎜🎜##🎜🎜#Dans une application Vue.js, on peut utiliser le code suivant pour récupérer les données fournies par le côté serveur : #🎜🎜#rrreee#🎜🎜#Dans cet exemple, on utilise le composant de Vue. .js vers Les données sont présentées sur la page. Dans la méthode Mounted(), nous envoyons une requête au serveur Express.js que nous avons configuré et utilisons Axios pour stocker les données de réponse dans l'objet de données du composant. Nous utilisons ensuite des modèles pour restituer les données au format JSON. #🎜🎜##🎜🎜#Summary#🎜🎜##🎜🎜#Dans cet article, nous avons présenté comment créer une base de données dans Vue.js à l'aide d'Express.js et MongoDB. Nous avons créé un serveur Express.js et utilisé Axios pour transmettre des données entre le serveur et le client. Dans l'application Vue.js, nous utilisons Axios pour envoyer des requêtes et MongoDB pour sauvegarder les données. Les étapes ci-dessus peuvent être facilement appliquées à une variété de technologies et de frameworks différents, vous permettant d'utiliser les techniques que nous couvrons sur n'importe quelle fonctionnalité et technologie. #🎜🎜#

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!