前后台分离开发登录注册

悠悠 2021-10-01 05:34 366阅读 0赞

# 前后台分离开发登录注册 #

## 1. 新建 ##

**初始化–>下载相关模块**  
jquery

## 2. 把相关的html页面写好 ##

## 3. 开始完成注册页面的所有功能 ##

3.1启动数据库（mongodb）  
3.2在后台的js页面中开始准备写注册相关的路由

3.2.1下载相关的模块  express mongoose crypto    
    3.2.2开始搭建服务器与路由  
    3.2.3开始尝试用前台html页面使用ajax来请求 
    **我们刚才写好的路由进行测试并且先把输入框的值发送到node中**  
    3.2.4先测试值是否正常,然后在开始加密数据
    3.2.5开始往数据库存

## 4. 测试注册–>开始完成登录 ##

4.1开始完成登录页面  
4.2使用ajax从登陆页面向后台登录的路由发送数据（使用post）

4.2.1  
       使用post方式发送对于前台页面来说没有问题但是后台在接收post的时候就比较麻烦了 （因为node不知道怎么解析post 所以我们需要使用post的解析模块 body-parser）  
       4.2.2  
       下载post的解析模块 npm install --save body-parser 并且引用  
       4.2.3  
       使用post解析模块  
       4.2.4    
       把这个解析模块注入到post的路由中  
       4.2.5  
       开始接受数据

4.3加密当前钱密码  
4.4数据库查询

## 5. 优化页面效果,比如跳转等待的效果,三秒跳转 ##

## Session的使用 ##

**使用session 必须下载express-session这个模块npm install --save express-session**

# 完善之前的登录注册demo #

## 1. 在用户登录之后 存储一个session，在session里面存储两条数据一个是用户的登录状态，一个是用户名 ##

## 2. 在用户必须登录之后再能访问首页 所以在页面加载完毕之后我会自动的发送一个ajax到后台去查询当前的用户登录状态如果为true那就表明他登录了 反之 帮助用户跳转到登录页面 ##

## 3. 去后台完成session的查询配合首页的ajax ##

**新建了一个路由用来查询登录存储的session**  
**但是注意，打印出来的结果会发现没有之前存的数据（数据存储绝对没有问题）因为跨域了，所以要解决：**

# 解决方式 #

**创建一个用node 创建webserver**

## 1. 创建一个文件夹 ##

## 2. 把你所有的html css img做这些内容放到刚才新建的文件夹中 ##

## 3.在后台中加入中间件用来指定访问静态文件的路径 app.use(express.static(path.join(\_\_dirname, “文件夹名”))); ##

## 4. 运行页面（html页面中引用的内容，比如jquery必须也放到那个文件夹中，修改引用路径） ##

**现在已经全部完毕了，可以访问页面了，启动服务**

## 5. 优化首页的session查询逻辑 ##

### 后台代码： ###

