node.js+express（ejs）

最新推荐文章于 2025-06-05 13:54:15 发布

原创最新推荐文章于 2025-06-05 13:54:15 发布 · 331 阅读

0 ·

CC 4.0 BY-SA版权

EJS是模板引擎的一种，它使用起来十分简单，而且与 express 集成良好。所以使用ejs模板

在app.js中通过以下两行代码设置了模板文件的存储位置和使用的模板引擎：

[html] view plain copy

// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');

注意：我们通过 express -e blog 只是初始化了一个使用 ejs 模板引擎的工程而已，比如 node_modules 下添加了 ejs 模块，views 文件夹下有 index.ejs 。并不是说强制该工程只能使用 ejs 不能使用其他的模板引擎比如 jade，真正指定使用哪个模板引擎的是 app.set('view engine', 'ejs'); 。

在 routes/index.js 中通过调用 res.render() 渲染模版，并将其产生的页面直接返回给客户端。它接受两个参数，第一个是模板的名称，即 views 目录下的模板文件名，扩展名 .ejs 可选。第二个参数是传递给模板的数据对象，用于模板翻译。

打开 views/index.ejs ，内容如下：

index.ejs

[html] view plain copy

<!DOCTYPE html>
<html>
<head>
<title><%= title %></title>
<link rel='stylesheet' href='/stylesheets/style.css' />
</head>
<body>
<h1><%= title %></h1>
<p>Welcome to <%= title %></p>
</body>
</html>

当我们 res.render('index', { title: 'Express' }); 时，模板引擎会把 <%= title %> 替换成 Express，然后把替换后的页面显示给用户。

渲染后生成的页面代码为：

[html] view plain copy

<!DOCTYPE html>
<html>
<head>
<title>Express</title>
<link rel='stylesheet' href='/stylesheets/style.css' />
</head>
<body>
<h1>Express</h1>
<p>Welcome to Express</p>
</body>
</html>

注意：我们通过 app.use(express.static(path.join(__dirname, 'public'))) 设置了静态文件目录为 public 文件夹，所以上面代码中的 href='/stylesheets/style.css' 就相当于 href='public/stylesheets/style.css' 。

ejs 的标签系统非常简单，它只有以下三种标签：

● <% code %>： JavaScript 代码。
● <%= code %>：显示替换过 HTML 特殊字符的内容。
● <%- code %>：显示原始 HTML 内容。

注意：

<%= code %> 和 <%- code %> 的区别，当变量 code 为普通字符串时，两者没有区别。当 code 比如为 <h1>hello</h1> 这种字符串时， <%= code %> 会原样输出 <h1>hello</h1> ，而 <%- code %> 则会显示 H1 大的 hello 字符串。

运行项目:

到项目的文件夹下，输入如下指令：

npm start

访问 localhost:3000 查看项目

npm start 操作指令是 node ./bin/www

./bin/www 就是主程序

为了方便调试，安装supervisor

安装：npm install -g supervisor

执行：supervisor./bin/www（不用通过 npm start（node app.js）来开始项目，而是supervisor app.js来开始项目）