初识EJS

什么是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

  
    
    
  
  
    
<%= name %>
    

        <% for(var i=0; i
        
<%= list[i] %>
        <% } %> 
    
  

<%=%>里面存放得是我们写在app.js里面的变量。其它的用法参考这里https://ejs.bootcss.com/。

app.js：

图片.png

重启node服务器并打开相应的网站：

图片.png

模板中的内容被成功地渲染了出来。

未完待续。。。