Express中EJS模板-蒲公英云

Express中EJS模板

1.先看一个简单的例子

// index.js文件
var express = require('express');
var router = express.Router();
/* GET home page. */
router.get('/', function(req, res, next) {
  res.render('index', { title: 'Express' });
});
module.exports = router;
//index.ejs文件
<!DOCTYPE html>
<html>
  <head>
    <title><%= title %></title>
    <link rel='stylesheet' href='/stylesheets/style.css' />
  </head>
  <body>
    <h1><%= title %></h1>
    <p>Welcome to <%= title %></p>
  </body>
</html>

上面<%= title %>相当于插入一个变量，这个变量从js文件传入。

参考文章：
https://www.jianshu.com/p/40e0fc8ca371

2.我们再看一个复杂点示例

//data.json
[
    {
        "name" : "小明",
        "url" : "xiaoming"
    }
.....
]
//index.ejs(把包含逻辑的部分用<% %>包括起来)
<ul>
    <%for(var i=0;i<student.length;i++){%>
        <li> <%= student[i] %></li>
    <%}%>
</ul>
<select>
    <%for(var i = start; i <= end; i++){%>
            <option value="<%= i %>"><%= i %></option>
    <%}%>
</select>

更多Express概述可以参考：
https://www.cnblogs.com/rope/p/10726134.html#top

3.更多ejs模板语法

可以参考：
https://www.cnblogs.com/DCL1314/p/7732696.html

再看一个比较复杂的实例：

<tr>
  <%for(var i = 0;i<titles.length;i++){%>
   <tr>
      <td style="text-align:center;vertical-align:middle;"><%=titles[i].id%></td>
      <td style="text-align:center;vertical-align:middle;"><%=titles[i].username%></td>
      <td style="text-align:center;vertical-align:middle;"><%=titles[i].passwd%></td>
      <td style="text-align:center;vertical-align:middle;"><%=titles[i].email%></td>
      <td style="text-align:center;vertical-align:middle;"><%=titles[i].phonenum%></td>
      <td style="text-align:center;vertical-align:middle;"><%=titles[i].sex%></td>
      <td style="text-align: center;vertical-align: middle"><%=moment(titles[i].regDate).format('YYYY-MM-DD')%></td>
      <td style="text-align: center;vertical-align: middle"><%=titles[i].isRole%></td>
      <td style="text-align: center;vertical-align: middle">
          <a href="/root-content/root-state?id=<%=titles[i].id%>&role=<%=titles[i].isRole%>"><%= Number(titles[i].isRole)? "冻结":"解冻" %></a>
      </td>
      <td style="text-align:center;vertical-align:middle;">
        <!--路由请求，请求参数是？id= -->
        <a href="/root-content/del?id=<%=titles[i].id%>" >删除</a>
        <!--<a href="#"><%= typeof titles[i].isRole %></a>-->
        <!--<button onclick="del(<%=titles[i].id%>)">点击</button>-->
      </td>
   </tr>
  <%}%>
</tr>
//用户状态（解封/冻结）
router.get('/root-state',function (req,res,next) {
    var uid = req.query.id;
    var role = req.query.role;
    console.log(uid);
    console.log(role);
    console.log(typeof role);
    var connection = mysql.createConnection({      //创建mysql实例
      host:'127.0.0.1',
      port:'3306',
      user:'root',
      password:'',
      database:'test'
    });
  connection.connect();
  if(role === '1'){
      var sql = "update users set isRole = 0 where id = " + uid;
      connection.query(sql,function (err,result) {
          if(err){
              console.log('[SELECT ERROR]:',err.message);
          }
          //重定向，页面就刷新了，数据重新显示
          res.redirect('/root-content');
      })
      connection.end();
  }else {
      var sql = "update users set isRole = 1 where id = " + uid;
      connection.query(sql,function (err,result) {
          if(err){
              console.log('[SELECT ERROR]:',err.message);
          }
          //重定向，页面就刷新了，数据重新显示
          res.redirect('/root-content');
      })
      connection.end();
  }
})