Node.js est un environnement d'exécution JavaScript populaire qui permet aux développeurs de développer des applications backend hautes performances à l'aide du langage JavaScript. Node.js est livré avec Express.js, un cadre d'application Web simple et flexible, et fournit également un puissant moteur de modèles EJS, qui peut aider les développeurs à créer des applications Web belles et faciles à entretenir.
Dans cet article, nous expliquerons comment installer Node.js, Express.js et EJS et apprendrons à les utiliser ensemble pour créer une application Web simple.
Avant de commencer, assurez-vous que l'environnement d'exécution Node.js est installé sur votre ordinateur. Si vous ne l'avez pas encore installé, veuillez suivre les étapes ci-dessous pour l'installer :
Une fois l'installation terminée, ouvrez un terminal (ou une fenêtre de ligne de commande) et entrez la commande suivante pour vérifier si Node.js est correctement installé :
node -v
npm init
npm install express --save
app.js
dans le répertoire racine du projet. Il s'agit du point d'entrée principal de votre application Express.js. app.js
的新文件。这是您的 Express.js 应用程序的主要入口点。在 app.js
文件中,输入以下代码来创建一个简单的 Express.js 应用程序:
const express = require('express'); const app = express(); app.get('/', (req, res) => { res.send('Hello World!'); }); app.listen(3000, () => { console.log('Server listening on port 3000!'); });
这个应用程序将会响应来自客户端浏览器的所有 HTTP GET 请求,并返回一个包含 “Hello World!” 的字符串。
保存 app.js
文件后,切换到终端(或命令行窗口),将工作目录切换到 app.js
文件所在的目录,并运行以下命令:
node app.js
如果一切正常,您应该可以看到终端输出 “Server listening on port 3000!” 的信息。这表明您的 Express.js 应用程序正在运行,并可以通过访问 http://localhost:3000/ 来访问它。
EJS 是一个简单、易用的模板引擎,可以帮助您在 Express.js 应用程序中创建具有动态内容的网页。请按照以下步骤进行安装:
打开终端(或命令行窗口),输入以下命令:
npm install ejs --save
这个命令将会从 npm 仓库中安装最新版本的 EJS,并将其作为依赖关系添加到您的项目中。
views
的新文件夹。这将是您的 Express.js 应用程序用来存放 EJS 模板文件的地方。views
文件夹中,创建一个名为 index.ejs
的新文件。这将是您的网页的主要模板文件。在 index.ejs
文件中,输入以下代码来创建一个简单的网页:
<!DOCTYPE html> <html> <head> <title>EJS Example</title> </head> <body> <h1>Welcome to the EJS Example!</h1> <p>The current date and time is <%= new Date().toString() %>.</p> </body> </html>
这个模板将会显示一个标题,“Welcome to the EJS Example!”,以及一个包含当前日期和时间的段落。
回到 app.js
文件中,在头部添加以下代码来告诉 Express.js 应用程序在哪里可以找到 EJS 模板文件:
app.set('views', './views'); app.set('view engine', 'ejs');
在 app.js
文件中,用以下代码替换 app.get
方法:
app.get('/', (req, res) => { res.render('index'); });
这个方法会通过 EJS 模板引擎来呈现 views/index.ejs
文件,并将其发送回客户端浏览器。
保存 app.js
和 index.ejs
文件后,切换到终端(或命令行窗口),将工作目录切换到 app.js
app.js
, saisissez le code suivant pour créer une application Express.js simple : node app.js
app.js
, passez au terminal (ou à la fenêtre de ligne de commande) et basculez le répertoire de travail sur app. js
et exécutez la commande suivante : views
. C'est ici que votre application Express.js stockera ses fichiers de modèle EJS. #🎜🎜##🎜🎜#Dans le dossier views
, créez un nouveau fichier appelé index.ejs
. Ce sera le fichier modèle principal de votre page Web. #🎜🎜##🎜🎜##🎜🎜#Dans le fichier index.ejs
, saisissez le code suivant pour créer une page web simple : #🎜🎜#rrreee#🎜🎜#Ce modèle sera affiché Un titre, "Bienvenue dans l'exemple EJS!", et un paragraphe contenant la date et l'heure actuelles. #🎜🎜##🎜🎜##🎜🎜##🎜🎜#Retournez dans le fichier app.js
et ajoutez le code suivant dans l'en-tête pour indiquer à l'application Express.js où trouver le Fichier modèle EJS : #🎜🎜#rrreee#🎜🎜##🎜🎜##🎜🎜#Dans le fichier app.js
, remplacez la méthode app.get
par la code suivant : # 🎜🎜#rrreee#🎜🎜#Cette méthode restituera le fichier views/index.ejs
via le moteur de modèle EJS et le renverra au navigateur client. #🎜🎜##🎜🎜##🎜🎜##🎜🎜#Après avoir enregistré les fichiers app.js
et index.ejs
, passez au terminal (ou à la ligne de commande window), basculez le répertoire de travail vers le répertoire où se trouve le fichier app.js
et exécutez la commande suivante : #🎜🎜#rrreee#🎜🎜#Si tout se passe bien, vous devriez voir le sortie du terminal "Serveur à l'écoute sur le port 3000!". Cela indique que votre application Express.js est en cours d'exécution et est accessible en visitant http://localhost:3000/. #🎜🎜##🎜🎜#Cliquez sur le lien et vous devriez voir une page Web avec la date et l'heure actuelles. #🎜🎜##🎜🎜##🎜🎜##🎜🎜#Conclusion#🎜🎜##🎜🎜#Dans cet article, nous avons appris à installer Node.js, Express.js et EJS et à créer une application web simple. Dans le prochain article, nous verrons comment utiliser Express.js et EJS pour créer des applications Web plus complexes et plus puissantes. #🎜🎜#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!