的 “Hello World” 增强版应用程序是一个不错的起点。我们使用了 IBM DevOps Services 和 IBM Bluemix 建立了一个 Node.js 服务器，而且编写了一些简单的服务器端 JavaScript 来统计发送到您服务器上的请求。在第 2 部分中，我们将向您的网站添加格式化的 HTML 页面，然后传递来自服务器的数据，以便在 HTML 主页上显示这些数据。
要向 Node.js 添加一个 Web 前端，最常见的技术是使用 Web 应用程序框架。使用 Express，可以选择多种方式来格式化网页，包括 Jade、Handlebars 和 EJS。为了方便起见，我选择了 ，它使用了简单的旧式 HTML。
“app.js 文件包含所有 Express 设置。”
这部分从一个新的 DevOps Services 项目入手，所以在继续我们的介绍之前，没有必要完成 中的练习。
我找到了一个不错的 ，并最大限度地对它进行了精减，然后扩展它来传递数据和提供静态网页。您将在我的版本上开始工作，学习如何在 HTML 页面中显示来自 Node.js 应用程序的数据，以及如何提供静态 HTML 内容。在 ，我们将使用 Redis 数据库来持久保存网站的数据。
应用程序的已修改的流现在类似于：
 对您的要求 第 1 步：创建并部署 HTML 应用程序的副本- 从 Web 浏览器登录到 。
- 在一个独立的浏览器选项卡中，登录到 。
- 单击本文上面的 获取代码（Get the code）按钮。
- 在 DevOps Services 中，单击 EDIT CODE 按钮，然后单击菜单上的 FORK 按钮来创建您自己的代码副本供您使用，并使用您选择的项目名称保存它。现在您已经拥有了 Express 的目录结构和文件设置。app.js 文件包含所有 Express 设置：
1
2
3
4
5
6
| var app = express();
app.set('port', process.env.PORT || 3000);
app.set('view engine', 'ejs');
app.use(morgan('dev'));
app.use(express.static(path.join(__dirname, 'public')));
|
package.json 文件也已更新，以便添加 Express 和 EJS 的依赖关系：
1
2
3
4
5
6
| "dependencies": {
"express": "*",
"ejs": "*",
"morgan": "*"
}
}
|
- 使用对 中的应用程序使用的相同流程来手动部署该应用程序。
- 单击根文件夹页面的 Manual Deployment Information 区域中的 NodeJS_Simple_2 链接，以便在一个新浏览器选项卡中打开格式化的 HTML 页面。
- 刷新该页面并在每次刷新后观看计数器增量。
第 2 步：更改 HTML 索引页面并重新部署在 app.js 中，Express 设置指定了 app.set('views', path.join(__dirname, 'views'));。此语句告诉应用程序在视图目录中查找要呈现的初始页面。
现在将对 HTML 索引页面进行一些细微的改动：
- 返回到 DevOps Services IDE，打开 views 文件夹并单击 index.ejs 来编辑该 HTML。
- 编辑 <title> 和 <h1> 标记中的文本，以便将 Ruth 替换为您自己的名称。
- 选择 manifest.yml，确保 DevOps Services 会在您部署时找到清单文件。
- 部署您的应用程序，并单击手动部署信息中的链接来打开该应用程序。验证更改是否已显示。
第 3 步：将服务器端内容传递给 HTML 页面是时候了解一下 Express EJS 的魔力了。要将来自 Node.js 应用程序的数据显示在 HTML 页面上，必须使用此语法将该数据传递给该网页：
1
| res.render('index', {userCount: userCount})
|
index 是显示的初始 HTML 页面的名称。在 {} 内放置的是要传入的变量的名称，以及它们的值。
对应用程序执行以下更改：
- 返回到 DevOps Services IDE，选择 app.js。添加一个新的 userbytwo 变量并将它初始化：
- 递增 userbytwo：
1
| userbytwo = userbytwo + 2;
|
- 更新 render 命令，添加 userbytwo 作为一个变量，以便传递给 HTML 页面进行显示：
1
| res.render('index', {userCount: userCount, userbytwo: userbytwo});
|
您的 app.get 代码块现在应该类似于： 1
2
3
4
5
6
7
8
9
10
| var userCount = 0;
var userbytwo = 0; /* added var definition for userbytwo here */
app.get('/', function(req, res){
userCount = userCount + 1;
/* add statement to increment userbytwo by two here */
userbytwo = userbytwo + 2;
res.render('index', {userCount: userCount, userbytwo: userbytwo});
/* updated this line */
});
|
第 4 步：在 HTML 页面上显示变量当然，HTML 页面还需要某种特殊语法来检索和显示传递的变量：
- 返回到 views 文件夹并选择 index.ejs。
- 复制显示 userCount 的 <p> 行，将它粘贴到紧挨着现有行的下方。在新行中，将 userCount 更改为 userbytwo 来显示两个变量：
1
2
| <p>The user count in my nodejs application is: <%= userCount %></p>
<p>The user by two count in my nodejs application is: <%= userbytwo %></p>
|
- 选择 manifest.yml 并部署您的应用程序。使用手动部署信息链接打开该应用程序，在 HTML 页面中查看您的更改。
第 5 步：添加链接的 HTML 页面先将一些链接添加到网站的索引页面中。链接到其他页面并不难，但必须确保目录结构经过了正确设置，以便找到您的页面。
在 app.js 中的 Express 设置中，app.use(express.static(path.join(__dirname, 'public'))); 语句告诉应用程序在 public 目录中查找 HTML 内容。首先，public 文件夹包含两个 HTML 页面，还包含 images 和 stylesheets 子目录。
- 打开 views 文件夹，选择 indexwithlinks.ejs，复制 9-15 行。
- 打开 index.ejs，将复制的内容粘贴到第 12 行之后，然后保存。您可以看到，复制的行被链接到 sports.html 和 aboutme.html。
- 打开 public 目录并找到 aboutme.html 和 sports.html。
- 对 aboutme.html 和 sports.html 执行任何您想要做的更改。您甚至可以将自己的图片上传到 images 目录并连接到它。
- 部署您的应用程序。在该应用程序中，访问以下链接来验证它们是否连接到 public 目录中的内容。
|
