首先写一个登录界面
<!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() }
|
|
收藏
淘帖
踩
