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

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

功能：

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

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

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

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

    
注册
    

        

            邮箱
            
            
        
        

            密码
            
            
        
          

              确认密码
              
              
          
            

                
            

    

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

$("#RegisterForm").on("submit",(e) => {
    e.preventDefault();
    let hash = {};
    let arg = ["email","password","password_confirm"];
    arg.forEach((name) => {
        let value = $("#RegisterForm").find(`[name= ${name}]`).val();
        hash[name] = value;
    })
    $("#RegisterForm").find(".error").each((index,span) => {
        $(span).text(""); //初始的错误提示为空
    })
    if(hash["email"] === ""){
        $("#RegisterForm").find("[name = "email"]").siblings(".error").text("请输入邮箱");
        return
    }
     if(hash["password"] === ""){
        $("#RegisterForm").find("[name = "password"]").siblings(".error").text("请输入密码");
        return
    }
    if(hash["password_confirm"] === ""){
        $("#RegisterForm").find("[name = "password_confirm"]").siblings(".error").text("请输入密码");
        return
    }
    if(hash["password"] !== hash["password_confirm"] ){
        $("#RegisterForm").find("[name = "password_confirm"]").siblings(".error").text("密码不匹配");
        return
    }

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

    $.post("/register",hash).then((response) =>{console.log(response)},
        (request) => {
        let {errors} = request.responseJSON;/*等价于----
-------let {errors} = JSON.parse(request.responseText)*/
        if(errors.email  &&  errors.email === "invalid"){
           $("#RegisterForm").find("[name = "email"]")
.siblings(".error").text("邮箱输错了");
        }
        })
    })

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

else if(path === "/register" && 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) ;//解决url路径解析不了@符号的问题
               })
                let {email, password, password_confirm} = hash;

                if (email.indexOf("@") === -1) {
                    response.statusCode = 400;
                    response.setHeader("Content-Type", "text/json;charset=utf-8")
                    response.write(`{"errors":
                    {"email":"invalid"}
                    }`);
                }
                else if (password !== password_confirm) {
                    response.statusCode = 400;
                    response.write("password not match");
                }
                else {
                    var users = fs.readFileSync("./db/users","utf8")
                    try{
                         users = JSON.parse(users)
                    }
                    catch(exception) {
                        users = [];
                    }
                    let inUse = false;
                    for(let i = 0;i {
        let body = [];
        request.on("data",(chunk) => {
            body.push(chunk)
        }).on("end",() => {
            body = Buffer.concat(body).toString();
            resolve(body);
        })
    })
}

功能：

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

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

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

    
登录
    

        

            邮箱
            
            
        
        

            密码
            
            
        

        

            
        

    

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

  $("#loginForm").on("submit",(e) => {
        e.preventDefault();
        let hash = {};
        let arg = ["email","password"];
        arg.forEach((name) => {
            let value = $("#loginForm").find(`[name= ${name}]`).val();
            hash[name] = value;
        })
        $("#loginForm").find(".error").each((index,span) => {
            $(span).text("");
        })
        if(hash["email"] === ""){
            $("#loginForm").find("[name = "email"]").siblings(".error").text("请输入邮箱");
            return
        }
        if(hash["password"] === ""){
            $("#loginForm").find("[name = "password"]").siblings(".error").text("请输入密码");
            return
        }

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

     $.post("/login",hash).then(() =>{window.location.href="/"},
         () => {
              alert("登录失败，请重新登录")
          })
    })

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

 else if(path==="/login" && 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;
            var users = fs.readFileSync("./db/users","utf8")
            try{
                users = JSON.parse(users)
            }
            catch(exception) {
                users = [];
            }
            let found ;
            for(let i = 0;i
这里讲到了给浏览器设置cookie，我们就来简单了解一下什么是cookie。
三·cookie
cookie指某些网站为了辨别用户身份、进行 session 跟踪而储存在用户本地终端上的数据（通常经过加密）
服务器通过set-cookie后，给浏览器传了一段识别身份的数据；之后浏览器给次请求都会附上这份cookie数据，服务器以此来验明浏览器的身份。cookie的时效性一般是两天左右，可以自行设置。
通俗的来讲就是cookie就是一个验证身份的门票，服务器给浏览器发了一张门票，浏览器请求数据时需要拿出门票，服务器看到门票后验证了身份，才会同意请求。
这里值得注意的是cookie的作用域domain，cookie也遵守浏览器同源策略，不同域名的cookie的是不一样的。
四·登录后跳转首页
登录界面获取到浏览器设置的cookie，再次向服务器请求跳转到首页时需要附上这段cookie，服务器读取后同意跳转到首页。
功能：
若登录成功，跳转到首页，在首页显示登录邮箱名
1.html部分(首页)：

这是首页
用户: --email--

2.给首页设置路由：
读取cookie值，展示在首页上，显示当前登录的用户邮箱名
 else if(path === "/"){
        let string = fs.readFileSync("./index.html", "utf8")
        let cookies = request.headers.cookie.split("; ");/*这里多出一个空格，要注意*/
        let hash = {};
        for(let i =0 ;i
总结
讲解完实现过程后，我们来总结一下：
当我们进行登录注册时，网页都做了些什么呢？
1.我们进行注册时，浏览器向服务器发送post请求，同时将注册信息传过去；
2.服务器将用户信息存储到本地数据库后，告知浏览器注册成功
3.用户打开登录界面，输入登录信息，向服务器发送post请求
4.服务器读取本地数据库，比对登录信息是否正确，若错误，告知浏览器登录失败；若正确给浏览器设置cookie
5.浏览器向服务器发送get请求，访问首页，附上cookie
6.服务器读取cookie，验证身份后，同意浏览器访问首页
源码
附上一个vue版本带有登录注册功能的备忘录demo
以上是个人观点，如有错误欢迎指出。