登录注册与cookie

注册

先写个注册页面

<body>
  <div class="form-wrapper">
    <h2>注册</h2>
    <form id="signUpForm" autocomplete="off">  
      <div class="row">
        <label>邮箱</label>
        <input type="text" name="email">
      </div>
      <div class="row">
        <label>密码</label>
        <input type="password" name="password">
      </div>
      <div class="row">
        <label>确认密码</label>
        <input type="password" name="password_confirmation">
      </div>
      <div class="row">
        <input type="submit" value="注册">
      </div>
    </form>
  </div>
</body>

  <script>
    $('#signUpForm').on('submit',(e)=>{
      e.preventDefault()
      let hash = {}
      let need = ['email','password','password_confirmation']
      need.forEach((name)=>{
        let value = $('#signUpForm').find(`[name=${name}]`).val()
        hash[name] = value
      }) // 获取用户注册输入的邮箱，密码信息。
      $.post('/sign_up',hash).then(
        ()=>{console.log('success')},
        ()=>{console.log('fail')}
      )
    }) // 用ajax发起请求
  </script>

再写个后台

...
else if(path === '/sign_up' && method === 'GET'){
  let string = fs.readFileSync('./sign_up.html','utf-8')
  response.statusCode = 200
  response.setHeader('Content-Type','text/html; charset:utf-8')
  response.write(string)
  response.end()
}else if(path === '/sign_up' && method === 'POST'){
  readBody(request).then((body)=>{
    // body email=1&password=2&password_confirmation=3
    let strings = body.split('&') // ['email=1','password=2','password_confirmation=3']
    let hash = {}
    strings.forEach((string)=>{
      // string  'email=1'
      let parts = string.split('=') // ['email','1']
      let key = parts[0]
      let value = parts[1]
      hash[key] = value
    })
    // let email = hash['email']
    // let password = hash['password']
    // let password_confirmation = hash['password-confirmation']
    let {email, password, password_confirmation} = hash // 等同于上面三句
    if(email.indexOf('@') === -1){ // 邮箱判断 @ 不存在
      response.statusCode = 400
      response.write('email is bad')
    }else if(password !== password_confirmation){ // 判断密码是否一致
      response.statusCode = 400
      response.write('password is not match')
    }else{
      response.statusCode = 200
    }
    response.end()
  })
}else{
  response.statusCode = 404
  response.setHeader('Content-Type', 'text/html;charset=utf-8')
  response.write('找不到对应的路径，你需要自行修改 index.js')
  response.end()
}
function readBody(rquest){
  return new Promise((resolve,reject)=>{
    let body = []
    request.on('data', (chunk) => {
      body.push(chunk)
    }).on('end', () => {
      body = Buffer.concat(body).toString()
      resolve(body)
    })
  })
} // 后台把获取到的数据进行解析
...

对后台的错误返回做一些调整，以及前端做一些判断

