express+mongodb实现简单登录注册

Posted 山吹同学

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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:"注册失败"
                            })
                        }
                        
                    })
                })
            }
        })
    })
})

 

以上是关于express+mongodb实现简单登录注册的主要内容，如果未能解决你的问题，请参考以下文章

express+vue+mongodb+session 实现注册登录

使用node+express+mongodb实现用户注册登录和验证功能

mongodb做一个简单的注册登录效果

王者荣耀界面登录注册验证——express+mongodb

node.js基于express框架搭建一个简单的注册登录Web功能

Node.js + Express 4.x + MongoDB 构建登录注册