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

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;

views/index.ejs文件代码:


<html lang="zh">
<head>
	<meta charset="UTF-8">
head>
<body>
	
	<script>
		var list = '<%=list %>'
		console.log(list)
	script>
body>
html>

在浏览器中输出的结果如下:
Express项目中使用Vue.js整合ejs模板引擎_第1张图片
在浏览器中无法获取到具体的数组值,即使使用了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;

前端代码如下:


<html lang="zh">
<head>
	<meta charset="UTF-8">
head>
<body>
	<script>
		var list = JSON.parse(decodeURIComponent('<%=list %>'))
		console.log(list)
	script>
body>
html>

在浏览器中运行的效果:
Express项目中使用Vue.js整合ejs模板引擎_第2张图片
这次可以获取到数组中的数据了,然后再配合Vue.js在页面中进行遍历。

前端完整代码如下:


<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>

在浏览器中运行的效果如下:
Express项目中使用Vue.js整合ejs模板引擎_第3张图片

你可能感兴趣的:(前端技术分享,Web全栈案例)