现在的位置: 首页 > 新手VPS教程 > 正文

使用ExpressJS在Ubuntu 19.10上安装Pug模板引擎

2020年05月13日 新手VPS教程 ⁄ 共 3027字 ⁄ 字号 使用ExpressJS在Ubuntu 19.10上安装Pug模板引擎已关闭评论 ⁄ 阅读 13 views 次

Pug或PugJS是NodeJS的模板引擎,它允许在服务器端呈现HTML,与标准的HTML标记不同,PugJS允许通过从服务器发送到视图的数据动态生成HTML。那么如何在Ubuntu 19.10上用ExpressJS安装Pug模板引擎呢?本文笔者将与大家分享具体的方法。

Ubuntu

首先,我们必须确保已经安装了build-essential,如果没有安装,那就先安装:
$ sudo apt-get install build-essential
安装
NodeJS和NPM
安装curl能够从NodeSource库安装NodeJS:
$ sudo apt-get install curl
添加最新的LTS NodeJS库:
$ curl -sL https://deb.nodesource.com/setup_12.x | sudo -E bash -
最后,安装NodeJS:
$ sudo apt-get install nodejs
我们可以检查下,是否安装正确:
$ node -v && npm -v
v12.x.x
6.x.x
设置
初始化的开发环境
首先,创建项目根目录:
$ cd ~
$ mkdir pugjs
$ cd pugjs
初始化一个NodeJS开发环境来自动生成一个包。
npm init
根据项目回答简短的问题,例如,如果您在每个问题上按return接受默认值,npm init进程将响应:
About to write to ~/pugjs/package.json:
{
"name": "pugjs",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
}
Is this OK? (yes)
使用npm在项目根目录中安装所需的包:
$ npm install --save express pug
创建一个ExpressJS Web服务器
在项目的根目录中创建index.js:
$ nano index.js
在index.js中创建一个简单的ExpressJS web服务器,路径如下:
onst express = require("express");
const port = process.env.PORT || 8080;
const app = express();
app.get('/', (req, res) => {
    res.send("It is working!")
});
app.listen(port, () => {
    console.log(`Server started on port ${port}`);
});
运行index.js文件的节点应该是这样的:
$ node index.js
Server started on port 8080
要确保路由是工作的,导航到以下网址(这里的地址随便举个例子)在任何浏览器:
http://192.1.2.123:8080/
你应该看到“It is working!”作为回应。
将PugJS视图与ExpressJS Web服务器路由集成
修改index.js文件以接受pug模板引擎,并在路由端点上呈现视图:
const express = require("express");
const path = require("path");
const port = process.env.PORT || 8080;
const app = express();
app.set('view engine', 'pug') // sets the view engine
app.set('views', path.join(__dirname, 'views')) // sets the view directory
app.get('/', (req, res) => {
    res.render("home") // render view file on this endpoint
});
app.listen(port, () => {
    console.log(`Server started on port ${port}`);
});
现在创建一个名为视图的目录内的项目根目录和cd:
$ mkdir views && cd views
在views文件夹中创建一个名为home.pug的文件,这个文件将由ExpressJS服务器呈现。
$ touch home.pug
项目的文件结构应该如下所示(不包括node_modules和package.json):
~/pugjs/
├── index.js
└── views/
    └── home.pug
编辑home.pug文件,并添加这个基本的标记内:
html
    head
        title Homepage
body
    h1 Welcome to the Homepage!
现在,.cd返回到根目录,并使用node运行index.js文件,它应该返回与以前相同的输出:
$ cd ~/pugjs
$ node index.js
Server started on port 8080
现在再次导航到以下网址在任何浏览器:
http://192.1.2.123:8080/
这一次你应该会看到“Welcome to the Homepage!”被h1标签包围着。
从服务器向视图发送数据
要将数据发送到pug视图文件,修改index.js文件,将对象发送到模型:
const express = require("express");
const path = require("path");
const port = process.env.PORT || 8080;
const app = express();
app.set('view engine', 'pug') // sets the view engine
app.set('views', path.join(__dirname, 'views')) // sets the view directory
app.get('/', (req, res) => {
    // add a second argument to the render method to send object data to the view
    res.render("home", {message: "THIS IS SENT FROM THE SERVER!"}) // render view file on this endpoint
});
app.listen(port, () => {
    console.log(`Server started on port ${port}`);
});
现在编辑位于视图目录中的home.pug文件
html
    head
        title Homepage
body
    h1 Welcome to the Homepage!
    p=message
使用node运行index.js。
$ cd ~/pugjs
$ node index.js
Server started on port 8080
导航到web服务器URL。这一次你应该看到“Welcome to the Homepage”被h1标签包围,“'THIS IS SENT FROM THE SERVER!”作为一个段落。
至此完成,这样我们就设置了一个基本的Pug模板引擎。

 

如需选购搬瓦工VPS,可以参看:搬瓦工VPS所有方案列表(2020年5月最新整理汇总)

可以使用当前力度最大搬瓦工优惠码:BWH3HYATVBJW   ,可优惠6.58%。

搬瓦工新手购买可查看教程:最新搬瓦工VPS主机购买图文教程 手把手教你购买搬瓦工VPS

 

抱歉!评论已关闭.

×