本篇博客讲解如何实现前后端的简单登录注册界面，后端代码由node.js实现，主要阐述登录注册时网页工作原理。感兴趣的同学可以参考一下。
注册界面
功能：
- 判断用户是否输入邮箱，密码，验证密码(前端判断)
- 判断用户的邮箱格式是否正确(后端判断)
- 判断输入的密码和验证密码是否一致(前端判断)
- 判断注册的邮箱是否唯一(后端判断)
1.html部分：
<div class="form-wrapper">
<h1>注册</h1>
<form id="RegisterForm" >
<div class="row">
<lable>邮箱</lable>
<input type="text" name="email">
<span class="error"></span>
</div>
<div class="row">
<lable>密码</lable>
<input type="password" name="password">
<span class="error"></span>
</div>
<div class="row">
<lable>确认密码</lable>
<input type="password" name="password_confirm">
<span class="error"></span>
</div>
<div class="row">
<input type="submit">
</div>
</form>
</div>
2.js部分(由jquery实现)：
监听表单的submit事件，将用户输入的信息存储到hash表中，如果用户输入不合法则出现错误提示信息
$('#RegisterForm').on('submit',(e) => {
e.preventDefault();
let hash = {};
let arg = ['email','password','password_confirm'];
arg.forEach((name) => {
let value = $('#RegisterForm').find(`[name= ${name}]`).val();
hash[name] = value;
})
$('#RegisterForm').find('.error').each((index,span) => {
$(span).text(''); //初始的错误提示为空
})
if(hash['email'] === ''){
$('#RegisterForm').find('[name = "email"]').siblings('.error').text('请输入邮箱');
return
}
if(hash['password'] === ''){
$('#RegisterForm').find('[name = "password"]').siblings('.error').text('请输入密码');
return
}
if(hash['password_confirm'] === ''){
$('#RegisterForm').find('[name = "password_confirm"]').siblings('.error').text('请输入密码');
return
}
if(hash['password'] !== hash['password_confirm'] ){
$('#RegisterForm').find('[name = "password_confirm"]').siblings('.error').text('密码不匹配');
return
}
3.ajax发送post请求register页面:
如果请求成功，打印出返回的信息；
如果请求失败，判断一下失败信息，然后给出错误信息提示；
$.post('/register',hash).then((response) =>{console.log(response)},
(request) => {
let {errors} = request.responseJSON;/*等价于----
-------let {errors} = JSON.parse(request.responseText)*/
if(errors.email && errors.email === 'invalid'){
$('#RegisterForm').find('[name = "email"]')
.siblings('.error').text('邮箱输错了');
}
})
})
4.服务端代码：
给register页面的(发送POST请求)设置路由，
后端代码将浏览器传来的request中的信息存储到hash中，判断是否符合输入要求，同时判断邮箱是否唯一，如果不符合，服务器返回400，给出提示；如果符合，返回200，将数据信息存储到本地数据库./db/users
else if(path === '/register' && method ==='POST'){
readBody(request).then((body) => {
let strings = body.split('& ');
let hash = {};
strings.forEach((string) => {
let parts = string.split('=');
let key = parts[0];
let value = parts[1];
hash[key] = decodeURIComponent(value) ;//解决url路径解析不了@符号的问题
})
let {email, password, password_confirm} = hash;
if (email.indexOf('@') === -1) {
response.statusCode = 400;
response.setHeader('Content-Type', 'text/json;charset=utf-8')
response.write(`{"errors":
{"email":"invalid"}
}`);
}
else if (password !== password_confirm) {
response.statusCode = 400;
response.write('password not match');
}
else {
var users = fs.readFileSync('./db/users','utf8')
try{
users = JSON.parse(users)
}
catch(exception) {
users = [];
}
let inUse = false;
for(let i = 0;i<users.length;i++){
let user = users[i];
if(user.email = email)
{inUse = true}
}
if(inUse){
response.statusCode = 400
response.write('email inUse');
}else{
users.push({ email: email, password: password })
response.statusCode = 200
let usersString = JSON.stringify(users)
fs.writeFileSync('./db/users',usersString);
}
}
response.end()
})
}
function readBody(request){ //用来读取整段的浏览器传来的formdata,因为浏览器是片段上传的方式
return new Promise((resolve,reject) => {
let body = [];
request.on('data',(chunk) => {
body.push(chunk)
}).on('end',() => {
body = Buffer.concat(body).toString();
resolve(body);
})
})
}
二·登录界面
功能：
- 判断用户输入的邮箱，密码是否为空(前端判断)
- 判断用户输入的邮箱是否正确(后端判断)
- 判断输入的密码是否正确(后端判断)
1.html部分：
<div class="form-wrapper">
<h1>登录</h1>
<form id="loginForm" >
<div class="row">
<lable>邮箱</lable>
<input type="text" name="email">
<span class="error"></span>
</div>
<div class="row">
<lable>密码</lable>
<input type="password" name="password">
<span class="error"></span>
</div>
<div class="row">
<input type="submit">
</div>
</form>
</div>
2.JS部分：
将用户填写的登录信息存储到hash表中，如果用户输入为空，则给出错误信息提示
$('#loginForm').on('submit',(e) => {
e.preventDefault();
let hash = {};
let arg = ['email','password'];
arg.forEach((name) => {
let value = $('#loginForm').find(`[name= ${name}]`).val();
hash[name] = value;
})
$('#loginForm').find('.error').each((index,span) => {
$(span).text('');
})
if(hash['email'] === ''){
$('#loginForm').find('[name = "email"]').siblings('.error').text('请输入邮箱');
return
}
if(hash['password'] === ''){
$('#loginForm').find('[name = "password"]').siblings('.error').text('请输入密码');
return
}
3.ajax发送post请求login页面：
如果请求成功，跳转到首页；如果请求失败，给出登录失败的提示
$.post('/login',hash).then(() =>{window.location.href="/"},
() => {
alert("登录失败，请重新登录")
})
})
4.给login页面(post请求)设置路由：
读取本地数据库./db/users，与浏览器传来的formdata进行比对，如果用户密码正确，给浏览器设置cookie，将用户登录的邮箱名存下来，返回200
else if(path==='/login' && method ==="POST"){
readBody(request).then((body) => {
let strings = body.split('&');
let hash = {};
strings.forEach((string) => {
let parts = string.split('=');
let key = parts[0];
let value = parts[1];
hash[key] = decodeURIComponent(value);
})
let {email, password} = hash;
var users = fs.readFileSync('./db/users','utf8')
try{
users = JSON.parse(users)
}
catch(exception) {
users = [];
}
let found ;
for(let i = 0;i<users.length;i++){
let user = users[i];
if(user.email === email && user.password === password)
{found = true;
break;}
}
if(found){
/*设置cookie，将用户的登录邮箱名存下来*/
response.setHeader('set-cookie',`email= ${email}`);
response.statusCode = 200
}else{
response.statusCode = 401
}
response.end();
})
}
这里讲到了给浏览器设置cookie，我们就来简单了解一下什么是cookie。
三·cookie
cookie指某些网站为了辨别用户身份、进行 session 跟踪而储存在用户本地终端上的数据（通常经过加密）
服务器通过set-cookie后，给浏览器传了一段识别身份的数据；之后浏览器给次请求都会附上这份cookie数据，服务器以此来验明浏览器的身份。cookie的时效性一般是两天左右，可以自行设置。
通俗的来讲就是cookie就是一个验证身份的门票，服务器给浏览器发了一张门票，浏览器请求数据时需要拿出门票，服务器看到门票后验证了身份，才会同意请求。
这里值得注意的是cookie的作用域domain，cookie也遵守浏览器同源策略，不同域名的cookie的是不一样的。
四·登录后跳转首页
登录界面获取到浏览器设置的cookie，再次向服务器请求跳转到首页时需要附上这段cookie，服务器读取后同意跳转到首页。
功能：
- 若登录成功，跳转到首页，在首页显示登录邮箱名
1.html部分(首页)：
<body>
<h1>这是首页</h1>
<span>用户: --email--</span>
</body>
2.给首页设置路由：
读取cookie值，展示在首页上，显示当前登录的用户邮箱名
else if(path === '/'){
let string = fs.readFileSync('./index.html', 'utf8')
let cookies = request.headers.cookie.split('; ');/*这里多出一个空格，要注意*/
let hash = {};
for(let i =0 ;i<cookies.length;i++){
let parts = cookies[i].split('=');
let key = parts[0];
let value = parts[1];
hash[key] = value;
}
总结
讲解完实现过程后，我们来总结一下：
当我们进行登录注册时，网页都做了些什么呢？
1.我们进行注册时，浏览器向服务器发送post请求，同时将注册信息传过去；
2.服务器将用户信息存储到本地数据库后，告知浏览器注册成功
3.用户打开登录界面，输入登录信息，向服务器发送post请求
4.服务器读取本地数据库，比对登录信息是否正确，若错误，告知浏览器登录失败；若正确给浏览器设置cookie
5.浏览器向服务器发送get请求，访问首页，附上cookie
6.服务器读取cookie，验证身份后，同意浏览器访问首页
以上是个人观点，如有错误欢迎指出。
