资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/实现前后端登录注册界面

实现前后端登录注册界面

不知名网友 / 3641人阅读

摘要：本篇博客讲解如何实现前后端的简单登录注册界面，后端代码由实现，主要阐述登录注册时网页工作原理。四登录后跳转首页登录界面获取到浏览器设置的，再次向服务器请求跳转到首页时需要附上这段，服务器读取后同意跳转到首页。

本篇博客讲解如何实现前后端的简单登录注册界面，后端代码由node.js实现，主要阐述登录注册时网页工作原理。感兴趣的同学可以参考一下。

注册界面

功能：

判断用户是否输入邮箱，密码，验证密码(前端判断)

判断用户的邮箱格式是否正确(后端判断)

判断输入的密码和验证密码是否一致(前端判断)

判断注册的邮箱是否唯一(后端判断)

1.html部分： 
</>复制代码 
  2.     
    注册
  3.     
  4.         
  5.             邮箱
  6.             
  7.             
  8.         
  9.         
  10.             密码
  11.             
  12.             
  13.         
  14.           
  15.               确认密码
  16.               
  17.               
  18.           
  19.             
  20.                 
  21.             
  22.
2.js部分(由jquery实现)：

监听表单的submit事件，将用户输入的信息存储到hash表中，如果用户输入不合法则出现错误提示信息

</>复制代码 
  1. $("#RegisterForm").on("submit",(e) => {
  2.     e.preventDefault();
  3.     let hash = {};
  4.     let arg = ["email","password","password_confirm"];
  5.     arg.forEach((name) => {
  6.         let value = $("#RegisterForm").find(`[name= ${name}]`).val();
  7.         hash[name] = value;
  8.     })
  9.     $("#RegisterForm").find(".error").each((index,span) => {
  10.         $(span).text(""); //初始的错误提示为空
  11.     })
  12.     if(hash["email"] === ""){
  13.         $("#RegisterForm").find("[name = "email"]").siblings(".error").text("请输入邮箱");
  14.         return
  15.     }
  16.      if(hash["password"] === ""){
  17.         $("#RegisterForm").find("[name = "password"]").siblings(".error").text("请输入密码");
  18.         return
  19.     }
  20.     if(hash["password_confirm"] === ""){
  21.         $("#RegisterForm").find("[name = "password_confirm"]").siblings(".error").text("请输入密码");
  22.         return
  23.     }
  24.     if(hash["password"] !== hash["password_confirm"] ){
  25.         $("#RegisterForm").find("[name = "password_confirm"]").siblings(".error").text("密码不匹配");
  26.         return
  27.     }
3.ajax发送post请求register页面:

如果请求成功，打印出返回的信息；
如果请求失败，判断一下失败信息，然后给出错误信息提示；

</>复制代码 
  1.     $.post("/register",hash).then((response) =>{console.log(response)},
  2.         (request) => {
  3.         let {errors} = request.responseJSON;/*等价于----
  4. -------let {errors} = JSON.parse(request.responseText)*/
  5.         if(errors.email  &&  errors.email === "invalid"){
  6.            $("#RegisterForm").find("[name = "email"]")
  7. .siblings(".error").text("邮箱输错了");
  8.         }
  9.         })
  10.     })
4.服务端代码：

给register页面的(发送POST请求)设置路由，
后端代码将浏览器传来的request中的信息存储到hash中，判断是否符合输入要求，同时判断邮箱是否唯一，如果不符合，服务器返回400，给出提示；如果符合，返回200，将数据信息存储到本地数据库./db/users