//启动服务
    var express = require("express");
    var app = express();
    //3.引入加密模块
    var crypto = require("crypto");
    //5.引入mongoose模块
    var mongoose = require("mongoose");
    //10.引入post的解析模块body-parser
    var bodyParser = require("body-parser");
    //11.使用bodyParse下的解析post功能
    var uE = bodyParser.urlencoded({
        extended: false
    });
    //15.引用session模块
    var session = require("express-session");
    //16.初始化session
    app.use(session({
        secret: "mgd12345", //设置密钥，内容可以随便写
        cookie: {
            maxAge: 5 * 1000
        }, //设置cookie的过期时间,80s后session和响应的cookie失效过期
        resave: true, //强制保存 如果session没有被修改也要重新保存
        saveUninitialized: false //如果原先没有session那么就设置 否则不设置
    }))
    //19引用path模块
    var path=require("path");
    //18.设置webserver(静态资源文件)
    // 所以要使用path.join(__dirname, "status")来吧文件夹的地址和要读取的文件夹进行拼接用来告诉express
    // 从哪里找静态文件
    // 注意path是一个工具模块（path是内置模块直接引）
    // app.use(express.static(path.join(__dirname, "status")));
    app.use(express.static(path.join(__dirname,"status")));
    //2.解决跨域
    app.use(function (req, res, next) {
        res.header('Access-Control-Allow-Origin', '*');
        res.header('Access-Control-Allow-Headers', 'Content-Type,Content-Length, Authorization, Accept, X-Requested-With , yourHeaderFeild');
        res.header('Access-Control-Allow-Methods', 'PUT, POST, GET, DELETE,OPTIONS');
        next();
    })
    //7.定义集合，不能将集合放到路由内部
    var dbclt = mongoose.model("no1", {
        uname: String,
        upwd: String
    })
    //1.得到前台的数据
    app.get("/reg", function (req, res) {
        var uname = req.query.uname;
        var upwd = req.query.pwd;
        console.log(uname + "---" + upwd);
        //4.开始加密数据
        var mb5Pwd = crypto.createHash('md5').update(upwd).digest('hex');
        console.log(mb5Pwd);
        //6.连接数据库
        mongoose.connect("mongodb://localhost:27017/mgd", {
            useNewUrlParser: true
        }, function (err) {
            if (err) {
                console.log("数据库连接失败" + err);
            } else {
                console.log("数据库连接成功");
                //8.设置存入的数据
                var userdemo = new dbclt({
                    uname,
                    upwd: mb5Pwd
                })
                //9.开始存储
                userdemo.save().then(
                    (ok) => {
                        res.send({
                            mes: "注册成功",
                            status: 200,
                            linkid: 1
                        })
                    },
                    (err) => {
                        res.send({
                            mes: "注册失败",
                            status: 200,
                            linkid: 1
                        })
                    }
                )
            }
        })
        // res.send("ok");
    })
    //把解析模块注入到post的路由当中
    app.post("/login", uE, function (req, res) {
        //12.开始接受前台传过来的数据
        var uname = req.body.uname;
        var upwd = req.body.upwd;
        console.log(uname + "===" + upwd);
        //13.开始加密当前密码
        var mb5Pwd = crypto.createHash('md5').update(upwd).digest('hex');
        // var md5Pwd = crypto.createHash('md5').update(upwd).digest('hex');
        //14.查询数据库
        mongoose.connect("mongodb://localhost:27017/mgd", {
            useNewUrlParser: true
        }, function (err) {
            if (err) {
                console.log("数据库连接失败" + err);
            } else {
                console.log("数据库连接成功");
                dbclt.find({
                    uname: uname,
                    upwd: mb5Pwd
                }).then(
                    (ok) => {
                        // 在查询的时候成功可能有两种结果 第一种查出来值了 第二种没有查出来但是反悔了一个空数组
                        if (ok.length > 0) {
                            // ****17****session步骤（3）
                            req.session.loginok=true,
                            req.session.uname=uname,
                            res.send({
                                mes: "登录成功",
                                status: 200,
                                linkid: 2
                            });
                        } else if (ok.length == 0) {
                            res.send({
                                mes: "登录失败",
                                status: 200,
                                linkid: 3
                            });
                        }
                    },
                    (err) => {
                        res.send({
                            mes: "连接超时，请稍后再试",
                            status: 500,
                            linkid: 4
                        })
                    }
                )
            }
        })
    })
    app.get("/index",function(req,res){
        console.log(req.session);
        if(req.session.loginok==true){
            res.send({mes:"用户登录过",status:200,linkid:8,username:req.session.uname});
        }else{
            res.send({mes:"用户没有登录过",status:200,linkid:9})
        }
    })
    app.listen(3000);

### 注册代码： ###

<!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="jquery/dist/jquery.min.js"></script>
    
        <title>注册</title>
    </head>
    
    <body>
        <input type="text" name="uname" id="uname">
        <br />
        <input type="text" name="pwd" id="pwd">
        <br />
        <input type="button" value="注册" id="btnId" onclick="testf()">
    </body>
    
    </html>
    <script>
        function testf() {
            //得到输入框的值
            var uname = $("#uname").val();
            var pwd = $("#pwd").val();
            console.log(uname + "----" + pwd);
            //向后台发送ajax请求
            $.ajax({
                url: "http://localhost:3000/reg",
                type: "get",
                data: {uname, pwd},
                success(data) {
                    console.log(data);
                }
            })
        }
    </script>

### 登录代码： ###

<!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">
        <title>登录</title>
    </head>
    <body>
        <input type="text" name="uname" id="uname">
        <br/>
        <input type="text" name="pwd" id="pwd">
        <br>
        <input type="button" value="登录" id="btnId">
    </body>
    </html>
    <script src="jquery/dist/jquery.min.js"></script>
    <script>
        $("#btnId").click(function(){
            var uname=$("#uname").val();
            var upwd=$("#pwd").val();
            console.log(uname+"---"+upwd);
            $.ajax({
                type: "post",
                url: "http://localhost:3000/login",
                data: {
                    uname,
                    upwd
                },
                success: function (data) {
                    console.log(data);
                    if(data.linkid==2){
                        alert(data.mes);
                        location.href="index.html";
                    }else{
                        alert(data.mes)
                    }
                }
            });
        })
    </script>

### 首页代码： ###

<!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">
        <title>首页</title>
    </head>
    
    <body>
        <h1>我是首页 用户必须登录之后再能访问我 所以在页面加载完毕之后我会自动的发送一个ajax到后台
            去查询当前的用户登录状态如果为true那就表明他登录了 反之 帮助用户跳转到登录页面
        </h1>
    </body>
    
    </html>
    <script src="jquery/dist/jquery.min.js"></script>
    <script>
        $(document).ready(function () {
            $.ajax({
                type: "get",
                url: "http://localhost:3000/index",
                success: function (data) {
                    console.log(data);
                    if(data.linkid==8){
                        alert("欢迎您，"+data.username);
                    }else if(data.linkid==9){
                        alert("不好意思当前页面仅对会员开放请您登录后访问");
                        location.href="login.html";
                    }
                }
            });
        })
    </script>