Nodejs-模板引擎-页面渲染-SSR（服务端渲染）

2021/5/21 22:54:44

编程Tag： nodejs SSR 渲染 html 模板 template art block

本文主要是介绍Nodejs-模板引擎-页面渲染-SSR（服务端渲染），对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

模板引擎

一、介绍

在一个web应用程序中，如果只是使用服务器端代码来编写客户端html代码，前后端不分离，那么会造成很大的工作量，而且写出来的代码会比较难以阅读和维护。如果只是使用客户端的静态的HTML文件，那么后端的逻辑也会比较难以融入到客户端的HTML代码中。为了便于维护，且使后端逻辑能够比较好的融入前端的HTML代码中，很多第三方开发者就开发出了各种Nodejs模板引擎，其中比较常用的就是Jade/Pug/Ejs和art-template 等模板引擎。

总结一下：运用模板引擎，就是为了方便解决在服务器端渲染和html的维护工作同时也可以让html和数据分离

二、页面渲染模式

2.1、SSR（服务器端渲染）

ssr (Server Side Rendering) ：传统的渲染方式，由服务端把渲染的完整的页面响应给客户端。这样减少了一次客户端到服务端的一次http请求，加快相应速度，一般用于首屏的性能优化。

优缺点：
1、利用SEO（搜索引擎）
2、页面渲染时间短
3、服务器压力过大

2.2、CSR（客户端渲染）

CSR(Client Side Rendering)：是一种目前流行的渲染方式，页面由js渲染，js运行于浏览器端，所以称客户端渲染。

优缺点：
1、前后端并行开发，开发速度提升
2、首屏渲染时间比较长（首屏加载速度慢）
3、不利于SEO

三、art-template

art-template 是一个简约、超快的模板引擎。

特性
拥有接近 JavaScript 渲染极限的的性能
调试友好：语法、运行时错误日志精确到模板所在行；支持在模板文件上打断点（Webpack Loader）
支持 Express、Koa、Webpack
支持模板继承与子模板
浏览器版本仅 6KB 大小

3.1、安装与配置

安装
npm i -S art-template express-art-template

配置

// 指定art-template模板，并指定模块后缀为.html
app.engine('html', require('express-art-template'));
// 指定模板视图路径
app.set('views', path.join(__dirname, 'views'));

在这里插入图片描述

3.2、语法

art-template 支持标准语法与原始语法。标准语法可以让模板易读写，而原始语法拥有强大的逻辑表达能力。标准语法支持基本模板语法以及基本 JavaScript 表达式；原始语法支持任意 JavaScript 语句，这和 Ejs一样。

//控制层返回数据
app.get(uri,(req,res)=>{
	res.render(模板,{
		username: '张三'
	})
})

//输出
//标准语法
{{ username }} // 有转义输出   未转义输出  {{@ username }}
//原始(Ejs)语法
<%= username %> // 有转义输出  未转义输出  <%- username %>

//条件判断
{{if 条件}} … {{else if 条件}} … {{/if}}
<%if (条件){%> … <%}else if (条件){%> … <%}%>

//循环
// 支持 数组和对象的迭代  默认元素变量为$value 下标为$index  可以自定义 {{each target val key}}
{{each target}}
    {{$index}} {{$value}}
{{/each}}
<% for(var i = 0; i < target.length; i++){ %>
    <%= i %> <%= target[i] %>
<% } %>

//子模板 --- 模板包含
{{include './header.art'}}
<% include('./header.art') %>
//注：在子模板中不要有html、head和body标签

//模板继承   模板布局  布局文件
//父模板  layout.html
<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>{{block 'title'}}My Site{{/block}}</title>
</head>
<body>
	<!-- block占位符 content此占位的名称 -->
    {{block 'content'}}{{/block}}
</body>
</html>

//继承父模板 index.html
<!--extend 继承 -->
{{extend './layout.html'}}
{{block 'title'}}首页{{/block}}
{{block 'content'}}
	<p>This is just an awesome page.</p>
{{/block}}
//注：渲染 index.html后，将自动应用布局骨架

mysql

nodejs操作mysql，需要安装第3方模块

安装
npm i -S mysql

这篇关于Nodejs-模板引擎-页面渲染-SSR（服务端渲染）的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！