Node实践总结2——views

views

既然是写web应用，自然少不了网页了。所以我打算先写视图的部分，这一块相较其他部分也更简单一些。

---

网页模板

koa2内建支持ejs和jade(由于版权原因已经更名为pug)网页模板，给开发带来了一些便利。

ejs更接近与原生的html代码，只是将变量、循环等部分嵌入其中，习惯jsp的同学可能会更容易接受。

jade模板第一眼就给人一种非常geek的感觉，整个代码没有html那么多繁琐冗余的闭合标签和尖括号，取而代之的是整齐的缩进来体现各个DOM节点的层级关系（类似于Python），几乎没有一句废话，而且jade模板还有特别的mixins语法，可以函数式的调用html块代码，jade模板的each in语法也给些循环带来了很多方便关于jade语法，我之前也写过一篇博客。

下面这个是我工程中的一个例子

doctype htmlhtml  head    meta(charset='utf-8')    title= title    link(rel='stylesheet' href='http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css')    link(rel='stylesheet' href='/stylesheets/mycss.css')    script(src='http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js')    script(src='http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js')    script.      $(function (){        $(document).ready(function(){          $('.btn-search').click(search);          $('td:last-child').each(function() {            if($.trim($(this).text()) == 'true') { //根据特定字段决定该行的底色              $(this).parent().addClass('success');            } else {              $(this).parent().addClass('danger');            }          });         });      });      function search() {        let content = $('#searchBox').val();        if (content) {          $.post('/waf_log',{content:content},function(result){ //AJAX            let length = result.len;            if ($.isEmptyObject(result.logs)) { //如果没有查询到数据则返回提示              alert(`              No result matched the given condition!              Please retry!`);            } else { //如果查询到数据则动态生成表格                             let tbody = $('tbody');              tbody.html("");              for (var i = 0;i<length;i++) {                let tr = $('<tr></tr>');                tr.appendTo(tbody);                $('<td></td>').text(result.logs[i].id).appendTo(tr);                $('<td></td>').text(result.logs[i].time).appendTo(tr);                $('<td></td>').text(result.logs[i].username).appendTo(tr);                $('<td></td>').text(result.logs[i].function).appendTo(tr);                $('<td></td>').text(result.logs[i].url).appendTo(tr);                $('<td></td>').text(result.logs[i].param).appendTo(tr);                $('<td></td>').text(result.logs[i].result).appendTo(tr);                if ($.trim(result.logs[i].result) == 'true') {                  tr.addClass('success');                } else {                  tr.addClass('danger');                }              }            }          });        } else {          alert('There is no condition!');        }      }     body    div.container      div.row        ul.list-inline          li.col-lg-3.nonpadding            p.content-title 日志          li.col-lg-6.nonpadding          li.float-right.col-lg-3.nonpadding            div.input-group              input#searchBox.form-control(type='text',placeholder='输入关键字，支持模糊查询',required)              span.input-group-btn                input.btn.btn-warning.btn-search(type='submit',value='搜索')       div#table.row        table.table          thead            tr              th 序号（id）              th 时间（time）              th 用户名（username）              th 访问的功能（function）              th 访问的URL（url）              th 参数（param）              th 操作结果（result）          tbody            each log in logs              tr              each val in log                td #{val} 

---

不使用模板

在后来学习的过程中，才知道很多项目现在已经不使用这些模板了，取而代之的是vue或者Angular这类前端框架，但是我时间有限也不打算短期之内学的太杂，暂时还没有学习这部分的知识，先把node学明白了再去看也许会更好。