原生JS手写一个登录注册

首先写一个登录界面





    
    
    
    
    Document



    

注册

那我们怎么拿到表单提交的数据呢
监听表单提交事件,然后把数据存放在生成的哈希里


$.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

这样我们就实现了,当登录信息存在于数据库时跳转到主页,但是这样子就算我们没有登录,也可以输入主页的url来访问主页,接着来实现登陆之后才能访问主页的功能。
当后端找到注册信息返回200的同时,返回一个Cookie

response.setHeader('Set-Cookie',`sign_in_email = ${email}`)

接着配置主页的路由,

let cookies = request.headers.cookie.split(';') 
    let hash={}
    for(let i=0;i

拿到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

你可能感兴趣的:(原生JS手写一个登录注册)