Express项目中使用Vue.js整合ejs模板引擎_express模板引擎中使用vue

作者：很楠不爱3 | 2024-02-20 16:20:36

踩

express模板引擎中使用vue

1、前言

在使用Node.js的Web框架Express时，经常会用到ejs作为模板引擎，使用Express+ejs主要是为了实现服务端渲染，利于SEO优化。所以，本篇博客仅仅是为了学习Express而写的，在真实的项目开发中不推荐使用这种方式。

2、问题描述

在使用Express+ejs开发Web项目时，会遇到一个问题，当服务端渲染一个数组或结构比较复杂的对象时，在前端获取不到值，具体问题如下：

routes/index.js文件代码：

var express = require('express');
var router = express.Router();

/* GET home page. */
router.get('/', function(req, res, next) {
	let stu = [
		{
			name: '张三',
			age: 10
		},
		{
			name: '李四',
			age: 11
		}
	]
	res.render('index', { list: stu });
});

module.exports = router;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

views/index.ejs文件代码：

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
</head>
<body>
	
	<script>
		var list = '<%=list %>'
		console.log(list)
	</script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13

在浏览器中输出的结果如下：
在这里插入图片描述
在浏览器中无法获取到具体的数组值，即使使用了JSON.stringify()和JSON.parse()进行转义也是不行的，这种情况下就没有办法使用Vue.js的v-for指令进行遍历。

3、解决方法

在服务端需要使用 encodeURIComponent(JSON.stringify()) 的方法进行转义，将对象转为字符串，然后在前端使用 JSON.parse(decodeURIComponent()) 的方式进行解析。

服务端代码如下：

var express = require('express');
var router = express.Router();

/* GET home page. */
router.get('/', function(req, res, next) {
	let stu = [
		{
			name: '张三',
			age: 10
		},
		{
			name: '李四',
			age: 11
		}
	]
	
	let list = encodeURIComponent(JSON.stringify(stu))
	res.render('index', { list });
});
module.exports = router;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

前端代码如下：

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
</head>
<body>
	<script>
		var list = JSON.parse(decodeURIComponent('<%=list %>'))
		console.log(list)
	</script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12

在浏览器中运行的效果：
在这里插入图片描述
这次可以获取到数组中的数据了，然后再配合Vue.js在页面中进行遍历。

前端完整代码如下：

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
</head>
<body>
	<div id="app">
		<ul>
			<li v-for="stu in list">姓名：{{stu.name}}，年龄：{{stu.age}}</li>
		</ul>
	</div>
	<script src="/js/vue.js"></script>
	<script>
		new Vue({
			el: '#app',
			data: {
				list: JSON.parse(decodeURIComponent('<%=list %>'))
			}
		})
	</script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

在浏览器中运行的效果如下：
在这里插入图片描述

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/很楠不爱3/article/detail/120311