NodeJS -- 简单的实现一个登录功能

 

实现目标：默认起始页面时登录页面，输入账号密码，如果没有此账号那么跳到注册页面，注册成功后进入个人页面。登录时，如果账号密码不匹配，那么跳到错误页面，三秒后跳到登录页面。

我们还需要保证如果用户没有登录，那么就不能进入个人页面（通过url)。简单使用express mongoDB.

 

实现效果图：

此时数据库里面没有任何数据，那么就不会匹配成功，会跳转到注册页面。

点击注册，那么会跳转到个人页面。

个人页面 welcome  用户

在数据库里面多了一个用户admin

浏览器cookie里面设置了username

 

假设我们将cookie删除，那么我们进入main.html(个人页面） 会发什么。没错就会跳到登录页面。

 

我想你大概知道怎么做了吧。

登录时，我们用前端返回的username,password去数据库里面查询，如果匹配成功那么就设置cookie的username，然后跳到个人页面，如果没有此账号那么就跳到注册页面，如果匹配失败，那么就会跳到失败页面

注册时，注册成功后，我们就设置cookie  然后跳到个人页面（注意我们这里没有对账号的唯一性进行检测）

 

看一下demo的结构

model的index,js放的是mongoDB用的模型，views放的是一些模板html(使用express的模板引擎处理）  index.js是入口

先看index.js

const express = require("express");
const path = require("path");
const bodyParser = require("body-parser");
const getModel = require("./model");
const crypto = require("crypto");
const cookieParser = require("cookie-parser");
const app = express();

app.set("views", path.join(__dirname, "views"));
app.set("view engine", "html");
app.engine("html", require("ejs").__express); 

app.use(bodyParser.urlencoded({ extended: true })); //用于解析post参数
app.use(cookieParser()); 

const User = getModel("User"); //获取模型


function isLogin(req, res, next) { //一个中间件 检测cookie上面使用username属性 如果有 那么证明登录成功过 否正跳到登录页面
    const { username } = req.cookies; 
    if (username) { //如果存在
        next();
    } else {
        res.redirect("/login");
    }
}

app.get("/login", function (req, res) { //登录
    res.render("login");
})
app.post("/login", function (req, res) {
    let { username, password } = req.body;
    password = crypto.createHmac("md5", "cyl").update(password).digest("hex"); //加盐然后加密 （准确应该是摘要）
    User.findOne({ username}, function (err, doc) {
        if (err) { //对错误处理
        }
        if (doc) { //查询数据库发现存在 那么就到个人页面
            if (doc.password === password) { //如果密码也匹配
                res.cookie("username", username);
                res.redirect("/main");
                res.end();
            } else {
                
                res.render("error");
            }
        } else {
            res.redirect("/register"); //如果不存在 那么就到注册页面
        }
    })
    
})

app.get("/register", function (req, res) {
    res.render("register");
})
app.post("/register", function (req, res) {
    let { username, password } = req.body;
    password = crypto.createHmac("md5", "cyl").update(password).digest("hex");
    User.create({ username, password }, function (err, doc) {
        if (err) {//对错误处理
        }
        //目前对账号的唯一性不做要求
        if (doc) { //注册成功
            res.cookie("username", username);
            res.redirect("/main");
            res.end();
        }
    })

})

app.get("/main", isLogin, function (req, res) { //通过isLogin中间件来判断是否登录过
    const { username } = req.cookies;
    res.render("main", { username })
})

app.get("/", isLogin, function (req, res) {
    res.redirect("login")
})
app.listen(8080, () => {
    console.log("http://localhost:8080已经打开")
});

最前面是引入一些模块，然后就是express的模板引擎设置 ，然后引入处理post请求参数的中间和cookie的中间件，然后是获取数据库的模型

isLogin中间间件是我们用来判断是否登录的（在get("/main") get("/")使用  然后下面就是路由了

 

几个简单的html

error.html

    
    
    
    


    
对不起，用户名或者密码输入错误! 三秒后页面跳转到登录页面

login.html

    
    
    
    


    
登录页面
    

        用户名：
        密码：
        
    

    
    
    
    


    
注册页面
    

        用户名：
        密码：
        
    

register.html

main.html

    
    
    
    


    
Welcome <%= username %>

然后看一下mode/index.js

 

const mongoose = require("mongoose");
const conn = mongoose.createConnection("mongodb://localhost/test"); //连接数据库

const UserSchema = new mongoose.Schema({ //设置Schema
    username: { //用户名
        type: String,
        required: true
    },
    password: { //密码
        type: String,
        required: true
    },
    rTime: { //注册时间
        type: Number,
        default: Date.now()
    }
})

const User = conn.model("User", UserSchema);

const model = { User };
module.exports = function (modelName) {
    return model[modelName];
}

注意我返回的是一个函数 通过给modelName 来获取响应的model

 

看懂代码 需要了解express的基础使用 路由 中间件 模板引擎等 mongoose的使用 cookie等