...
else if(path === '/sign_up' && method === 'POST'){
  readBody(request).then((body)=>{
    // body email=1&password=2&password_confirmation=3
    let strings = body.split('&') // ['email=1','password=2','password_confirmation=3']
    let hash = {}
    strings.forEach((string)=>{
      // string  'email=1'
      let parts = string.split('=') // ['email','1']
      let key = parts[0]
      let value = parts[1]
      hash[key] = value
    })
    // let email = hash['email']
    // let password = hash['password']
    // let password_confirmation = hash['password-confirmation']
    let {email, password, password_confirmation} = hash
    if(email.indexOf('@') === -1){ 
      response.statusCode = 400
      response.setHeader('Content-Type','application/json;charset=utf8') 
      response.write(`{
        "errors":{ 
          "email": "invalid"
        }
      }`)  // 直接返回错误，然后前端再去提示具体什么错误
    }else if(password !== password_confirmation){
      response.statusCode = 400
      response.write('password is not match')
    }else{
      response.statusCode = 200
    }
    response.end()
  })
...


let $form = $('#signUpForm')
$form.on('submit',(e)=>{
  e.preventDefault()
  let hash = {}
  let need = ['email','password','password_confirmation']
  need.forEach((name)=>{
    let value = $form.find(`[name=${name}]`).val()
    hash[name] = value
  })
// 填写后错误提示消失
  $form.find('.error').each((index,span) => {
    $(span).text('')
  })
// 在前端做一些判断，邮箱密码是否填写，密码是否匹配。
  if(hash['email'] === ''){
    $form.find('[name = "email"]').siblings('.error').text('请填写邮箱')
    return
  }
  if(hash['password'] === ''){
    $form.find('[name = "password"]').siblings('.error').text('请填写密码')
    return
  }
  if(hash['password'] !== hash['password_confirmation']){
    $form.find('[name="password_confirmation"]').siblings('.error').text('密码不匹配')
  }
  $.post('/sign_up',hash).then(
    ()=>{
      console.log('success')
    },(request)=>{
      // let {errors} = JSON.parse(request.responseText)
      // 在后台设置一个 setHeader('Content-Type','application/json;charset=utf8') 就不需要 JSON.parse()
      let {errors} = request.responseJSON
      if(errors.email && errors.email === 'invalid'){
        $form.find('[name = "email"]').siblings('.error').text('你的邮箱错了')
      }
    })
})

登录

新建个文件 db/users作为数据库，把从前端获取到的数据存入到数据库中。在写入前先进行邮箱和密码的判断，正确之后再存入。之后再登录的时候，从前端获取的数据与数据库中的数据比对，一致之后就登录成功。

...
else if(path === '/sign_up' && method === 'GET'){
  let string = fs.readFileSync('./sign_up.html','utf-8')
  response.statusCode = 200
  response.setHeader('Content-Type','text/html; charset:utf-8')
  response.write(string)
  response.end()
}else if(path === '/sign_up' && 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) // 需要进行转译，这样 @ 才能正常显示，不然 @ 会显示成 %40
    })
    let {email, password, password_confirmation} = hash
    if(email.indexOf('@') === -1){ // @ 不存在
      response.statusCode = 400
      response.setHeader('Content-Type','application/json;charset=utf8') 
      response.write(`{
        "errors":{ 
          "email": "invalid"
        }
      }`) 
    }else if(password !== password_confirmation){
      response.statusCode = 400
      response.write('password is not match')
    }else{
      let users = fs.readFileSync('./db/users','utf-8')
    // users可能不符合 JSON 规范，假如代码有问题，那么就直接把 users 变成空数组，要是成功的话就不执行
      try{
        users = JSON.parse(users)
      }catch(exception){
        users = []
      }
    // 判断 email 是否存在，要是存在就不允许再注册。
      let inUse = false
      for( let i = 0; i < users.length; i++){
        let user = users[i]
        if(user.email === email){
          inUse = true
          break
        }
      }
      console.log(inUse)
      if(inUse){
        response.statusCode = 400
        response.write('email in use')
      }else{
        users.push({email: email, password: password})
        let usersString = JSON.stringify(users)
        fs.writeFileSync('./db/users',usersString)
        response.statusCode = 200
      }  
    }
    response.end()
  })
}else if(path === '/sign_in' && method === 'GET'){
  var string = fs.readFileSync('./sign_in.html','utf8')
  response.statusCode = 200
  response.setHeader('Content-Type','text/html;charset=utf-8')
  response.write(string)
  response.end()
}else if(path === '/sign_in' && 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
    let users = fs.readFileSync('./db/users','utf-8')
    try{
      users = JSON.parse(users)
    }catch(exception){
      users = []
    }
    let found
    for( i=0; i<users.length; i++){
      if(users[i].email === email && users[i].password === password){
        found = true
        break
      }
    }
    if(found){
      response.statusCode = 200
    }else{
      response.statusCode = 400
    }
    
    response.end() 
  })
}
...

cookie

通过用户登录成功的瞬间设置cookie，在后台用 response.setHeader('Set-Cookie', 'sign_in_email = ${email}')设置，之后用户每次访问的时候都会带上cookie。
后台完整代码

