Express搭配EJS渲染页面出现多余>符号的问题解决

多余符号的直接原因 #

你在页面渲染源码中看到的>是HTML实体编码，对应实际页面上显示的独立>字符，这部分内容完全来自你EJS模板循环段的手动硬编码：

<% posts.forEach(function(post){ %>
<h1>><%=post.PostTitle%></h1> 
<p>><%=post.Content%></p> 
<% }); %>

你在<h1>、<p>标签的文本起始位置，直接写入了独立的>字符，模板渲染时这部分内容会被原样输出到页面，这就是多余符号的根本来源。

和讲师演示效果不一致的常见原因 #

你提到和讲师执行完全相同操作却有差异，一般是两类操作误差导致：

• 对照课程敲代码时，把课件、视频里用来做区块引用排版的行首>标记，误当成代码本身的组成部分敲进了模板，讲师本地的实际项目代码中并没有写入这个字符
• 本地编辑器开启了自动补全、代码片段插入辅助功能，在输入<h1>标签闭合时，误将标签尖括号的闭合>插到了标签内容区域内部

修正操作 #

1. 删除两个标签内容开头多余的>字符，调整为标准模板写法：

   <h1><%= post.PostTitle %></h1> 
   <p><%= post.Content %></p> 
   

2. 顺带修正两个会导致后续报错的潜在代码问题：
   • 根路由通过res.render传入模板的homeStartingContent变量，在你提供的后端代码中没有做定义，访问根路由时会直接抛出ReferenceError，需要补上该常量的定义
   • 你在/compose的POST路由内单独配置了一次bodyParser.urlencoded中间件，又在全局路由层配置了一次完全相同的中间件，属于重复注册，直接删除POST路由里的那行中间件配置即可，全局注册一次就可以正常解析表单提交的数据

内容的提问来源于stack exchange，提问作者Hassan Shah