</>复制代码 
  1. else if(path === "/register" && method ==="POST"){
  2.         readBody(request).then((body) => {
  3.             let strings = body.split("& ");
  4.             let hash = {};
  5.             strings.forEach((string) => {
  6.                 let parts = string.split("=");
  7.                 let key = parts[0];
  8.                 let value = parts[1];
  9.                 hash[key] = decodeURIComponent(value) ;//解决url路径解析不了@符号的问题
  10.                })
  11.                 let {email, password, password_confirm} = hash;
  12.                 if (email.indexOf("@") === -1) {
  13.                     response.statusCode = 400;
  14.                     response.setHeader("Content-Type", "text/json;charset=utf-8")
  15.                     response.write(`{"errors":
  16.                     {"email":"invalid"}
  17.                     }`);
  18.                 }
  19.                 else if (password !== password_confirm) {
  20.                     response.statusCode = 400;
  21.                     response.write("password not match");
  22.                 }
  23.                 else {
  24.                     var users = fs.readFileSync("./db/users","utf8")
  25.                     try{
  26.                          users = JSON.parse(users)
  27.                     }
  28.                     catch(exception) {
  29.                         users = [];
  30.                     }
  31.                     let inUse = false;
  32.                     for(let i = 0;i {
  33.         let body = [];
  34.         request.on("data",(chunk) => {
  35.             body.push(chunk)
  36.         }).on("end",() => {
  37.             body = Buffer.concat(body).toString();
  38.             resolve(body);
  39.         })
  40.     })
  41. }
二·登录界面

功能：

判断用户输入的邮箱，密码是否为空(前端判断)

判断用户输入的邮箱是否正确(后端判断)

判断输入的密码是否正确(后端判断)

1.html部分： 
</>复制代码 
  2.     
    登录
  3.     
  4.         
  5.             邮箱
  6.             
  7.             
  8.         
  9.         
  10.             密码
  11.             
  12.             
  13.         
  14.         
  15.             
  16.         
  17.
2.JS部分：

将用户填写的登录信息存储到hash表中，如果用户输入为空，则给出错误信息提示

</>复制代码 
  1.   $("#loginForm").on("submit",(e) => {
  2.         e.preventDefault();
  3.         let hash = {};
  4.         let arg = ["email","password"];
  5.         arg.forEach((name) => {
  6.             let value = $("#loginForm").find(`[name= ${name}]`).val();
  7.             hash[name] = value;
  8.         })
  9.         $("#loginForm").find(".error").each((index,span) => {
  10.             $(span).text("");
  11.         })
  12.         if(hash["email"] === ""){
  13.             $("#loginForm").find("[name = "email"]").siblings(".error").text("请输入邮箱");
  14.             return
  15.         }
  16.         if(hash["password"] === ""){
  17.             $("#loginForm").find("[name = "password"]").siblings(".error").text("请输入密码");
  18.             return
  19.         }
3.ajax发送post请求login页面：

如果请求成功，跳转到首页；如果请求失败，给出登录失败的提示

</>复制代码 
  1.      $.post("/login",hash).then(() =>{window.location.href="/"},
  2.          () => {
  3.               alert("登录失败，请重新登录")
  4.           })
  5.     })
4.给login页面(post请求)设置路由：

读取本地数据库./db/users，与浏览器传来的formdata进行比对，如果用户密码正确，给浏览器设置cookie，将用户登录的邮箱名存下来，返回200

</>复制代码 
  1.  else if(path==="/login" && method ==="POST"){
  2.         readBody(request).then((body) => {
  3.             let strings = body.split("&");
  4.             let hash = {};
  5.             strings.forEach((string) => {
  6.                 let parts = string.split("=");
  7.                 let key = parts[0];
  8.                 let value = parts[1];
  9.                 hash[key] = decodeURIComponent(value);
  10.             })
  11.             let {email, password} = hash;
  12.             var users = fs.readFileSync("./db/users","utf8")
  13.             try{
  14.                 users = JSON.parse(users)
  15.             }
  16.             catch(exception) {
  17.                 users = [];
  18.             }
  19.             let found ;
  20.             for(let i = 0;i
  21. 这里讲到了给浏览器设置cookie，我们就来简单了解一下什么是cookie。
  22. 三·cookie
  23. cookie指某些网站为了辨别用户身份、进行 session 跟踪而储存在用户本地终端上的数据（通常经过加密）
    服务器通过set-cookie后，给浏览器传了一段识别身份的数据；之后浏览器给次请求都会附上这份cookie数据，服务器以此来验明浏览器的身份。cookie的时效性一般是两天左右，可以自行设置。
    通俗的来讲就是cookie就是一个验证身份的门票，服务器给浏览器发了一张门票，浏览器请求数据时需要拿出门票，服务器看到门票后验证了身份，才会同意请求。
    这里值得注意的是cookie的作用域domain，cookie也遵守浏览器同源策略，不同域名的cookie的是不一样的。
  24. 四·登录后跳转首页
  25. 登录界面获取到浏览器设置的cookie，再次向服务器请求跳转到首页时需要附上这段cookie，服务器读取后同意跳转到首页。
    功能：
  26. 若登录成功，跳转到首页，在首页显示登录邮箱名
  27. 1.html部分(首页)：
  28. </>复制代码 
    1. 这是首页
    2. 用户: --email--
  29. 2.给首页设置路由：
  30. 读取cookie值，展示在首页上，显示当前登录的用户邮箱名
  31. </>复制代码 
    1.  else if(path === "/"){
    2.         let string = fs.readFileSync("./index.html", "utf8")
    3.         let cookies = request.headers.cookie.split("; ");/*这里多出一个空格，要注意*/
    4.         let hash = {};
    5.         for(let i =0 ;i
    6. 总结
    7. 讲解完实现过程后，我们来总结一下：
      当我们进行登录注册时，网页都做了些什么呢？
      1.我们进行注册时，浏览器向服务器发送post请求，同时将注册信息传过去；
      2.服务器将用户信息存储到本地数据库后，告知浏览器注册成功
      3.用户打开登录界面，输入登录信息，向服务器发送post请求
      4.服务器读取本地数据库，比对登录信息是否正确，若错误，告知浏览器登录失败；若正确给浏览器设置cookie
      5.浏览器向服务器发送get请求，访问首页，附上cookie
      6.服务器读取cookie，验证身份后，同意浏览器访问首页
    8. 源码
      附上一个vue版本带有登录注册功能的备忘录demo
    9. 以上是个人观点，如有错误欢迎指出。
                 
    10.                
    11.                                            
    12.                        
    13.
云服务器 GPU云服务器 登录注册界面 用php实现注册界面 前后端 前后端分离

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/107209.html

相关文章

  • 实现前后端登录注册界面

    摘要：本篇博客讲解如何实现前后端的简单登录注册界面，后端代码由实现，主要阐述登录注册时网页工作原理。四登录后跳转首页登录界面获取到浏览器设置的，再次向服务器请求跳转到首页时需要附上这段，服务器读取后同意跳转到首页。 本篇博客讲解如何实现前后端的简单登录注册界面，后端代码由node.js实现，主要阐述登录注册时网页工作原理。感兴趣的同学可以参考一下。 注册界面 功能： 判断用户是否输入邮箱，...

    Blackjun 评论0 收藏0

  • 系统的讲解 - SSO单点登录

    摘要：概念英文全称，单点登录。登录如上述流程图一致。系统和系统使用认证登录。退出上图，表示的是从某一个系统退出的流程图。与的关系如果企业有多个管理系统，现由原来的每个系统都有一个登录，调整为统一登录认证。 概念 SSO 英文全称 Single Sign On，单点登录。 在多个应用系统中，只需要登录一次，就可以访问其他相互信任的应用系统。 比如：淘宝网（www.taobao.com），天猫网...

    Kylin_Mountain 评论0 收藏0

  • Vue-book 2.0 一个移动端简单的全栈 web APP

    摘要：本项目是一个简单的全栈项目，前端新手可以拿来练练手。项目实现了一些简单的功能，后台可以对图书进行录入录出扫码或手动，前台显示录入的图书，并且前台注册登录后可以将书的订单发给服务器，并存到服务器。 Vue-book 2.0 Github 地址：https://github.com/percy507/v... 【觉得不错就来个 star 吧 ^_^】 说明（菜鸟请进，大神绕道 ~） 前端...

    wh469012917 评论0 收藏0

  • Vue-book 2.0 一个移动端简单的全栈 web APP

    摘要：本项目是一个简单的全栈项目，前端新手可以拿来练练手。项目实现了一些简单的功能，后台可以对图书进行录入录出扫码或手动，前台显示录入的图书，并且前台注册登录后可以将书的订单发给服务器，并存到服务器。 Vue-book 2.0 Github 地址：https://github.com/percy507/v... 【觉得不错就来个 star 吧 ^_^】 说明（菜鸟请进，大神绕道 ~） 前端...

    NotFound 评论0 收藏0

  • 阿里云9.9元学生服务器的购买和配置方法

    摘要：一通过学生价购买云服务器步骤一个人认证与实名认证进入阿里云官网点击右上角登录按钮这里使用的是淘宝账号密码支付，这个大家应该都有吧，没有自己去注册个淘宝账号输入淘宝账号密码后点击激活之后点头像后点击实名认证点击支付宝认证点击立即认证后进入支付一．通过学生价购买云服务器 步骤一：个人认证与实名认证 1.进入阿里云官网2.点击右上角登录按钮(这里使用的是淘宝账号密码支付，这个大家应该都有吧，没有自...

    ghnor 评论0 收藏0

发表评论

登陆后可评论

0条评论

不知名网友

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<