一、问题描述
使用NodeJS 的express框架构建的应用中,以首页为例,如果首页中想要展示首屏数据(即页面刚加载完成时,就需要展示一些数据), 那么在后台就需要使用到EJS模板引擎,此过程成为后台渲染。但是对于页面中的其它数据,考虑到用户可能不会往下拉动页面,所以就没有必要一开始就加载过来。此时就需要进行判断,通过发送AJAX来动态的请求相关数据,因此也会在前台用到EJS模板引擎。
那么问题来了: 当用户在浏览器中输入网站的域名时,就默认去请求网站首页。而此时后台进行EJS模板引擎渲染时,会把前台写好的EJS模板也一起渲染掉。导致页面到达浏览器时,原来前台准备的模板已经不复存在了。
二、问题解决
EJS模板引擎默认的模板定界符为 <% %>, 这就是问题的关键。因为实现前台准备的模板定位符为<% %>, 恰巧后台使用EJS渲染数据时,使用的定界符也是 <% %>, 因此就发生了冲突。
解决步骤:
1. 在后台页面中引入ejs模块
2. 在调用res.render()方法进行模板渲染之前,使用 ejs.delimiter = "$" 对模板定界符指定即可。