Nodejs+express+ejs简单使用实例代码

下面是关于“Nodejs+express+ejs简单使用实例代码”的详细讲解：

什么是Node.js?

Node.js是一个基于Chrome V8引擎的JavaScript运行环境，可以实现后台的JavaScript脚本，被广泛应用于Web服务器端的开发。

什么是Express?

Express是一个基于Node.js平台的Web应用开发框架，它提供了大量Web开发的基础模块和API，可以帮助我们快速地构建Web应用。

什么是EJS?

EJS（Embedded JavaScript）是一种嵌入式JavaScript模板引擎，可以通过向HTML文件中插入JavaScript代码实现动态生成HTML。

Node.js + Express + EJS的使用步骤

安装Node.js和Express模块

安装Node.js比较简单，下载安装包即可；而安装Express模块可以通过npm命令进行安装，命令如下：

npm install express --save

创建Node.js应用程序

首先创建一个新目录，在该目录下创建一个名为index.js的文件。在index.js文件中添加以下代码：

var express = require('express');
var app = express();

// 设置静态文件目录
app.use(express.static('public'));

// 创建路由
app.get('/', function(req, res) {
    res.render('index', {title: 'Node.js + Express + EJS'});
});

// 启动应用程序
app.listen(3000, function() {
    console.log('App is running on http://localhost:3000');
});

安装EJS模块

通过npm命令安装EJS模块，命令如下：

npm install ejs --save

创建视图文件

在新目录下创建一个名为views的文件夹（Express默认视图文件目录），在该文件夹下创建一个名为index.ejs的文件，该文件是我们使用EJS模板引擎生成的视图文件，代码如下：

<!DOCTYPE html>
<html>
<head>
    <title><%= title %></title>
</head>
<body>
    <h1><%= title %></h1>
    <p>Welcome to Node.js + Express + EJS!</p>
</body>
</html>

启动程序

在终端中执行以下命令启动应用程序：

node index.js

在浏览器中打开http://localhost:3000，应该可以看到一个带有“Node.js + Express + EJS”标题的网页。

示例代码

示例1：显示当前时间

在index.ejs文件中添加以下代码：

<!DOCTYPE html>
<html>
<head>
    <title><%= title %></title>
</head>
<body>
    <h1><%= title %></h1>
    <p>Welcome to Node.js + Express + EJS!</p>
    <p>The current time is: <%= new Date().toLocaleString() %></p>
</body>
</html>

重新启动应用程序，打开http://localhost:3000，可以看到网页中显示了当前时间。

示例2：显示博客文章列表

在页面上，我们可以使用EJS的循环结构来动态地展示博客文章列表。首先，在views目录下创建一个名为articles.ejs的视图文件，代码如下：

<!DOCTYPE html>
<html>
<head>
    <title><%= title %></title>
</head>
<body>
    <h1><%= title %></h1>
    <ul>
        <% for(var i=0; i<articles.length; i++) { %>
            <li><%= articles[i].title %> - <%= articles[i].author %></li>
        <% } %>
    </ul>
</body>
</html>

在index.js文件中添加以下路由：

app.get('/articles', function(req, res) {
    var articles = [
        {title: 'Article 1', author: 'John'},
        {title: 'Article 2', author: 'Mary'},
        {title: 'Article 3', author: 'Tom'}
    ];
    res.render('articles', {title: 'Articles', articles: articles});
});

重新启动应用程序，打开http://localhost:3000/articles，可以看到网页中显示了博客文章列表。

以上就是关于“Node.js + Express + EJS简单使用实例代码”的完整攻略。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：Nodejs+express+ejs简单使用实例代码 - Python技术站