Ejs和pug

• 如何安装ejs与pug

  • Node.js中有一快速生成工具(脚手架)，能快速构建后端项目
  • 全局安装
    • $ npm i express-generator -g
    • express -e 项目名称
  • npx生成
    • $ npx express -e 项目名称 -e表示使用ejs模块

• ejs的项目目录结构

  • Bin
    • www 创建服务器，并监听服务器
  • public 静态资源目录
    • img
    • css
  • Routes 路由文件
  • View 模版文件
  • app.js 整个项目的入口文件

• ejs和pug，插入新页面的方法， 在app.js，引入新路由，再绑定路由中间件

• var express = require('express');
  var router = express.Router();
  
  router.get('所设路径', function(req, res, next) {
    res.render('要打开的页面', '发送给页面的数据');
  });
  
  module.exports = router;
  

• 在路由文档(routes)新建js文件,在(views)文件夹新建ejs/pug文件

• ejs和pug 书写样式的区别

  • ejs的3种常用标签：

    • <% code %>：运行 JavaScript 代码，不输出
    • <%= code %>`：显示转义后的 HTML内容
    • <%- code %>：显示原始 HTML 内容
    • 在要换行的时候换行的那行要加上%>,在内容书写结束后要加上<%

    • <% for(var i=0; i<supplies.length; i++) {%>
         <li><%= supplies[i] %></li>
      <% } %>
      

  • pug

    • pug不同于html，前者不需要标签的开和闭，如html的

      Demo

      ，在pug使用p Demo即可。
    • pug对空格敏感，有点类似pug使用空格作为缩进符
    • pug使用//-或//对代码进行注释，前者注释内容不出现在渲染后的html文件中，后者反之。
    • pug将标签属性存放于括号()内，多个属性之间以逗号或空格分隔。此外，对于标签的id和class，pug使用#紧跟标签id,使用.紧跟标签class，可以同时设置多个class。

    • script(type='text/javascript').
          var data = "Test"
          var enable = true
          if enable
              console.log(data)
          else
              console.log('nothing')
      对比：
      <script type='text/javascript'>
          var data = "Test"
          var enable = true
          if enable
              console.log(data)
          else
              console.log('nothing')
      </script>