【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 路由下

  1. 拷贝静态页面到我们准备开放的public下面
  2. 配置静态页面获取资源的路径
    原本的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>
  1. 在 express 中设置静态资源路径,src\app.js
app.use('/static', express.static(path.join(__dirname, '../public')));
  1. 此时运行后端,访问 static 路由即可正常显示我们的静态 svelte 页面

其它的前端框架 Vue、React 等都是类似的,就不介绍了。

模板引擎 pug

可以用的模板引擎有很多,express 官方推荐了 pug,那我们就用 pug吧

还是在刚才那个项目,先安装 pug 依赖:

npm install pug

这次,我打算让 pug 页面渲染在 /views/ 路由下,在根目录创建一个 views 目录

  1. 在 app.js 中设置页面引擎为 pug
app.set('view engine', 'pug');
  1. /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
  1. 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 官方手册

下一节-express-validator