- EJS是高效的嵌入式 JavaScript 模板引擎
- EJS 是一套简单的模板语言，帮你利用普通的 JavaScript 代码生成 HTML 页面。
- EJS 没有如何组织内容的教条，也没有再造一套迭代和控制流语法，有的只是普通的 JavaScript 代码而已。
ejs语法总结
- ejs中书写js变量：
<%= 变量 %> - ejs中书写js表达式：
<% js表达式 %>，每一行js表达式都要加，html代码则不用- 注意：如果js表达式中间插入了html代码，那么js表达式需要分开包裹，如下面“ejs循环”中的例子。如果js表达式只是单纯换行则只需一个尖括号包裹，如下“ejs引用组件”中的例子。
- 区分ejs中书写js变量与表达式：需要输出的变量才有等号！
- ejs中引用ejs组件：
<%- include('相对路径/组件ejs文件名',{变量1，变量2，...，变量x}) %>- 组件中需要的变量通过参数2进行传递
- ejs文件中可直接定义组件，文件名即为组件名
- 注意：ejs模板最后编译为html代码，所以ejs中也可正常使用script标签来书写js代码
为何路由可对应不同ejs文件
- koa2框架中已帮我们在app.js中注册了ejs：
- 所以路由中只需要写文件名并将变量传过去ejs即可：
index.ejs接受到变量后即可显示：
ejs变量
- ejs中的变量语法：
<%= 变量 %>
例子
- 传递变量的路由、接收并显示变量的ejs文件、显示效果：例子
错误处理
- 当我们在ejs中使用了并未从路由中传递过来的变量时，
例子
- ejs文件和显示页面：
- 原因：app.js中的onerror()处理了错误，显示了一个前端页面：
此时可在控制台看到报错原因 - 解决方法：变量前加
locals.:
这样即使没有传递该变量就使用了也不会报错，它相当于传了一个空，即<p> </p> - 总结：在ejs模板中，不确定是否会传值过来的变量使用
locals.变量,防止因未传变量而报错
ejs判断
- ejs中书写js表达式时语法：
<% js表达式 %>，每一行js表达式都要加，html代码则不用- 注意：如果js表达式中间插入了html代码，那么js表达式需要分开包裹，如下面“ejs循环”中的例子。如果js表达式只是单纯换行则只需一个尖括号包裹，如下“ejs引用组件”中的例子。
- 区分ejs中书写js变量与表达式：需要输出的变量才有等号！
- 注意：ejs模板最后编译为html代码，所以ejs中也可正常使用script标签来书写js代码
例子
- routes-index.js中传入变量isMe:
- views-index.ejs中做判断:
- 测试：
ejs引用组件
- ejs中引用组件的语法：
<%- include('相对路径/组件ejs文件名',{变量1，变量2，...，变量x}) %>- 组件中需要的变量通过参数2进行传递
- ejs文件中可直接定义组件，文件名即为组件名
例子
- views文件夹下新建widgets文件夹，用于存放组件
- widgets文件夹下新建user-info.ejs，将ejs判断例子中添加的逻辑挪过去创造组件：
- 在views-index.ejs中引用组件：
- 测试：
ejs循环
- 和ejs判断类似
例子
- routes-index.js中传入数组blogList：
- widgets文件夹下新建blog-list.ejs组件，循环渲染blogList：
- 注意：html属性值需要引号
- 在views-index.ejs中引用组件：
- 测试：
提交项目到coding
- 提交前最好使用**
git diff**看看自己提交的是否包含什么不需要提交的 - 添加文件到本地仓库：
git add . - 提交文件到本地仓库：
git commit -m "feat:演示ejs" - 将本地文件推送到coding服务器:
git push origin master（master也可以是其他分支）
补充：SSR与SP
- 所有的服务端渲染引擎（比如ejs、vue、react），本质上都是SSR（server side render）
- 通过服务端的能力将页面渲染出来的就是SSR
- 比如，在上面“ejs循环”的例子中，blog-list.ejs组件中可以通过判断blogList的长度然后将其每一条都显示出来。服务端通过模板输入浏览器的是一个静态的结果，这样的形式就是SSR：
- 比如，在上面“ejs循环”的例子中，blog-list.ejs组件中可以通过判断blogList的长度然后将其每一条都显示出来。服务端通过模板输入浏览器的是一个静态的结果，这样的形式就是SSR：
- 与SSR相对的就是SP(前端渲染),比如AJAX。SP是不会显示一堆html代码的，只会有一个JS代码显示在浏览器上。通过JS的能力将页面渲染出来的就是SP