前后台分离开发登录注册

前后台分离开发登录注册

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>