什么是EJS？
图片.png
根据官网的介绍：EJS是一个运行在客户端的JavascriptMVC模板框架，简单理解为一种嵌入式的Javascript。
图片.png
其实写法就类似在HTML代码里面加了类似JSP的语句而已。
下面介绍一下怎么使用这个框架：
我这里跟官网的做法不同，官网是使用npm下载该模板然后进行配置使用，这里我使用的是HBuilder里面的nodeclipse插件安装。
打开HBuilder，找到工具选项，然后点击插件安装，选择nodeclipse：
图片.png
安装好之后点击新建，然后选择项目，找到Node.js Express Project来创建项目，记得选择模板为ejs：
图片.png
项目的结构目录如下：非常典型的MVC框架文件目录结构，public目录下存放样式表或其他静态文件；routes下面则是存放我们的路由表，views下的.ejs文件其实就是我们的视图文件，其实就是html文件。
图片.png
怎么添加路由呢？是不是在routes和views添加，然后再在app.js中设置呢？
一开始我是这么做的，因为之前看别人的文章就是这么做的，但是尝试过了才发现不行。
图片.png
就是这两行代码让我被忽悠得不轻，因为我老是想着要注册路由，谁知道不需要。添加一个简单路由其实只用这样做就行了：
app.get('/help', function(req, res) {
res.send('Help Me !');
});
图片.png
因为是刚了解EJS，路由这方面只是我的个人理解，如有错误望指出，鄙人定将改之。
下面我们开始使用模板：
copy一下index.ejs，把里面得内容改一改：
show.ejs
<!DOCTYPE html>
<html>
<head>
<title><%= title %></title>
<link rel='stylesheet' href='/stylesheets/style.css' />
</head>
<body>
<h1><%= name %></h1>
<ul>
<% for(var i=0; i<list.length; i++) { %>
<li><%= list[i] %></li>
<% } %>
</ul>
</body>
</html>
<%=%>里面存放得是我们写在app.js里面的变量。其它的用法参考这里https://ejs.bootcss.com/。
app.js：
图片.png
重启node服务器并打开相应的网站：
图片.png
模板中的内容被成功地渲染了出来。
未完待续。。。
网友评论