【Express.js】页面渲染

最新推荐文章于 2024-05-06 18:26:11 发布

Evanpatchouli℃

最新推荐文章于 2024-05-06 18:26:11 发布

阅读量1k

点赞数

分类专栏： Evanpatchouli的知识星球 Express 文章标签： express javascript 后端教程

本文链接：https://blog.csdn.net/m0_51810668/article/details/132194301

版权

Evanpatchouli的知识星球同时被 2 个专栏收录

109 篇文章 3 订阅

订阅专栏

Express

34 篇文章 0 订阅

订阅专栏

页面渲染

常见的页面分为两种，一种是静态页面，比如用 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页面中）

文档类型

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 官方手册