橙子个人博客
0%

koa服务器渲染

发表于 更新于 分类于 ， 留言

koa服务器渲染

服务器渲染 pug/ejs

  1. 安全性
  2. SEO

客户端渲染 Vue/React

  1. 节约流量
  2. 用户体验

服务端 – 模板引擎
pug(jade) 侵入式

1
npm i pug -D
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

const pug = require('pug');

pug.randerFile('./template/1.pug', {
	pretty: true
}, (err, data) => {
		if (err) {
			console.log('渲染失败');
		} else {
			console.log(data)
		}
})


// 建立1.pug(模板),内容如下
dctype
html
	head
		meta(charset="utf-8")
		meta(name="网站名",content="test")
		title test
		script.
			console.log(1212)
	body

ejs 非侵入式

1
npm i ejs -D
1
2
3
4
5
6
7
8
9
10
11
const ejs = require('ejs');

ejs.randerFile('./template/1.ejs', {
	name: "小明"
}, (err, data) => {
		if (err) {
			console.log('错了');
		} else {
			console.log(data)
		}
})
1
2
3
4
5
6
7
8
9
10
11
12
13
// 建立 2.ejs , <% 中间写js代码 %>
 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <%=name%>
</body>
</html>