本篇博客解说怎样完成前后端的简朴登录注册界面，后端代码由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，考证身份后，赞同浏览器接见首页
以上是个人观点，若有毛病迎接指出。
