极简Node教程-七天从小白变大神（三：你所不知道的模板表单）_html/css_WEB-ITnose

模板引擎

在了解模板引擎之前首先我们看看普通的动态插入生成HTML代码：

代码如下：

         //  movie 对象 是一个json对象我们动态插入文档中  var movie = [  {       "name" : "The Mirror",       "year" :  2012   },   {        "name": "last night",        "year":   2016   } ]; $.each(movie,function (data) { if(data.length === 0) return; var partial =  "<dt>"+data.name+"</dt>" +"<dd>"+data.year+"</dd>" ;  document.body.appendChild(partial); })

事实上partial的拼接字符串还不够长，或者我们实际做一个动态生成网页你就会明白痛苦所在。

快速了解模板引擎

模板：

<div class="entry"> <h1>{{title}}</h1> <div class="body">   {{{body}}} </div></div>

给定一个上下文：

{ title: "All about <p> Tags", body: "<p>This is a post about tags</p>"}

注意{{{body}}}是三个括号，与两括号的区别在于：两括号会对上下文的内容进行HTML转义，就是把p标签作为文本显示给用户，而不是把它作为一个HTML标签。

选择模板引擎

事实上有大概十多种模板可供选择：

嗯，我们不选择Express默认的Jade，因为它的缩进及抽象会让新手感到非常Angry的，相当于重新学了一遍html难道不是吗？？值得一提的是，Jade和Express是同一个人发明的。

更为简单的Handlebars

我们来看看Handlebars引擎是怎样使用上下文结合模板渲染HTML的：

 //  res.render('admin/home',{         name:'Buttercup'})/************* admin /  home.hbs **************/   <h1>the home </h1> <p>Welcome , {{name}}</p> /*************** entry   HTML ********************/   <h1> the home </h1>  <p>Welcome , Buttercup</p>

模板的复用与包含

如果我们有一个头部文件包含很多公共的静态资源引用，我们叫它模板A，那么我们如果每一个页面都重写一个模板A确实是太烦了，因此我们这样在任意模板引用它:

        // 引用以>开头        {{>A.hbs}}

小提示: 如果你的文件包含"-"这个符号，是这样引用的：

   // xx-header.hbs     {{>xx_header.hbs}}

还有更为详尽的hbs语法详见

表单处理

一个HTTP表单请求一般包括四部分的内容：HTTP方法（method），用来标识对资源的操作，对应上述的POST。路径（path），用来标识资源的位置，对应上述的/some/thing；URL参数（query），对应上述的guest=true；请求体（body），即请求附带的数据，对应上述的title=test&subtitle=somefinetitle。

请求体（body）往往是表单的主体。可能包括几个键值对，或者json数据，甚至可能是二进制文件。对于不同的内容我们需要请求体编码，否则服务器将很难知道我们提交的到底是什么东西。HTTP协议使用MIME框架来进行请求体编码，并在请求头的Content-Type字段指定编码类型。表单中常用的又如下3种内容编码（MIME类型）：urlencoded：就像GET请求中的URL那样进行编码，例如title=test&subtitle=somefinetitle；multipart：使用定界符分隔的表单，一般用来包含二进制的文件；json：顾名思义，这时可以提交一个json对象到服务器。我们已经了解到了HTTP协议可以用来传输HTML文件给客户端。那么服务器如何接受用户的操作呢？这便需要HTTP POST方法，和Web表单的帮助。在继续开发之前，先来了解一下HTTP表单的基础知识。

HTTP 协议提供了6中方法，该方法名将作为HTTP请求头部字段，用来标识操作的类型：

GET：获取URI制定的信息。HEAD：同GET，但服务器不返回消息体。POST：请求服务器接受请求中包装的实体，将其作为URI标识的资源的附属信息。PUT：让服务器将请求中包装的实体存储为URI标识位置。DELETE：让服务器将URI标识的资源删除。TRACE：调用远程的应用层环回。最终服务器应将收到的消息包装为实体并返回状态码为200的应答。还记得吗？服务器传输HTML文件给客户端使用的是HTTP GET方法。客户端提交信息给服务器，常常采用POST方法。Web表单（form）是一种特殊的HTML标签，它负责产生一个POST请求给服务器，并拿回结果给浏览器。

  /*****************************以上来自互联网********************/

用户注册

/********************register.js ********************/var router = require('express').Router();、router.route('/register') // 返回注册页面  .get(function (req, res) {  res.render('account/register', {title: '注册'}) // 接受用户表单 .post(function (req, res, next) { var username = req.body.username, password = req.body.password; console.log('Register post received!'); console.log('username:', username, 'password::', password);                  res.end('成功收到POST请求'); });module.exports = router;

我们逐步来分析上述代码做了什么？

首先实例化一个Router对象这样我们就能快捷方便的操作路由然后如果有人或者猫向/register这个路由发起get请求我们就扔给Ta一张account/resister的模板并把title渲染为注册。 如果有人或者猫这张表单发起post请求也就是提交表单 我们得到用户的账号密码并且在命令行打印出来相关信息。

小问题：本来如果没有安装body-parser第三方模块的话，我们是不能使用xxx.body.yyy这种形式的，一切都来自xxx.query.yyy ，query是用来表示参数的。如同这个req.body.username，是指属性name为username的值我们把它给提交给服务器来处理。

表单的验证这里不会涉及因为大多数前端代码与静态代码一样，或者参加拙作javascript策略模式

小结

很惭愧粗略的讲了一下表单与模板引擎