express+mongodb实现简单登录注册
login.html代码:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <title>登录</title> <style type="text/css"> *{ margin: 0px; padding: 0px; } body{ width: 100%; height: 100%; background-color: #f5f5f5; } .area-box{ display: flex; flex-direction: column; justify-content: center; align-items: center; margin-top: 100px; } .login-group{ /* width: 100%; */ height: 40px; background-color: white; padding: 10px 30px; } .login-group input{ height: 24px; outline: none; border-radius: 20px; padding-left: 10px; } .login-btn{ margin-top: 20px; } .login-btn button{ width: 200px; height: 30px; line-height: 30px; border-radius: 20px; outline: none; } .register-group{ width:272px; } .item{ width: 100%; padding: 0px; height: 50px; line-height: 50px; } .item a{ text-decoration: none; color: green; font-size: 12px; text-align: left; } </style> </head> <body> <div class="area-box"> <div class="login-group"> <label>用户:</label> <input type="text" name="" id="username" placeholder="请输入用户名" /> </div> <div class="login-group"> <label>密码:</label> <input type="password" name="" id="pwd" placeholder="请输入密码" /> </div> <div class="register-group"> <div class="item"> <p><a href="#" onclick="">还没有账户，注册一个</a></p> </div> </div> <div class="login-btn"> <button type="button" id="login">登录</button> </div> </div> <script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> let username=$("#username") let pwd=$("#pwd") $("#login").click(function(){ console.log("开始") if(username.val().length==0||pwd.val().length==0){ alert("用户或密码不能为空") return; } var getPhone=username.val() var getPwd=pwd.val() var data={ username:getPhone, password:getPwd } console.log(data) $.ajax({ type:"POST", url:"http://localhost:3000/login", data:data, success:res=>{ console.log(res) if(res.code==200){ alert(res.msg) document.location.href="index.html" }else if(res.code==201){ alert(res.msg) document.location.href="login1.html" }else{ alert(res.msg) document.location.href="login1.html" } }, error:err=>{ console.log(err) } }) }) </script> </body> </html>
register.html代码：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <title>登录</title> <style type="text/css"> *{ margin: 0px; padding: 0px; } body{ width: 100%; height: 100%; background-color: #f5f5f5; } .area-box{ display: flex; flex-direction: column; justify-content: center; align-items: center; margin-top: 100px; } .login-group{ /* width: 100%; */ height: 40px; background-color: white; padding: 10px 30px; } .login-group input{ height: 24px; outline: none; border-radius: 20px; padding-left: 10px; } .login-btn{ margin-top: 20px; } .login-btn button{ width: 200px; height: 30px; line-height: 30px; border-radius: 20px; outline: none; } </style> </head> <body> <div class="area-box"> <div class="login-group"> <label>用户:</label> <input type="text" name="" id="username" placeholder="请输入用户名" /> </div> <div class="login-group"> <label>密码:</label> <input type="password" name="" id="pwd" placeholder="请输入密码" /> </div> <div class="login-btn"> <button type="button" id="login">注册</button> </div> </div> <script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> let username=$("#username") let pwd=$("#pwd") $("#login").click(function(){ console.log("开始") if(username.val().length==0||pwd.val().length==0){ alert("用户或密码不能为空") return; } var getPhone=username.val() var getPwd=pwd.val() var data={ username:getPhone, password:getPwd } console.log(data) $.ajax({ type:"POST", url:"http://localhost:3000/register", data:data, success:res=>{ console.log(res) if(res.code==200){ alert(res.msg) document.location.href="index.html" }else if(res.code==201){ alert(res.msg) document.location.href="register1.html" }else{ alert(res.msg) document.location.href="register1.html" } }, error:err=>{ console.log(err) } }) }) </script> </body> </html>
model ——>index.js代码:
const MongoClient = require('mongodb').MongoClient;
const url = 'mongodb://localhost:27017';
const dbName="blog"//数据库
// 数据库的连接方法
function conn(callback){
MongoClient.connect(url,function(err,client){
if(err){
console.log(err)
return;
}else{
const db=client.db(dbName);
callback && callback(db)
client.close();
}
})
}
module.exports={
conn
}
app.js代码:
const express =require("express");
const app=express();
const bodyParser=require("body-parser")
app.use(bodyParser.json())
app.use(bodyParser.urlencoded({
extended:false
}))
const cors=require("cors")
app.use(cors())
const model=require("./model/users.js")
app.listen(3000,()=>{
console.log("app start")
})
app.get("/",(req,res)=>{
model.conn(function(db){
db.collection("bloguser").find().toArray((err,docs)=>{
if(err){
console.log(err)
return;
}
console.log(docs)
res.send(docs)
})
})
})
// 登录
app.post("/login",(req,res)=>{
let login_data={
username:req.body.username,
password:req.body.password
}
// 首先根据用户输入的内容去查询
model.conn(function(db){
db.collection("bloguser").findOne({username:login_data.username},(err,ret)=>{
if(err){
console.log(err)
res.send({
code:400,
msg:"用户登录失败"
})
}
let login_ret_re=ret || {}
if(login_ret_re.username){
res.send({
code:200,
msg:"登录成功"
})
}else{
res.send({
code:201,
msg:"用户或者密码错误"
})
}
})
})
})
// 注册
app.post("/register",(req,res)=>{
let data={
username:req.body.username,
password:req.body.password,
}
model.conn(function(db){
db.collection("bloguser").findOne({username:data.username},(err,ret)=>{
if(err){
console.log("查询失败")
res.send({
code:400,
msg:'用户注册失败,请重试'
})
}
let ret_re=ret || {}
if(ret_re.username){
console.log("该用户名已存在")
res.send({
code:201,
msg:"该用户名已存在"
})
return
}else{
model.conn(function(db){
db.collection("bloguser").insertOne(data,(err,ret_1)=>{
if(err){
console.log(err)
res.send({
code:400,
msg:'用户注册失败,请重试'
})
}
let ret_re_1=ret_1 ||{}
if(ret_re_1.insertedCount==1){
res.send({
code:200,
msg:"注册成功"
})
}else{
res.send({
code:400,
msg:"注册失败"
})
}
})
})
}
})
})
})
