Maison > Article > interface Web > services de construction nodejs et vue

services de construction nodejs et vue

PHPzoriginal: 2023-05-25 15:51:08456parcourir

Dans le monde actuel du développement Web, JavaScript est devenu un langage courant. Il peut non seulement être exécuté côté navigateur, mais également fournir un support puissant côté serveur. Node.js est un environnement d'exécution JavaScript back-end open source construit sur le moteur Chrome V8, tandis que Vue est un framework d'interface utilisateur léger, hautes performances et facile à utiliser. Dans cet article, nous présenterons comment utiliser Node.js et Vue pour créer un serveur et écrire un exemple de code simple.

1. Installez Node.js

Tout d'abord, nous devons installer l'environnement Node.js localement. L'installation de Node.js est très simple, il suffit de télécharger le package d'installation et de suivre les instructions pour l'installer. Une fois l'installation terminée, ouvrez le terminal et entrez la commande node –v pour vérifier le numéro de version de Node.js afin de vous assurer que Node.js peut s'exécuter normalement.

2. Créez un projet

Ouvrez le terminal et entrez un répertoire de travail approprié, par exemple :

$ mkdir mon-projet
$ cd mon-projet

Dans le répertoire racine du projet, créez le fichier package.json :

$ npm init

Remplissez les informations sur le projet lorsque vous y êtes invité. Ce fichier enregistrera nos dépendances et la configuration du projet.

3. Installez Vue

Entrez la commande suivante dans le terminal :

$ npm install vue

Une fois l'installation terminée, nous créons un fichier nommé index.html dans le répertoire du projet, puis introduisons le CDN de Vue :

8b05045a5be5764f313ed5b9168a17e6
100db36a723c770d327fc0aef2ce13b1
93f0f5c25f18dab9d176bd4f6de5d30e

<title>My Vue App</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

9c3bca370b5104690d9ef395f2c5f8d1
6c04bd5ca3fcae76e30b72ad730ca86d

<div id="app">
    {{ message }}
</div>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            message: 'Hello, Vue!'
        }
    });
</script>

36cc49f0c466276486e50c850b7e4956
73a6ac4ed44ffec12cee46588e518a5e

Dans cet exemple de code , nous utilisons Vue pour restituer dynamiquement la vue et lier une donnée au modèle. La syntaxe de liaison de données de Vue est très concise. Utilisez {{ }} pour lier les données au modèle, afin que nous puissions mettre à jour le contenu affiché par le modèle au moment de l'exécution.

4. Créer un service Node.js

Ensuite, nous utilisons Node.js pour créer un service. Dans le répertoire racine du projet, créez un fichier nommé server.js et entrez le code suivant :

const http = require('http');

const server = http.createServer((req, res) = > {

res.statusCode = 200;
res.setHeader('Content-Type', 'text/plain');
res.end('Hello, World!

');
});

server.listen(3000, () => {

console.log('Server running at http://localhost:3000/');

});

Cet extrait de code crée un simple serveur HTTP et écoute sur le port 3000 . Nous pouvons utiliser le module http fourni par Node.js lui-même pour créer et gérer des serveurs. Ce module fournit des API courantes pour le protocole HTTP, telles que createServer, Listen, etc.

5. Intégrez l'application Vue dans le service

Maintenant, nous intégrons l'application Vue dans notre service. Nous ajoutons le code suivant au fichier index.html :

8b05045a5be5764f313ed5b9168a17e6
100db36a723c770d327fc0aef2ce13b1

<head>
    <title>My Vue App</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
    <div id="app">
        {{ message }}
    </div>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                message: 'Hello, Vue!'
            }
        });
    </script>
</body>

73a6ac4ed44ffec12cee46588e518a5e

现在，我们需要将这个文件作为我们的服务的响应。修改server.js文件如下：

const http = require('http');
const fs = require('fs');

const server = http.createServer((req, res) => {
    res.statusCode = 200;
    res.setHeader('Content-Type', 'text/html');
    fs.readFile('index.html', (err, data) => {
        if (err) throw err;
        res.end(data);
    });
});

server.listen(3000, () => {
    console.log('Server running at http://localhost:3000/');
});

这个修改后的代码片段会读取index.html文件，并将其发送到客户端。这样，我们的服务就能够将Vue应用呈现到用户的浏览器中。

6、总结

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!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：pool de connexions de requête nodejsArticle suivant：pool de connexions de requête nodejs

Articles Liés

Voir plus