DAY17: 实作提交表单的Post请求

学完Get请求後就不免要学一下Post请求了，在DAY15: HTTP GET请求的开头有提到，Get是请求内容;Post请求会要上传数据，会包含请求体的内容。
今天会同时有Get与Post两种请求的实作，而重点在於用提交表单的方式来展现Post请求，这个提交表单的动作也是最常见的Post请求。

首先，先建立一个资料夹，专门拿来放HTML的档案，命名为html。
今天要建立三个HTML档:
第一个HTML为登入帐号密码的表单，也就是主页，档名为Login.html;
第二个为登入成功後进入的页面，档名为NicoleWorld.html;
第三个为登入失败(帐号密码不正确时)的页面，档名为Notfound.html。

接下来Get请求的部分，应该很熟悉吧!没错!就是拿DAY16: 实作浏览器采取想访问的HTML的内容做些微的修改，把页面改成上面那三个档案，这边就先不多做说明。

if (req.url=== "/") {
        sendResponse("/Login.html", 200, res);
       
      } else if (req.url=== "/NicoleWorld.html") {
        sendResponse(`NicoleWorld.html`, 200, res);
      } 
        else{
          sendResponse(`Notfound.html`, 200, res);
      } 
    }

今天的重点在於表单的Post请求。
首先在主页的登入表单中， < form> 的一些属性要做特别的设定，首先让表单知道这是Get还是Post请求，
使用 method属性来设定 ，也要知道表单要发送到哪一个後端去，使用action属性来设定url。

 <form method="POST" action="/process-login" >

还记得在DAY16: 实作浏览器采取想访问的HTML中，
设定if-else来判断是否为Get请求，而去请求对应的页面! 那时候的else是设置空白没有任何动作，接下来Post请求的部分都会在这个区块完成。

若是登入表单的路径是传到/log-in的话，就将数据切割成好几部分，
使用空阵列来储存读取的数据，也就是Buffer缓冲区的部分。
接下来要监听一个事件，在Buffer中的数据能不能读取;
若能读取，就调用名为cb的函数，而在函数体中切割读取的数据再加到阵列中。
再监听end，把缓冲区里的数据转换成可以读取的形式。

else {
      if (req.url === "/log-in") {
        let arrary = []; //BUFFER储存区块
  
        req.on("data", (cb) => {
            arrary.push(cb);
        });
  
        req.on("end", () => {
          arrary = Buffer.concat(arrary).toString();
          arrary = q.parse(arrary);
          console.log(arrary);
  
          if (arrary.user === "Nicole" && arrary.password === "520520") {
            res.statusCode = 301;
            res.setHeader("Location", "/NicoleWorld.html");//要转传的页面
          } else {
            res.statusCode = 301;
            res.setHeader("Location", "/Notfound.html");//要转传的页面
          }
  
          res.end();
        });
      }
    }
  });
server.listen(3000);

接下来要导入queryString的模块，

const q = require("querystring");

它能拆分字符串，也为了之後方便辨别帐号密码是否输入正确。
当帐号密码皆正确时，设定状态码与头部讯息res.setHeader()设定要转传的页面。

 res.setHeader("Location", "/NicoleWorld.html");

执行结果:
一开始的登入介面Login.html。

接下来输入正确的帐号密码(帐号为Nicole，密码为520520)
按下确认後，会出现NicoleWorld.html的页面

若是输入错误的帐号或密码，则会出现Notfound.html的页面。

而每一次转传的页面还有帐号密码，後端也都知道。

总结:
今天的部分就到这边!其实这篇的实作困扰很久，程序码比以往的还多行，难免眼花撩乱…，
就是因为这样一直反覆的除错，终於生产出来了!
为了不像之前展示出来的结果这麽单调，页面的部分也多花了一些心思在妆点上，但是配色上可能不是那麽好看…再请大家多多包涵…，今天就到这边啦~掰掰!!!!