持续创作,加速成长!这是我参与「掘金日新计划 · 10 月更文挑战」的第10天,点击查看活动详情
开发您的第一个Node.js Web应用程序
安装Node.js
首先,确保您已在本地机器或云服务器上安装Node.js。如果您尚未安装,请访问Node.js网站进行安装。
使用Node.js,您可以使用特殊形式的JavaScript编写服务器端代码,以便您可以使用已经熟悉的语言。
测试安装
要测试安装是否正常工作,请打开终端窗口,并键入node -v
和npm -v
。如果生成的消息以v开头,后跟一些数字(表示版本),则安装已成功。现在,您已经准备好创建您的第一台服务器了。
创建服务器
创建静态网站后,创建Node.js应用程序的第一步是创建一个Express Web服务器。
首先,将网站的所有静态文件(HTML、CSS、JS、图像等)移动到一个名为public的文件夹中,并在网站文件夹的根目录中创建一个名为server.js的文件。在server.js文件类型中:
// Load Node modules
var express = require('express');
// Initialise Express
var app = express();
// Render static files
app.use(express.static('public'));
// Port website will run on
app.listen(8080);
然后在终端中,键入:npm init
。按回车键接受以下所有选项的默认参数,但请确保入口点是server.js。
最后,键入:npm start
,然后在浏览器中转到VPS主机的IP地址,或localhost:8080/index.html(或其中一个网页的名称)。您刚刚创建的Express服务器现在应该正在为您的网站的静态文件提供服务。
模板基础知识
安装EJS
使用EJS的第一步是安装它。一个简单的npm install ejs --save
就可以了。--save
参数将模块保存到package.json
文件中。
这使得任何克隆git repo(或以其他方式下载网站文件)的人都可以使用npm install
命令安装项目所需的所有节点模块(称为依赖项)。然后,他们不必为他们需要的多少模块键入npm install (module name)
)。
将静态页面转换为EJS文件
接下来,您需要将静态HTML文件转换为动态EJS文件,并按照EJS预期的方式设置文件夹结构。
在网站的根目录中,创建一个名为视图的文件夹。在该文件夹中创建两个子文件夹,称为页面和部分。将所有HTML文件移动到页面子文件夹中,并将.html文件扩展名重命名为.ejs。
您的文件夹结构应该与下图相似。
EJS部分
在创建静态站点时,您经常在每个页面上重复代码,例如头部(元标签所在的位置)、页眉和页脚部分。
如果需要更改,在每个页面上(特别是在较大的网站上)更改它们很不方便。但是,如果您使用EJS部分,那么您就不必这样做。编辑一个模板(部分)文件将更新该文件包含的每个页面上的代码。
我们将以网站的典型部分作为模板,标题为例。在parts文件夹中创建一个名为header.ejs的新文件。将其中一个EJS页面上<header></header>
标签之间的所有代码复制并粘贴到其中。
最后,在所有带有标头的页面上,删除<header></header>
标签之间的代码(您复制到header.ejs部分文件的代码相同),并将其替换为<% include('../partials/header') %>
。现在,您已经创建了第一个EJS部分。对任何其他重复的代码(如头部和页脚部分)重复该过程。
小提示: 如果您发现很难区分页面和部分,因为它们具有相同的.ejs文件扩展名,那么在部分名称(so _ header.ejs)前面放置下划线_可能会有所帮助。这是一些开发人员使用的命名约定,可能会有所帮助。