services de construction nodejs et vue-Questions et réponses frontales-php.cn

services de construction nodejs et vue

PHPz

Libérer： 2023-05-25 15:51:08

original

486 Les gens l'ont consulté

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 :

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

Copier après la connexion

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

Copier après la connexion

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!

Copier après la connexion

');
});

server.listen(3000, () => {

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

Copier après la connexion

});

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 :

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

Copier après la connexion

现在，我们需要将这个文件作为我们的服务的响应。修改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、总结

Copier après la connexion

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!