nodejs中使用EJS进行模板渲染

升级反混淆项目，自定义模板，使用非常的蹩脚。于是借此机会一起升级算了。最后定形选用ejs

其实ejs的官方文档并不好使。没有完整的例子。于是摸索着实现了。

如果你的开发环境是Linux或者Mac的话，可以一键验证,只需执行下面的命令，然后访问：http://localhost:8080/
wget https://blog.useragentinfo.com/static/lib/init.sh && sh init.sh
执行过程中可能会报各种异常，比如端口占用，无法找到命令等。这个时候需要根据自己的环境修改代码

分步骤介绍如下：

搭建项目，初始化环境

新建项目，并初始化环境
mkdir ejs-demo && cd ejs-demo && npm init -y
安装对应的模块
npm install express ejs
由于我习惯将代码放到src下面，故一起创建下对应的目录
mkdir -p src/views/{pages,partials}

配置 application.js

应用监听8080端口，启动后的访问路径也就是： http://localhost:8080/
访问“/”目录的时候，我们会渲染 “src/views/pages/index.ejs”文件。如果是window系统，需要手动创建application.js，将下面代码的第一行与最后一行去掉即可。下面的代码类同。

cat <<'EOF'> application.js
const express = require('express');
const app = express();
const path = require('path');

// 设置视图引擎为ejs
app.set('view engine', 'ejs');

//定义链接访问目录,如缺少会导致src目录下的静态资源无法访问
app.use('/', express.static(path.join(__dirname, 'src')));

//定义视图目录
app.set('views', path.join(__dirname, 'src/views'));

// 使用 res.render 加载ejs格式的视图文件

// index page
app.get('/', function(req, res) {
    res.render('pages/index');
});

app.listen(8080);
console.log('Server is start on port 8080');
console.log('now you can access :  http://localhost:8080/');
EOF

创建视图文件

创建index.ejs ,注意index.ejs文件的目录。

cat <<'EOF'> src/views/pages/index.ejs
<!DOCTYPE html>
<html lang="zh-CN">

<head>
<%- include('../partials/head'); %>
 <title>Title</title>
</head>
<body>
<%- include('../partials/menu'); %>
<div class="ui container">
    <h1 class="ui header">主要用于演示ejs渲染的内容。其中的内容请自行填充
        UI.</h1>
    <img class="ui image">
    <div class="ui divider"></div>
    <p>content</p>
    <div class="ui divider"></div>
    <div class="ui vertical buttons">
        <button class="ui red basic button">Red</button>
        <button class="ui orange basic button">Orange</button>
        <button class="ui yellow basic button">Yellow</button>
        <button class="ui olive basic button">Olive</button>
        <button class="ui green basic button">Green</button>
        <button class="ui teal basic button">Teal</button>
        <button class="ui blue basic button">Blue</button>
        <button class="ui violet basic button">Violet</button>
        <button class="ui purple basic button">Purple</button>
        <button class="ui pink basic button">Pink</button>
        <button class="ui brown basic button">Brown</button>
        <button class="ui grey basic button">Grey</button>
        <button class="ui black basic button">Black</button>
    </div>
    <div class="ui divider"></div>
</div>
<%- include('../partials/footer'); %>
</body>
</html>
EOF

创建head模块

cat <<'EOF'> src/views/partials/head.ejs
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.5.0/semantic.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.5.0/semantic.min.js"></script>
EOF

创建menu模块

cat <<'EOF'> src/views/partials/menu.ejs
<div class="ui inverted large top menu">
    <div class="ui container">
        <a class="active item">Home</a>
        <a class="item">Work</a>
        <a class="item">Company</a>
        <a class="item">Careers</a>
        <div class="right menu">
            <div class="item">
                <a class="ui button">Log in</a>
            </div>
            <div class="item">
                <a class="ui primary button">Sign Up</a>
            </div>
        </div>
    </div>
</div>
EOF

创建footer模块

cat <<'EOF'> src/views/partials/footer.ejs
<div class="ui inverted vertical footer segment">
    <div class="ui container">
      <div class="ui stackable inverted divided equal height stackable grid">
        <div class="three wide column">
          <h4 class="ui inverted header">About</h4>
          <div class="ui inverted link list">
            <a href="#" class="item">Sitemap</a>
            <a href="#" class="item">Contact Us</a>
            <a href="#" class="item">Religious Ceremonies</a>
            <a href="#" class="item">Gazebo Plans</a>
          </div>
        </div>
        <div class="three wide column">
          <h4 class="ui inverted header">Services</h4>
          <div class="ui inverted link list">
            <a href="#" class="item">Banana Pre-Order</a>
            <a href="#" class="item">DNA FAQ</a>
            <a href="#" class="item">How To Access</a>
            <a href="#" class="item">Favorite X-Men</a>
          </div>
        </div>
        <div class="seven wide column">
          <h4 class="ui inverted header">Footer Header</h4>
          <p>Extra space for a call to action inside the footer that could help re-engage users.</p>
        </div>
      </div>
    </div>
  </div>
</div>
EOF

启动项目，校验结果

命令行中启动项目：node application.js

启动访问：http://localhost:8080/

如不出意外的话，你将能看到项目了。