快速了解node的express框架mongodb数据库token保持用户登录状态结合ajax的小案例
前期准备
使用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;
最后最后最后，没了，这样一个特别水的小案例就做完啦
弱弱的问一句，可以点个赞吗小哥哥小姐姐,不要下次一定，谢谢
