注册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>
其中需要注意的是
- form表单的完整性!必需的 action 属性规定当提交表单时,向何处发送表单数据。
- 绝对 URL - 指向其他站点
比如 src=“www.example.com/example.html”) - 相对 URL - 指向站点内的文件
(比如 src=“example.htm”)
- input中的name,value
- name属性:
name 属性用于对提交到服务器后的表单数据进行标识,或者在客户端通过 JavaScript 引用表单数据。
只有设置了 name 属性的表单元素才能在提交表单时传递它们的值。 - value属性
这里value的作用主要是用于js中的交互操作,所以此时的value一般设置为与输入相关的值
- 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
})
})
})
- 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)
(取自对黑马视频的学习)
这个登录注册是最简单的一种,如若发现错误,欢迎指正!
这篇博客介绍了如何使用Node.js实现最简单的登录注册功能。重点讲解了HTML表单的构建,包括action属性、相对与绝对URL、input的name和value属性,以及label的for属性。还提到了GET与POST请求的区别,如安全性、数据量限制和执行效率。最后,提到了MongoDB作为数据库以及相关的user.js和students.js文件。这是一个基于黑马视频学习的基础教程,欢迎指出任何错误。

2323

被折叠的 条评论
为什么被折叠?



