快速了解node的express框架mongodb数据库token保持用户登录状态结合ajax的小案例

fyc-Away

于 2020-04-19 23:15:05 发布

阅读量294

点赞数 3

本文链接：https://blog.csdn.net/fyc_away/article/details/105621870

版权

前期准备

使用express和路由快速搭建服务器，以及客户端的三个简单页面

注册页面

  <!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>注册页面</title>
</head>
<body>
   <div class="box">
       用户名: <input class="uname" type="text" placeholder="请输入用户名"><br>
       密 码 ：<input class="upass" type="password" placeholder="请输入密码"><br>
       <input class="btn" type="submit" value="注册"><span class="txt"></span>
   </div>
</body>
</html>

登录页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录页面</title>
</head>
<body>
    <div class="box">
        用户名: <input class="uname" type="text" placeholder="请输入用户名"><br>
        密 码 ：<input class="upass" type="password" placeholder="请输入密码"><br>
        <input class="btn" type="submit" value="登录"><span class="txt"></span>
    </div>
</body>
</html>

首页

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>首页</title>
</head>
<body>
    <h1>hello world</h1>
</body>
</html>

服务器搭建

服务器代码

// 引入express模块
const express=require("express");
//使用express模块
const app=express();
// 引用自定义路由模块
const user=require("./myRouter/router");
// 允许跨域
app.use("/",(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();//这里不要忘了
})
//中间件
app.use("/user",user);
//监听端口
app.listen(9999);//自定义，超过六千好一点

路由模块

const express=require("express");
// 使用路由
const router=express.Router(); //Router大写
// 创建注册路由
router.post("/register",(req,res)=>{
    res.send({msg:"我是注册"})
});
// 创建登录路由
router.post("/login",(req,res)=>{
    res.send({msg:"我是登录"})
})
// 创建首页路由
router.post("/index",(req,res)=>{
    res.send({msg:"我是首页"})

})

// 暴露出去
module.exports=router;

案例开始

注册页面在加载完毕后，输入数据并点击注册发送ajax给后台，并把数据一起发送，为了方便，这里我们使用jQuery

<script src="../node_modules/jquery/dist/jquery.min.js"></script>
<script>
    $(()=>{
        $(".btn").click(()=>{
            // 获取输入框的值
            var uname=$(".uname").val();
            var upass=$(".upass").val();
            // 发送ajax
            $.ajax({
                url:"http://localhost:9999/user/register",
                type:"post",
                data:{uname,upass},
                success(res){
                    console.log(res);
                    
                }
            })
        })
    })
</script>

后台接收到客户端请求，将数据存入数据库

路由代码

const express=require("express");
// 使用路由
const router=express.Router(); //Router大写
// 引用body-parser模块
const parser=require("body-parser");
// 获取post数据解析器 并传入路由当第二个参数
const uE=parser.urlencoded({extended:false});
// 引入自定义数据库模块
const col=require("./db");
// 引入crypto模块进行加密
const crypto=require("crypto");
// 创建注册路由
router.post("/register",uE,(req,res)=>{
    // post请求数据需要body-parser创建的解析器才能获取
    // 将密码进行加密
    const upass=crypto.createHash("md5").update(req.body.upass).digest("hex");
    // 对数据库进行增加操作
    var newUser=new col({
        uname:req.body.uname,
        upass:upass
    })
    newUser.save().then((ok)=>res.send({status:200,msg:"注册成功"})
    ).catch((err)=>res.send({status:500,msg:"注册失败"}));
});
// 创建登录路由
router.post("/login",(req,res)=>{
    res.send({msg:"我是登录"})
})
// 创建首页路由
router.post("/index",(req,res)=>{
    res.send({msg:"我是首页"})

})

// 暴露出去
module.exports=router;

数据库代码

// 数据库
// 引入mongoose模块
const mongoose=require("mongoose");
// 连接数据库
mongoose.connect("mongodb://localhost:27017/fyc",{ useNewUrlParser: true ,useUnifiedTopology: true});//第二个参数用来解决警告问题，可不加
// 连接对象
const db=mongoose.connection;
// 监听连接状态
db.on("err",console.error.bind(console,"连接失败"));
db.once("open",()=>console.log("连接成功"));
//实例化Schema对象，用来操作数据库
const schema=new mongoose.Schema({
    uname:{type:String},
    upass:{type:String}
});
// 创建一个集合
const col=mongoose.model("users",schema);
// 暴露出去
module.exports=col;

注册页面根据后台返回数据进行相应判断

 $(()=>{
        $(".btn").click(()=>{
            // 获取输入框的值
            var uname=$(".uname").val();
            var upass=$(".upass").val();
            // 发送ajax
            $.ajax({
                url:"http://localhost:9999/user/register",
                type:"post",
                data:{uname,upass},
                success(res){
                    // 判断返回的数据
                    if(res.status==200){
                        var i=3;
                        setInterval(()=>{
                            $(".txt").text(`${i}秒后跳转`);
                            i--;
                            if(i==0){
                                // 去登录页面
                                location.href="login.html";
                            }
                        },1000)
                    }else{
                            $(".txt").text("注册失败");
                            }                    
                }
            })
        })
    })

注册成功跳转到登录页面

登录页面发送ajax进行登录
后台接受到数据到数据库中寻找
找到后设置token并返回给客户端
登录页面根据返回数据判断，登录成功把token存起来,并跳转到首页
登陆页面代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录页面</title>
</head>
<body>
    <div class="box">
        用户名: <input class="uname" type="text" placeholder="请输入用户名"><br>
        密 码 ：<input class="upass" type="password" placeholder="请输入密码"><br>
        <input class="btn" type="submit" value="登录"><span class="txt"></span>
    </div>
