Node.Js实现最最最简单的登录注册

这篇博客介绍了如何使用Node.js实现最简单的登录注册功能。重点讲解了HTML表单的构建,包括action属性、相对与绝对URL、input的name和value属性,以及label的for属性。还提到了GET与POST请求的区别,如安全性、数据量限制和执行效率。最后,提到了MongoDB作为数据库以及相关的user.js和students.js文件。这是一个基于黑马视频学习的基础教程,欢迎指出任何错误。

注册HTML

<div class="container">
    <form class="form-signin" action="/register" method="post">
        <h2 class="form-signin-heading">用户注册</h2>
        <label for="account" class="sr-only">账号</label>
        <input type="text" id="account" name="account" class="form-control" placeholder="请输入账号" required autofocus>
        <label for="password" class="sr-only">密码</label>
        <input type="password" id="password" name="password" class="form-control" placeholder="密码" required>
        <input class="btn btn-lg btn-primary btn-block" type="submit" value="提交">
    </form>
</div>

其中需要注意的是

  1. form表单的完整性!必需的 action 属性规定当提交表单时,向何处发送表单数据。
  • 绝对 URL - 指向其他站点
    比如 src=“www.example.com/example.html”)
  • 相对 URL - 指向站点内的文件
    (比如 src=“example.htm”)
  1. input中的name,value
  • name属性:
    name 属性用于对提交到服务器后的表单数据进行标识,或者在客户端通过 JavaScript 引用表单数据。
    只有设置了 name 属性的表单元素才能在提交表单时传递它们的值。
  • value属性
    这里value的作用主要是用于js中的交互操作,所以此时的value一般设置为与输入相关的值
  1. label中的for
  • for属性
    for 属性规定 label 与哪个表单元素绑定。

注册router.js

//渲染注册页面
router.get('/register', function (req, res) {
    res.render('register.html')
})

router.post('/register', function (req, res, next) {
    var body = req.body
    User.findOne({
        $or: [{
            account: body.account
        },
        {
            newname: body.newname
        }
        ]
    }, function (err, data) {
        if (err) {
            return next(err)
        }
        if (data) {
            res.send("<script>location.href='/students'</script>")
        }
        body.password = md5(md5(body.password))
        new User(body).save(function (err, user) {
            if (err) {
                return next(err)
            }
            req.session.user = user
        })
    })
})
  1. get与post的区别
  • Get是不安全的,因为在传输过程,数据被放在请求的URL中;Post的所有操作对用户来说都是不可见的。
  • Get传送的数据量较小,这主要是因为受URL长度限制;Post传送的数据量较大,一般被默认为不受限制。
  • Get限制Form表单的数据集的值必须为ASCII字符;而Post支持整个ISO10646字符集。
  • Get执行效率却比Post方法好。Get是form提交的默认方法。

同理登陆的实现如下:
登录HTML

<div class="container">
    <form class="form-signin" action="/login" method="post">
        <h2 class="form-signin-heading">请登录</h2>
        <label for="account" class="sr-only">账号</label>
        <input type="text" id="account" name="account" class="form-control" placeholder="请输入账号" required autofocus>
        <label for="password" class="sr-only">密码</label>
        <input type="password" id="password" name="password" class="form-control" placeholder="密码" required>
        <button class="btn btn-lg btn-primary btn-block" type="submit">登录</button>
        <button class="btn btn-lg btn-primary btn-block"><a href="/register" style="text-decoration: none">注册</a></button>
    </form>
</div>

登录router.js

//渲染登录页面
router.get('/login', function (req, res) {
    res.render('login.html')
})

router.post('/login', function (req, res, next) {
    var body = req.body
    User.findOne({
        account: body.account,
        password: md5(md5(body.password))
        //md5对密码进行加密
    }, function (err, user) {
        if (err) {
            return next(err)
        }

        if (!user) {
            return res.status(500).send('Server error.')
        }
        req.session.user = user
        res.redirect("/students");
    })
})

数据库mongoDB
user.js

var mongoose = require('mongoose')

mongoose.connect('mongodb://localhost/itcast', { useNewUrlParser: true,useUnifiedTopology: true })

var Schema = mongoose.Schema

var userSchema = new Schema({
    account: {
        type: Number,
        required: true
    },
    password: {
        type: String,
        required: true
    },
    newname:{
        type: String,
    }
})

module.exports = mongoose.model('User', userSchema)

students.js

var mongoose = require('mongoose')

mongoose.connect('mongodb://localhost/itcast', { useNewUrlParser: true,useUnifiedTopology: true })

var Schema = mongoose.Schema

var studentSchema = new Schema({
    name: {
        type: String,
        required: true
    },
    gender: {
        type: Number,
        enum: [0, 1],
        default: 0
    },
    age: {
        type: Number
    },
    hobbies: {
        type: String
    }
})

// 直接导出模型构造函数
module.exports = mongoose.model('Student', studentSchema)

(取自对黑马视频的学习)
这个登录注册是最简单的一种,如若发现错误,欢迎指正!

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值