html5登入注册功能的实现,网页中的登录注册功能是如何实现的

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

注：本文所提到的所有代码都已上传至github ，可以直接clone后在终端使用测试。

一、前置知识：

基础知识可见我之前的博客：HTTP入门(请求与响应的基本知识) 。首先我们至少需要了解HTTP最基本的request请求和response响应的相关概念。

再看一下服务端和客户端之间的交互，如下图：

用文字描述一下：

客户端(即浏览器)向服务端发起request请求

服务端通过监听80端口(http)或443端口(https)来接收请求

服务端接收请求后进行相关处理

服务端向客户端发response响应。

客户端接收response响应，完成一次交互。

需要了解用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) // 发送请求体

需要知道后端如何发出响应(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 = $form.find(`[name=${name}]`).val()

hash[name] = value

})

})

3、前端需要将上一步所获得的数据通过post请求发送给服务端

(为什么不是get请求呢，主要还是因为post相对来说更安全)

$.post('/register', hash) // 第一个参数与是路径&