网页中登陆注册是如何实现的

摘要:登录注册是一个网站最常用的也是最基本的功能，本文就来详细的介绍一下在网页中，实现这两个最基本的需求从后端到前端需要做些什么。

一.前置知识

1.首先我们至少需要了解HTTP最基本的request请求和response响应的相关概念。可以先查看一位博主的文章:HTTP入门(请求与响应的基本知识).

2.再看一下服务端和客户端之间的交互,如下图:

用文字描述一下：
1.客户端（即浏览器）向服务端发起request请求
2.服务端通过监听80端口（http）或443端口（https）来接收请求
3.服务端接收请求后进行相关处理
4.服务端向客户端发response响应。
5.客户端接收response响应，完成一次交互。

3.需要了解用JS如何向服务端发请求,举例:

let xhr = new XMLHttpRequest()
xhr.open('POST','/')
xhr.setRequestHeader('content-type','x-www-form-urlencoded')  // 设置请求头
xhr.onreadystatechange = function(){
  if(request.readyState === 4){ // 整个请求过程已完成
    if(request.status >=200 && request.status < 400){ // 状态码在200到400之间，说明请求成功
      successFn.call(undefined,request.responseText) //调用成功函数
    }else{
      failFn.call(undefined,request.status) // 调用失败函数
    }
  } 
}
xhr.send(body) // 发送请求体

4.需要知道后端如何发出响应(NodeJS实现)

// 注：Nodejs中没有path、method、response这三个api，需要另外获取
// 这里的代码旨在我们了解后端需要做的事情，不用深入研究
if(path === '/' && method === 'GET'){
    var string = fs.readFileSync('./index.html','utf-8') // 读取服务端文件
    response.statusCode = 200 // 设置响应状态码
    response.setHeader('Content-Type','text/html;charset=utf-8') // 设置响应头
    response.write(string) // 设置响应体
    response.end() // 本次响应结束
}

二.注册具体流程

1.首先前端需要做一个注册的页面

如图:

2.然后前端需要在用户提交数据后,获取到这些数据

let $form = $('#register-form')
$form.on('submit', function(e) {
  e.preventDefault() // 阻止默认事件，因为form的submit事件默认会刷新页面
  let hash = {}
  let need = ['email', 'password', 'repassword']
  need.forEach((name) => { // 通过遍历获取表单数据并存到hash里
    let value = $