【Express.js】页面渲染
页面渲染
常见的页面分为两种，一种是静态页面，比如用 Vue、React 等写好的静态页面，另一种是动态模板页面，如 Thymeleaf，JSP 等。
本节将简要介绍如何在 express 中渲染静态页面，以及适用于 express 的模板引擎 pug 。
配置开放资源
写前端的和搞部署的同学应该都清除，页面渲染的用到的 css, js, fonts, images 等都是静态资源，部署的时候需要在服务器端放行并配置一个正确的路径。
Express 内置了一个 static 中间件来托管静态资源：express.static(root, [options])
大致用法如下：
app.use(URL, express.static(PATH));
URL是外界访问静态资源的前缀路径，PATH则是资源资源目录的位置，可以是相对路径也可以是绝对路径。
渲染静态页面
为了方便演示，我用 evp-express-cli 快速创建了一个 express 后端，并使用 Svelte 快速构建了一个简单的页面，而且已经构建好了，构建产物就在svelte/public目录。
为了方便和模板页面区分，我决定把静态目录设为public，并让我们的静态页面展示在 /static 路由下
- 拷贝静态页面到我们准备开放的public下面
- 配置静态页面获取资源的路径
原本的css,js等等路径都是在/下的，我们调整到/static/下面去
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset='utf-8'>
<meta name='viewport' content='width=device-width,initial-scale=1'>
<title>Svelte app</title>
<link rel='icon' type='image/png' href='/static/favicon.png'>
<link rel='stylesheet' href='/static/global.css'>
<link rel='stylesheet' href='/static/build/bundle.css'>
<script defer src='/static/build/bundle.js'></script>
</head>
<body>
</body>
</html>
- 在 express 中设置静态资源路径，src\app.js
app.use('/static', express.static(path.join(__dirname, '../public')));
- 此时运行后端，访问 static 路由即可正常显示我们的静态 svelte 页面
其它的前端框架 Vue、React 等都是类似的，就不介绍了。
模板引擎 pug
可以用的模板引擎有很多，express 官方推荐了 pug，那我们就用 pug吧
还是在刚才那个项目，先安装 pug 依赖：
npm install pug
这次，我打算让 pug 页面渲染在 /views/ 路由下，在根目录创建一个 views 目录
- 在 app.js 中设置页面引擎为 pug
app.set('view engine', 'pug');
- 在
/views路由上渲染pug页面
app.get('/views', (req,res)=> {
res.render('index', { title: 'express-pug-demo', message: 'Welcome to express pug!'});
})
后面的是我们给 pug 模板传递的参数，既然是动态页面了，自然要体验一下数据交互
3. 在 views 目录下创建index.pug 和 css目录
4. 在 index.pug 中写页面，传进来的参数相当于全局变量，可以直接引用；我们还自定义了一个常量，放到 a 标签上，并引入了 css/index.css 作为页面样式
- const express_demo = 'https://jun-laner.gitee.io/express-demo'
doctype html
html
head
title= title
style
include css/index.css
body
div(class="container")
h1= message
a(href= express_demo, target= '_blank') Go to express-demo
- css目录下创建 index.css 并写入样式
.container {
text-align: center;
padding-bottom: 28px;
}
此时重启服务器，并访问 views 即可正常渲染 pug 页面
pug 用法简介
接下来，我们简要介绍一下 pug 的语法（可以直接拉取本节的源码并运行，pug的用法都写在了示范的pug页面中）
标签
在 html 中的标签在 pug 中不能加书名号了，并且会自闭和，无须手动闭合，如：
html:
<p>
hello, world!
</p>
pug:
p hello, world!
需要注意的是，html中因为标签是闭合的，所以标签上下、标签之间可以不严谨的对齐，但是 pug 标签必须对齐，排列在它应该排列的列范围内，缩进了才代表这个标签囊括在上一级标签下。
文档类型
Doctype，通常我们指定为 html 即可，其实就是 html 文件的头
doctype html
html
//...
定义变量
在 pug 中我们可以写 js 脚本，定义变量，然后嵌入到标签中去渲染
- const hello_msg="Welcome to express pug!
//...
span #{hello_msg}
把变量赋给标签内容，可以像上面那种模板嵌入，也可以直接赋予
span= hello_msg
代码块
如果你的 js 代码很长，不方便写在一行，比如定义一个数组
错误示范，这样子是错误的，这是单行脚本的写法
- const list = [
"a",
"b",
]
正确示范，空出一行即可：
-
const list = [
"a",
"b",
]
标签属性
通常我们需要给标签赋予一些属性，比如元素的类名、a 标签的地址、图片的地址等等
a(href= express_demo, target= "_blank") Go to express-demo'
多个属性用逗号分隔开，变量直接赋给属性，硬编码的属性则以字符串传入
列表渲染
通常我们会需要渲染列表，vue 中有 v-for，React用 map 迭代列表，而 pug 可以用 each in 直接迭代列表
- const apps = [{ name: "qq" },{ name: "wechat" },{ name: "ins" }]
each app in list
p #{app.name}
注意缩进，迭代的元素要缩进到 each 下级
If 分支
如果遇到需要条件渲染的地方，可以这样写
if hello_msg
span hello_msg exists!
Case 分支
如果有条件有多个值，可以用 case 来替换 if
- const day = 1;
case day
when 1
span Monday
default
span Unknown
引入外部文件
学过 JSP 的应该记得 JSP 里面就有 include，pug 的include 可以引入一个 pug，引入其它文件则会被当作文本
我们可以用 include 来导入外部CSS：
html
head
title= title
style
include css/index.css
如果你想用 link 的方式导入CSS，也可以，但 express 后端必须把对应目录设置为静态资源
html
head
title= title
link(rel='stylesheet', href='css/index.css') //- 如果要href引入，必须在express中设置为静态资源
设置 views 为资源目录：
app.use('/views', express.static(path.join(__dirname, '../views')));
样式
上面已经介绍从外部引入样式办法，这里再补充一下在 pug 中如何直接写样式：
style.
h1 {
color: green;
}
style标签后面的那个 . 不要忘记，剩下的样式就按常规的CSS写法即可
过滤器
过滤器可以用于渲染特定的片段，需要借助插件实现，当然也可以自定义
以渲染 markdown 为例，先安装 markdown 依赖
npm install jstransformer-markdown-it
然后划定一块区域，放置我们的markdown
div(class="md")
:markdown-it(linkify langPrefix='highlight-js')
# Markdown
use markdown in pug file
## example
this is example
# Thanks For Reading this Article
页面渲染就介绍到这里，重要的静态资源配置，模板页面通常其实用不到，如果需要，更详细的用法可以关注 pug 官方手册