...if(path === '/style.css'){
  var string = fs.readFileSync('./style.css','utf8')
  response.setHeader('Content-Type','text/css')
  response.write(string)
  response.end()
}else if(path === '/'){
  var string = fs.readFileSync('./index.html','utf8')
  let cookies = request.headers.cookie.split('; ') // 得到 cookies [email=1@qq.com]
  // 遍历 cookies 得到 { sign_in_email: '1@qq.com' }
  let hash = {}
  for(let i=0; i<cookies.length; i++){
    let parts = cookies[i].split('=') // [email,1@qq.com]
    let key = parts[0]
    let value = parts[1]
    hash[key] = value
  }
  // 验证数据库中 email 是否已经存在
  let email = hash.sign_in_email
  let users = fs.readFileSync('./db/users','utf8')
  users = JSON.parse(users)
  let userFound
  for(let i=0; i<users.length; i++){
    if(users[i].email === email){
      userFound = users[i]
      break
    }
  }
  // 存在就提示欢迎登录，不存在就提示不存在
  if(userFound){
    string = string.replace('__hello__','欢迎 ' + userFound.email+' 登录！')
  }else{
    string = string.replace('__hello__','用户不存在')
  }
  response.setHeader('Content-Type','text/html;charset=utf-8')
  response.write(string)
  response.end()
}else if(path === '/main.js'){
  var string = fs.readFileSync('./main.js','utf8')
  response.setHeader('Content-Type','application/javascript')
  response.write(string)
  response.end()
}else if(path === '/sign_up' && method === 'GET'){
  let string = fs.readFileSync('./sign_up.html','utf-8')
  response.statusCode = 200
  response.setHeader('Content-Type','text/html; charset:utf-8')
  response.write(string)
  response.end()
}else if(path === '/sign_up' && method === 'POST'){
  readBody(request).then((body)=>{
    // body email=1&password=2&password_confirmation=3
    let strings = body.split('&') // ['email=1','password=2','password_confirmation=3']
    let hash = {}
    strings.forEach((string)=>{
      // string  'email=1'
      let parts = string.split('=') // ['email','1']
      let key = parts[0]
      let value = parts[1]
      hash[key] = decodeURIComponent(value) // 需要进行转译，这样 @ 才能正常显示，不然 @ 会显示成 %40
    })
    // let email = hash['email']
    // let password = hash['password']
    // let password_confirmation = hash['password-confirmation']
    let {email, password, password_confirmation} = hash // 等同于上面三句
    if(email.indexOf('@') === -1){ // @ 不存在
      response.statusCode = 400
      response.setHeader('Content-Type','application/json;charset=utf8') 
      response.write(`{
        "errors":{ 
          "email": "invalid"
        }
      }`) 
    }else if(password !== password_confirmation){
      response.statusCode = 400
      response.write('password is not match')
    }else{
      let users = fs.readFileSync('./db/users','utf-8')
    // users可能不符合 JSON 规范，假如代码有问题，那么就直接把 users 变成空数组，要是成功的话就不执行
      try{
        users = JSON.parse(users)
      }catch(exception){
        users = []
      }
    // 判断 email 是否存在，要是存在就不允许再注册。
      let inUse = false
      for( let i = 0; i < users.length; i++){
        let user = users[i]
        if(user.email === email){
          inUse = true
          break
        }
      }
      console.log(inUse)
      if(inUse){
        response.statusCode = 400
        response.write('email in use')
      }else{
        users.push({email: email, password: password})
        let usersString = JSON.stringify(users)
        fs.writeFileSync('./db/users',usersString)
        response.statusCode = 200
      }  
    }
    response.end()
  })
}else if(path === '/sign_in' && method === 'GET'){
  var string = fs.readFileSync('./sign_in.html','utf8')
  response.statusCode = 200
  response.setHeader('Content-Type','text/html;charset=utf-8')
  response.write(string)
  response.end()
}else if(path === '/sign_in' && method === 'POST'){
  readBody(request).then((body)=>{
    // body email=1&password=2&password_confirmation=3
    let strings = body.split('&') // ['email=1','password=2','password_confirmation=3']
    let hash = {}
    strings.forEach((string)=>{
      // string  'email=1'
      let parts = string.split('=') // ['email','1']
      let key = parts[0]
      let value = parts[1]
      hash[key] = decodeURIComponent(value) // 需要进行转译，这样 @ 才能正常显示，不然 @ 会显示成 %40
    })
    let {email, password} = hash
    let users = fs.readFileSync('./db/users','utf-8')
    try{
      users = JSON.parse(users)
    }catch(exception){
      users = []
    }
    let found
    for( 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}`) // 设置cookie，对登录用户做一个标记
      response.statusCode = 200
    }else{
      response.statusCode = 400
    }
    
    response.end() 
  })
}else{
  response.statusCode = 404
  response.setHeader('Content-Type', 'text/html;charset=utf-8')
  response.write('找不到对应的路径，你需要自行修改 index.js')
  response.end()
}
function readBody(rquest){
  return new Promise((resolve,reject)=>{
    let body = []
    request.on('data', (chunk) => {
      body.push(chunk)
    }).on('end', () => {
      body = Buffer.concat(body).toString()
      resolve(body)
    })
  })
}
...

cookie 是什么

  1. Cookie 是浏览器访问服务器后，服务器传给浏览器的一段数据。
  2. 浏览器需要保存这段数据，不得轻易删除。
  3. 此后每次浏览器访问该服务器，都必须带上这段数据。

cookie的作用
一般有两个作用：

  1. 第一个作用是识别用户身份。

比如用户 A 用浏览器访问了 http://a.com，那么 http://a.com 的服务器就会立刻给 A 返回一段数据「uid=1」（这就是 Cookie）。当 A 再次访问 http://a.com 的其他页面时，就会附带上「uid=1」这段数据。

同理，用户 B 用浏览器访问 http://a.com 时，http://a.com 发现 B 没有附带 uid 数据，就给 B 分配了一个新的 uid，为2，然后返回给 B 一段数据「uid=2」。B 之后访问 http://a.com 的时候，就会一直带上「uid=2」这段数据。

借此，http://a.com 的服务器就能区分 A 和 B 两个用户了。

  1. 第二个作用是记录历史。

假设 http://a.com 是一个购物网站，当 A 在上面将商品 A1 、A2 加入购物车时，JS 可以改写 Cookie，改为「uid=1; cart=A1,A2」，表示购物车里有 A1 和 A2 两样商品了。

这样一来，当用户关闭网页，过三天再打开网页的时候，依然可以看到 A1、A2 躺在购物车里，因为浏览器并不会无缘无故地删除这个 Cookie。

借此，就达到里记录用户操作历史的目的了。

©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 218,546评论 6赞 507
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 93,224评论 3赞 395
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 164,911评论 0赞 354
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 58,737评论 1赞 294
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 67,753评论 6赞 392
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 51,598评论 1赞 305
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 40,338评论 3赞 418
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 39,249评论 0赞 276
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 45,696评论 1赞 314
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,888评论 3赞 336
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 40,013评论 1赞 348
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 35,731评论 5赞 346
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 41,348评论 3赞 330
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,929评论 0赞 22
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 33,048评论 1赞 270
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 48,203评论 3赞 370
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 44,960评论 2赞 355

推荐阅读更多精彩内容

  • 浅谈一次登录注册与cookie
    需求 我希望用户能够注册 ->注册后跳转到登录页面 -> 登录页面跳转以后跳转到首页显示我的登录密码 完成效果 代...
    mayufo阅读 267评论 0赞 0
  • 理解Cookie和Session机制
    会话（Session）跟踪是Web程序中常用的技术，用来跟踪用户的整个会话。常用的会话跟踪技术是Cookie与Se...
    chinariver阅读 5,620评论 1赞 49
  • 深入理解Cookie和Session机制
    目录Cookie机制什么是CookieCookie的不可跨域名性Unicode编码：保存中文BASE64编码：保存...
    Tomatoro阅读 16,943评论 7赞 186
  • 每日一题 (一)
    本博客转自：「作者：若愚链接：https://zhuanlan.zhihu.com/p/22361337来源：知乎...
    韩宝亿阅读 2,764评论 0赞 3
  • 参加孵化营的收获
    我是参加了第二期孵化营的，我是一个有冲动没有持久耐力的人，但这次把我这个习惯改了，我担任的是监督员，每天...
    奋力拼搏A阅读 265评论 0赞 0