Express中EJS模板

深碍√TFBOYSˉ_ 2021-12-19 01:45 295阅读 0赞

**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][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][https_www.cnblogs.com_rope_p_10726134.html_top]

**3.更多ejs模板语法**

可以参考：  
[https://www.cnblogs.com/DCL1314/p/7732696.html][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;">
            
            <a href="/root-content/del?id=<%=titles[i].id%>" >删除</a>
            
            
          </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();
      }
    
    })

[https_www.jianshu.com_p_40e0fc8ca371]: https://www.jianshu.com/p/40e0fc8ca371
[https_www.cnblogs.com_rope_p_10726134.html_top]: https://www.cnblogs.com/rope/p/10726134.html#top
[https_www.cnblogs.com_DCL1314_p_7732696.html]: https://www.cnblogs.com/DCL1314/p/7732696.html