电子技术论坛_中国专业的电子工程师学习交流社区-中电网技术论坛

标题: 构建您的第一个 Node.js 网站（2） [打印本页]

作者: look_w 时间: 2018-11-2 16:48 标题: 构建您的第一个 Node.js 网站（2）

的 “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 变量并将它初始化：
1
var userbytwo = 0;
递增 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 的 行，将它粘贴到紧挨着现有行的下方。在新行中，将 userCount 更改为 userbytwo 来显示两个变量：
1
2
The user count in my nodejs application is: <%= userCount %>
The user by two count in my nodejs application is: <%= userbytwo %>
选择 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 目录中的内容。

欢迎光临电子技术论坛_中国专业的电子工程师学习交流社区-中电网技术论坛 (http://bbs.eccn.com/)