首先写一个登录界面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<title>Document</title>
</head>
<body>
<form id="signUpForm">
<div class="form-wrapper">
<h1>注册</h1>
<div class="row">
<label for="">昵称</label>
<input type="text" name="dub">
</div>
<div class="row">
<label for="">邮箱</label>
<input type="text" name="email">
</div>
<div class="row">
<label for="">密码</label>
<input type="text" name="password">
</div>
<div class="row">
<input type="submit" name="提交">
</div>
</div>
</form>
<script>
let hash={}
$()
</script>
<style>
*{margin:0;padding:0;}
*{box-sizing: border-box;}
body{
display:flex;
min-height:100vh;
justify-content:center;
align-items:center;
flex-direction: column;
}
.form-wrapper{
border:1px solid #ddd;
padding:20px;
min-width:350px;
}
.form-wrapper>.row{
margin:10px 0;
}
.form-wrapper > .row>label{
display: inline-block;
width:4em;
}
</style>
</body>
</html>
那我们怎么拿到表单提交的数据呢
监听表单提交事件，然后把数据存放在生成的哈希里
<script>
let hash={}
$('#signUpForm').on('submit',(e)=>{
e.preventDefault()
let need = ['dub','email','password']
need.forEach((name)=>{
console.log(name)
let value = $('#signUpForm').find(`[name=${name}]`).val()
hash[name]= value
})
console.log(hash)
})
</script>
$.post('/sign-up',hash) //
.then(()=>{
console.log('success')
},()=>{
console.log('fail')
})
$.post()方法使用HTTP POST请求从服务器加载数据
$(selector).post(URL,data,function(data,status,xhr)，dataType)
data是连同请求发送到服务器的数据
服务器拿到请求的数据
let body = []
request.on('data',(chunk)=>{
body.push(chunk)
}).on('end',()=>{
body = Buffer.concat(body).toString()
console.log(body)
response.statusCode=200
reaponse.end()
})
//dub=25&email=18767188399&password=6
我们要先把拿到的这个字符串变成一个哈希对象
let strings = body.split('&')
let hash = {}
strings.forEach((string)=>{
let parts = string.split('=')
let key = parts[0]
let value = parts[1]
hash[key]=value
})
console.log(hash)
//{ dub: '25', email: '18767188399', password: '6' }
接着把这个对象里面的属性变成一个个变量，这里用到ES6里面的解构赋值
let {dub,email,password}=hash
检查变量email里面有没有@符号，如果有就返回200，如果没有就返回400,并返回"email is bad"
if(email.indexOf("@") === -1){
response.statusCode = 400
response.setHeader('Content-Type', 'application/text;chraset:utf-8')
response.write('email is bad')
}else{
response.statusCode = 200
}
}
这边浏览器的ajax的then函数可以写成
$.post('/sign-up',hash) //
.then((response) => {
console.log(response)
}, (request) => {
if(request.responseText === 'email is bad'){
alert('邮箱写错了')
}
})
成功时打印响应，失败如果响应的文字是“email is bad”，就弹出“你邮箱写错了”
这样有一个问题就是，如果前端的代码里面多写一个空格，可能就失效了。比较好的方法是后端给前端返回一个JSON字符串，然后前端再解析这个字符串。
response.write(`{
"errors":{"email":"invalid"}
}`)
$.post('/sign-up',hash) //
.then((response) => {
console.log(response)
}, (request) => {
let object = JSON.parse(request.responseText)
let {errors} = object
console.log(errors)
})
也可以用另一种方法，就是在响应里设置一个JSON格式的响应头，就可以自动把JSON对象变成对象
response.setHeader('Content-Type', 'application/json;chraset:utf-8')
(request) => {
let {errors} = request.responseJSON
console.log(errors)
if(errors.email && errors.email === "invalid"){
alert('你邮箱输错了')
}
})
那么如果用户可能没有输入就点提交，所以要在post之前检查一下是否为空，
if(hash['email'] === ''){
$form.find("[name='email']").siblings('.error').text('填邮箱呀')
return
}
if(hash['dub'] === ''){
$form.find("[name='dub']").siblings('.error').text('填昵称呀')
return
}
if(hash['password'] === ""){
$form.find("[name='password']").siblings('.error').text('填密码呀')
return
}
我们需要同一时间只显示一个提示，需要一开始把提示都清空
$form.find('.error').each((index, span) => {
$(span).text('')
})
信息全都正确之后，后台要把这个注册信息存到数据库
else{
var users = fs.readFileSync("./db/users",'utf8')
var lei = typeof(users)
console.log(lei) //string
users = JSON.parse(users) // arry
users.push({ email: email, password: password }) //push对象到数组里面
var stringUsers = JSON.stringify(users) //arry再变成字符串
fs.writeFileSync('./db/users', stringUsers)
}
数据库里面是个JSON语法的字符串（“[]”）先经过解析成一个数组，然后把对象push进去，在变成字符串写进数据库里
但是这样会数据存储会重复，先判断一下是否存在，再push
let inUse = false
for (let i = 0; i < users.length; i++) {
let user = users[i]
if (user.email === email) {
inUse = true;
break;
}
}
if (inUse) {
response.statusCode = 400
response.write('email is bad')
} else {
users.push({ email: email, password: password }) //push对象到数组里面
var stringUsers = JSON.stringify(users) //arry再变成字符串
fs.writeFileSync('./db/users', stringUsers)
response.statusCode =200
}
这样注册就做完了，完成的需求有，提醒用户输入内容，检测邮箱格式，检测数据库中是否已经存在重复用户，符合条件后存储进数据库，
接着来做一个登录界面
首先写一个登录界面，样式和注册界面相同，后端还是先拿到post表单的数据，然后再拿去和数据库比对，如果找到注册，那么就跳转到主页，如果不成功那么就弹出提示“邮箱与密码不匹配”
sign-in里的Ajax post请求
$.post('/sign-in', hash) //
.then((response) => {
window.location.href = './'
}, (request) => {
alert('邮箱与密码不匹配')
})
后端按照之前的方法拿到POST信息之后，读取数据库，然后进行比对，如果密码和邮箱都符合，那么就返回200，否则返回401，然后Ajax对应的访问主页或者弹出错误提示。
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++){
if(users[i].email === email &&users[i].password === password){
found = true
break;
}
}
if(found){
response.setHeader('Set-Cookie',`sign_in_email = ${email}`)
response.statusCode = 200
}else{
response.statusCode = 401
}
response.end()
这样我们就实现了，当登录信息存在于数据库时跳转到主页，但是这样子就算我们没有登录，也可以输入主页的url来访问主页，接着来实现登陆之后才能访问主页的功能。
当后端找到注册信息返回200的同时，返回一个Cookie
response.setHeader('Set-Cookie',`sign_in_email = ${email}`)
接着配置主页的路由，
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
}
console.log(hash)
拿到Cookie的数据，然后把它存到一个哈希对象里。然后拿Cookie里面的email去和数据库里的注册信息比较，如果找到了，就显示在主页上
else if (path == '/') {
let string = fs.readFileSync('./main.html', 'utf-8')
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
}
let email = hash.sign_in_email
let users = fs.readFileSync('./db/users','utf8')
users = JSON.parse(users)
let foundUser
for(let i=0;i<users.length;i++){
if(users[i].email === email){
foundUser =users[i]
break;
}
}
console.log(foundUser)
if(foundUser){
string = string.replace('__password__',foundUser.password)
}else{
string = string.replace('__password__','不知道')
}
response.setHeader('Content-Type', 'text/html; charset=utf-8')
response.write(string)
response.statusCode = 200
response.end()
} else {
response.statusCode = 404
response.end()
}