</body>
<script src="../node_modules/jquery/dist/jquery.min.js"></script>
<script>
    $(".btn").click(()=>{
        var uname=$(".uname").val();
        var upass=$(".upass").val();
        $.ajax({
            url:"http://localhost:9999/user/login",
            type:"post",
            data:{uname,upass},
            success(res){
                // 登录成功后存储token，跳转到首页
                if(res.status==200){
                    $(".txt").text(`${res.msg}`);
                    //存储token 
                    localStorage.setItem("token",res.token)
                    setTimeout(()=>{
                        location.href="index.html";
                    },1000)
                }
                
            }
        })
    })
</script>
</html>

路由代码

const express=require("express");
// 使用路由
const router=express.Router(); //Router大写
// 引用body-parser模块
const parser=require("body-parser");
// 获取post数据解析器 并传入路由当第二个参数
const uE=parser.urlencoded({extended:false});
// 引入自定义数据库模块
const col=require("./db");
// 引入crypto模块进行加密
const crypto=require("crypto");
// 引入jsonwebtoken
const jwt=require("jsonwebtoken");
// 创建注册路由
router.post("/register",uE,(req,res)=>{
    // post请求数据需要body-parser创建的解析器才能获取
    // 将密码进行加密
    var upass=crypto.createHash("md5").update(req.body.upass).digest("hex");
    // 对数据库进行增加操作
    var newUser=new col({
        uname:req.body.uname,
        upass:upass
    })
    newUser.save().then((ok)=>res.send({status:200,msg:"注册成功"})
    ).catch((err)=>res.send({status:500,msg:"注册失败"}));
});
// 创建登录路由
router.post("/login",uE,(req,res)=>{
    var upass=crypto.createHash("md5").update(req.body.upass).digest("hex");
    col.find({uname:req.body.uname,upass}).then((ok)=>{
        if(ok.length>0){
            // 查询到了，登录成功，设置token
            var obj={
                ok:true
            }
            // 自定义密文，越乱越好
            var cip="aihocaicnkaucb";
            //生成token
            var token=jwt.sign(obj,cip);
            res.send({
                status:200,
                msg:"登录成功",
                token
            })
        }        
    }).catch((err)=>{
        res.send({status:500,msg:"用户名或密码错误"};
    })
})
// 创建首页路由
router.post("/index",(req,res)=>{
    res.send({msg:"我是首页"})
})
// 暴露出去
module.exports=router;

首页判断用户是否登陆

页面加载完成获取存储的token，发送ajax传送给后台
后台判断接受的数据，返回相应结果
客户端在成功回调函数判断用户是否登录
首页代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>首页</title>
</head>
<body>
    <h1>hello world</h1>
</body>
<script src="../node_modules/jquery/dist/jquery.min.js"></script>
<script>
    $(()=>{
        var token=localStorage.getItem("token");
        $.ajax({
            url:"http://localhost:9999/user/index",
            type:"post",
            data:{
                token
            },
            success(res){
                if(res.status!=200){
                    alert("当前是会员页面，请先登录后访问，谢谢");
                    location.href="login.html"
                }
            }
        })
    })
</script>
</html>

后台代码

const express=require("express");
// 使用路由
const router=express.Router(); //Router大写
// 引用body-parser模块
const parser=require("body-parser");
// 获取post数据解析器 并传入路由当第二个参数
const uE=parser.urlencoded({extended:false});
// 引入自定义数据库模块
const col=require("./db");
// 引入crypto模块进行加密
const crypto=require("crypto");
// 引入jsonwebtoken
const jwt=require("jsonwebtoken");
// 创建注册路由
router.post("/register",uE,(req,res)=>{
    // post请求数据需要body-parser创建的解析器才能获取
    // 将密码进行加密
    var upass=crypto.createHash("md5").update(req.body.upass).digest("hex");
    // 对数据库进行增加操作
    var newUser=new col({
        uname:req.body.uname,
        upass:upass
    })
    newUser.save().then((ok)=>res.send({status:200,msg:"注册成功"})
    ).catch((err)=>res.send({status:500,msg:"注册失败"}));
});
// 创建登录路由
router.post("/login",uE,(req,res)=>{
    var upass=crypto.createHash("md5").update(req.body.upass).digest("hex");
    col.find({uname:req.body.uname,upass}).then((ok)=>{
        if(ok.length>0){
            // 查询到了，登录成功，设置token
            var obj={
                ok:true
            }
            // 自定义密文，越乱越好
            var cip="aihocaicnkaucb";
            //生成token
            var token=jwt.sign(obj,cip);
            
            res.send({
                status:200,
                msg:"登录成功",
                token
            })
        }        
    }).catch((err)=>{
        res.send({status:500,msg:"用户名或密码错误"})
        
    })
})
// 创建首页路由
router.post("/index",uE,(req,res)=>{
    var token=req.body.token;
    //此处密文必须和自己先前定义的一致
    var cip="aihocaicnkaucb";
        // 解码
        jwt.verify(token,cip,(err,data)=>{
            //判断数据
            if(data==undefined){
                res.send({status:500,msg:"用户非法访问·"});
            }
            if(data.ok){
                res.send({status:200,msg:"用户已登录"});
            }else{
                res.send({status:400,msg:"用户未登录"})
            }
        })
})

// 暴露出去
module.exports=router;

最后最后最后，没了，这样一个特别水的小案例就做完啦

弱弱的问一句，可以点个赞吗小哥哥小姐姐,不要下次一定，谢谢
在这里插入图片描述

fyc-Away

关注

3
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
快速了解node的express框架mongodb数据库token保持用户登录状态结合ajax的小案例

前期准备使用express和路由快速搭建服务器，以及客户端的三个简单页面注册页面 <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initia...
复制链接

扫一扫