zoukankan      html  css  js  c++  java
  • Node06

    1、jade - 破坏式、侵入式、强依赖

        (01)、引用jade  =>  const jade = require('jade');

        (02)、使用方法: jade.render('html');  

            返回结果:返回标签

                <html></html>

        (03)、 可以是标签名也可以是文件:jade.renderFile(“文件路径”,{pretty:true});//默认是不会行,pretty美化代码

              返回HTML代码。*注意 根据缩进,规定层级

        (04)、属性:标签后面加括号加属性 =>  script(src='a.js'), 多个属性用逗号分隔

              普通属性添加:div(title="aaa", id="div1"),但是不能像style那样用json,

              如果一定要用的话,在标签后面加&attribute,这说明用json的形式添加属性,div&attribute({title="aaa", id="div1"});

              *注意:个人不推荐

        (05)、内容:标签后空一格直接写入

        (06)、内嵌属性,可以当做普通属性处理 (只有属性是style的时候才可以)

                    方法一:style="200px;height:100px;"
                    方法二 json 形式:style = {'200px', height: '100px'})     
       (07)、原样输出:
    原样输出,可以用于写js代码            
                
    方法二:script后面加一个点,点代表原样输出:代表下一级原样输出,不会做任何识别
    html
    title
    head
    script(src="a.js")
    link(href='a.css', style='stylesheet')
    //点:代表下一级原样输出
    script.
    window.onload = function(){
    alert("aaa");
    }
    //输出结果
    //<script>
    //window.onload = function(){
    // alert("aaa");
    //}
    //</script>
    body
     
       (08)、include:引入外部文件,包含在一定的局部
    script
                include a.js //文件
            //输出结果
            //<script>
            //window.onload = function(){
            //    alert("aaa");
            //}
            //</script>
    
    
    //nodejs代码
    const jade = require('jade');//引入jade var str = jade.render('div'); var strFile = jade.renderFile('./views/1.jade',{pretty: true}); console.log(strFile);
    //jade 代码,*注意层级
    html
        title
        head
            script(src="a.js")
            link(href='a.css', style='stylesheet')
        body
            //内嵌属性,可以当做普通属性处理 (只有属性是style的时候才可以)
            //方法一:style="200px;height:100px;"
            //方法二 json 形式:style = {'200px', height: '100px'})
            div(style = "200px; height:100px;")
            div(style = {'200px', height: '100px'})
            //class也可以像普通属性添加,也可以数组形式添加
            div(class= "aaa left-wrap action")
            div(class= ['aaa', 'left-wrap', 'action'])
                ul
                    li
                //原样输出,可以用于写js代码
                //方法二:script后面加一个点,点代表原样输出:代表下一级原样输出,不会做任何识别
                |abc
    //子标签 li span
    <!-- 返回数据 -->
    <!--jade 代码,*注意层级-->
    <html>
      <title></title>
      <head>
        <script src="a.js"></script>
        <link href="a.css" style="stylesheet"/>
      </head>
      <body>
        <!--内嵌属性,可以当做普通属性处理 (只有属性是style的时候才可以)-->
        <!--方法一:style="200px;height:100px;"-->
        <!--方法二 json 形式:style = {'200px', height: '100px'})-->
        <div style="200px; height:100px;"></div>
        <div style="200px;height:100px"></div>
        <!--class也可以像普通属性添加,也可以数组形式添加-->
        <div class="aaa left-wrap action"></div>
        <div class="aaa left-wrap action">
          <ul>
            <li></li>
            <!--子标签-->
            <li>span</li>
          </ul>
        </div>
      </body>
    </html>

         (10)、jade定义变量  =>  #{a+b};

              例如:var strFile = jade.renderFile('./views/1.jade',{pretty: true, a='1', b='2'});

              方法二:

                 div=a 和 #{} 一样

        (11)、循环生成标签  =>    

    //nodejs 代码
    const jade = require('jade');
    //文件形式引入,arr是循环添加参数
    var strFile = jade.renderFile('./views/2.jade',{pretty: true, arr:['adas', 'sdasfsd', '23234', 'fasdas']});
    console.log(strFile);
    html
    head
        meta
        title 标题
    body
        div
            //循环加入标签,arr传入的数组
            -for(var i=0; i<arr.length; i++)
                div=arr[i]

    2、ejs - 温和、非侵入式、弱依赖

       (01)、引用jade  =>  const jade = require('ejs');、

       (02)、基本用法  =>   

    //nodejs 代码
    const ejs = require('ejs'); //文件形式引入 var strFile = jade.renderFile('./views/1.jade',{pretty: true}); //参数1:文件地址;2:给 ejs 传入的参数,对象形式拼接;3、返回数据(data) var strEjsFile = ejs.renderFile('./views/1.ejs', {name: 'bule'}, function(err, data){ if (err){ console.log('编译失败'); }else{ console.log(data); } });<!doctype html>
    <!doctype html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
    </head>
    <body>
        <!-- ejs 代码 -->
        <!--name传入的参数-->
        my name is: <%= name %>
    </body>
    </html>

         (03)、( = )等号是转译输出,( - )减号是不转译输出。

    <!-- ejs 代码 -->
    <% var str = "<div></div>"; %>
    <!--等号结果:&lt;div&gt;&lt;/div&gt;-->
    <!--减号结果:<div></div>-->
    <!--( = )等号是转译输出,( - )减号是不转译输出-->
    <%- str %>

        (04)、for循环使用方法  =>  

    //nodejs 代码
    const ejs = require('ejs');
    ejs.renderFile('./views/2.ejs', {json:{
        arr:[
            {user: 'bule', pass: '1234'},
            {user: 'zhangsan', pass: '1234'},
            {user: 'lisi', pass: '1234'}
        ]
    }}, function(err, data){
        console.log(data);
    });
    <!--ejs代码-->
    <!doctype html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
    </head>
    <body>
        <!--*注意:for循环开始结尾 <%%>不加等号-->
        <% for(var i=0; i<json.arr.length; i++){ %>
            <div>用户名:<%= json.arr[i].user %> 密码: <%= json.arr[i].pass %></div>
        <% } %>
    </body>
    //输出结果
    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <div>用户名:bule 密码: 1234</div> <div>用户名:zhangsan 密码: 1234</div> <div>用户名:lisi 密码: 1234</div> </body> </html>

        (04)、include 使用方法 => 

    //nodejs 代码
    const ejs = require('ejs');
    ejs.renderFile('./views/ejs-include.ejs', {type: 'admin'}, function(err, data){
        console.log(data);
    });
    <!--ejs代码-->
    <!doctype html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
    </head>
    <body>
        <% if (type == 'admin') {%>
            <% include ../css/admin.css %>
        <% }else{ %>
            <% include ../css/user.css %>
        <% } %>
    </body>
    </html>
  • 相关阅读:
    update数据从一个表到另外一个表中
    数据泵导出
    导入库
    看函数
    导库中的一个表
    一个表的字段存在或者不存在另一表里
    语句2
    语句
    word 内容被锁定,无法修改
    gridview自带分页
  • 原文地址:https://www.cnblogs.com/patriot/p/8011684.html
Copyright © 2011-2022 走看看