node.js(node.js+mongoose小案例)_实现简单的注册登录退出
一、前言
通过node.js基本知识对node.js基本知识的一个简单应用
1、注册
2、登录
3、退出
二、基本内容
1、项目结构搭建如图所示
2、这个小案列中用到了art-template子模板以及模板的继承 可以参考官网：art-template.org
发现很多网站的页面的头部和尾部都是一样的，所以我们可以将头部和尾部提取出来，用art-template子模板，弄到一个单独页面中，其他页面继承这个页面
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<title>{{block 'title'}}默认标题{{/block}}</title>
<link rel="stylesheet" href="/node_modules/bootstrap/dist/css/bootstrap.css"> {{block 'head'}}{{/block}}
</head> <body>
{{include '../_partials/header.html'}} <!--用子模板引入头部-->
{{block 'body'}}{{/block}}
{{include '../_partials/footer.html'}} <!--用子模板引入尾部-->
<script src="/node_modules/jquery/dist/jquery.js"></script>
<script src="/node_modules/bootstrap/dist/js/bootstrap.js"></script>
{{block 'script'}}{{/block}}
</body> </html>
3、先安装依赖包快速搭建一个服务：
express
express-art-template
path :可以帮助我们操作路径，这里如果我们的项目放到别人的电脑上，如果用原来的方法就可能存在路径找不到的情况
art-template
var express = require('express')
//引入path包
var path = require('path')
var app = new express();
//配置express-art-template
app.engine('html', require('express-art-template'))
//开放静态资源
app.use('/public/', express.static(path.join(__dirname, './public/')))
app.use('/node_modules/', express.static(path.join(__dirname, './node_modules/')))
app.get('/', function (req, res){
res.render('index.html')
})
app.listen(5000, function (){
console.log('server')
})
4、设计路由
|
路径 |
方法 |
Get参数 |
Post参数 |
是否需要登录 |
备注 |
|
/ |
GET |
渲染首页 |
|||
|
/register |
GET |
渲染注册页 |
|||
|
/register |
POST |
Uername,password,nickname |
处理注册信息 |
||
|
/login |
GET |
渲染登录页 |
|||
|
/login |
post |
Username,password |
处理登录请求 |
||
|
/logout |
get |
退出登录 |
5、将路由写在单独的一个模块里面
（1）搭好路由壳子
var express = require('express')
var router = express.Router()
//渲染首页
router.get('/',function (req, res) {
})
//渲染注册页
router.get('/register',function (req, res) {
})
//处理注册请求
router.post('/register',function (req, res) {
})
//渲染登录页
router.get('/login',function (req, res) {
})
//处理登录页
router.post('/login',function (req, res) {
})
//退出
router.get('/logout',function (req, res) {
})
//挂载导出
module.exports = router
（2）app.js中引入router.js
//引入
var router = require('./router')
//使用
app.use(router)
6、设计mongose数据库模型
（1）注册的时候需要用到mongodb数据库
安装：cnpm install mongoose
引入：var mongoose = require("mongoose")
开启数据库：mongo
（2）根据可能显示的用户信息设计数据库模型，并且将这个模型放到单独的一个models目录下面
var mongoose = require('mongoose')
// 连接数据库
mongoose.connect('mongodb://localhost/test', { useMongoClient: true })
var Schema = mongoose.Schema
var userSchema = new Schema({
email: {
type: String,
required: true
},
nickname: {
type: String,
required: true
},
password: {
type: String,
required: true
},
created_time: {
type: Date,
// 注意：这里不要写 Date.now() 因为会即刻调用
// 这里直接给了一个方法：Date.now
// 当你去 new Model 的时候，如果你没有传递 create_time ，则 mongoose 就会调用 default 指定的Date.now 方法，使用其返回值作为默认值
default: Date.now
},
last_modified_time: {
type: Date,
default: Date.now
},
avatar: {
type: String,
default: '/public/img/avatar-default.png'
},
bio: {
type: String,
default: ''
},
gender: {
type: Number,
enum: [-1, 0, 1],
default: -1
},
birthday: {
type: Date
},
status: {
type: Number,
// 0 没有权限限制
// 1 不可以评论
// 2 不可以登录
enum: [0, 1, 2],
default: 0
}
})
module.exports = mongoose.model('User', userSchema)
数据库模型
（3）在router.js中引入数据库
var User = require('./models/user')
7、数据库模型设计好了之后处理注册事件
注册响应主要包含以下几个逻辑
（1）当用户发送get请求的时候会跳转到注册页面，
（2）用户输入注册信息，输入的注册信息会和数据库中的信息进行查找对比
（3）如果数据库中存在这个用户信息，则提示用户 “用户名已存在”
（4）如果数据库中不存在这用户信息，则可以注册,并将信息保存在session中
（5）注册完成之后页面跳到首页，并且在页面右上角显示用户名， 此时登录/注册按钮隐藏
（1）点击注册的时候跳转到注册页面
router.get('/register',function (req, res) {
res.render('register.html')
})
（2）客户端发送ajax请求，
$('#register-form').on('submit', function (e){
//将提交的表单数据键值对序列化可以提交的字符串
var formData = $(this).serialize()
$.ajax({
url: '/register',
type: 'post',
data: formData,
dataType: 'json',
success: function (data) {
var err_code = data.err_code
if(err_code === 0) {
//如果注册成功，则进行表单重定向
window.location.href('/')
}else if(err_code === 1) {
window.alert('邮箱已存在！')
} else if (err_code === 500) {
window.alert('服务器忙，请稍后重试！')
}
}
})
})
(3)服务端接受到客户端提交过来的数据，将受到的数据到mongose数据库中查询
router.post('/register', function (req, res) {
//保存收到的数据
var body = req.body
//查询
User.findOne({
$or: [
{ email: body.email},
{ nickname: body.nickname}
]
}, function (err, data) {
//判断
if(err) {
//这里一定要响应json格式的字符串，客户端才收的到
return res.status(500).json({
success: false,
message: "服务器出错"
})
}
//如果查询到了，就提示邮箱或者昵称已经存在
if(data) {
return res.status(200).json({
err_code: 1,
message:"邮箱或者用户名已经存在"
})
}
//执行到这里，不存在，就可以注册
new User(body).save(function (err, data) {
if(err) {
return res.status(500).json({
err_code: 500,
message: 'Internal error.'
})
}
res.session.user = body; //这里用express保存注册的信息
return res.status(200).json({
err_code:0,
message: '注册成功'
})
})
})
})
（4）注意点：ajax的dataType是json格式的， 如果服务端给我们响应的数据不是json格式，客户端就接受不到
express中提供了一个json()函数，会自动将字符串转化为json格式
这里用到了express-session,来保存用户信息
5、登录
服务端接收到了请求数据，然后在数据库中进行查询
router.post('/login',function (req, res) {
var body = req.body;
//查找
User.findOne({
email: body.email,
password: body.password},function (err, user){
if(err) {
return res.status(500).json({
err_code:500,
message: 'err'
})
}
if(!user) {
return res.status(200).json({
err_code: 1,
message: '邮箱或者密码错误'
})
}
res.session.user = user //记录此时的登录信息
return res.status(200).json({
err_code: 0,
message: 'success'
})
})
})
客户端接受到了服务端的数据响应
<script>
$('#login_form').on('submit', function (e) { e.preventDefault()
var formData = $(this).serialize()
console.log(formData)
$.ajax({
url: '/login',
type: 'post',
data: formData,
dataType: 'json',
success: function (data) {
console.log(data)
var err_code = data.err_code; if (err_code === 0) {
window.alert('登录成功')
window.location.href='/'
}else if (err_code === 1) {
window.alert('邮箱或密码错误');
}else if(err_code === 500){
window.alert('服务繁忙，稍后请重试')
}
}
})
})
</script>
6、退出的时候只要清除session就可以
//退出
router.get('/logout',function (req, res) {
req.session.user = null;
res.redirect('/')
})
三、总结
1、ajax中的dataType为json, 如果服务器响应的数据步数json格式的，在ajax中接受不到这个信息
2、服务器默认只能重定向只针对同步请求有效， 对异步请求无效
node.js(node.js+mongoose小案例)_实现简单的注册登录退出的更多相关文章
- Node.js基于Express框架搭建一个简单的注册登录Web功能
这个小应用使用到了node.js bootstrap express 以及数据库的操作 :使用mongoose对象模型来操作 mongodb 如果没了解过的可以先去基本了解一下相关概念~ 首先注 ...
- node.js(小案例)_实现学生信息增删改
一.前言 本节内容主要对小案例做一个总结: 1.如何开始搭建小项目 2.路由设计 3.模块应用 4.项目源码以及实现过程github地址: 项目演示如下: 二.主要内容 1.项目的关键性js源码: 项 ...
- node.js小案例_留言板
一.前言 通过这个案例复习: 1.node.js中模板引擎的使用 2.node.js中的页面跳转和重定向 二.主要内容 1.案列演示: 2.案列源码:https://github.com/45612 ...
- node.js(小案例)_使用mongodb对学生信息列表优化
一.前言 1.这篇文章主要对上一篇案列在操作增删改的时候使用mongodb进行优化 2.项目源码(包含上):https://github.com/4561231/crud-express-node.g ...
- JS实现拖拽小案例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 微信小程序_(map)简单的小地图
map地图效果 官方文档:传送门 Page({ data: { markers: [{ iconPath: "/resources/others.png", id: 0, lati ...
- 微信小程序_(视图)简单的swiper容器
swiper容器效果 官方文档:传送门 swiper容器可实现简单的轮播图效果 结构程序 Page({ /** * 页面的初始数据 */ data: { }, /** * 生命周期函数--监听页面加载 ...
- 微信小程序_(视图)简单的scroll-view容器
scroll-view容器效果 官方文档:传送门 scroll-view 可滚动视图区域 scroll-x Boolean false 允许横向滚动 scroll-y Boolean false 允许 ...
- 原生js验证简洁美观注册登录页面
序 一个以js验证表单的简洁的注册登录页面,不多说直接上图 效果 主要文件 完整代码 sign_up.html 注册表单 <!DOCTYPE html> <html lang=&qu ...
随机推荐
- VS2017设置背景主题
一.VS2017设置背景主题 1.下载并安装Color Theme Editor for Visual Studio 2017和MoeIDE (图中红圈中的两个插件,工具-扩展和更新-联机-右上角搜索 ...
- scrapy入门与进阶
Scrapy是用纯Python实现一个为了爬取网站数据.提取结构性数据而编写的应用框架,用途非常广泛. 框架的力量,用户只需要定制开发几个模块就可以轻松的实现一个爬虫,用来抓取网页内容以及各种图片,非 ...
- Marriage Match II HDU - 3081(二分权值建边)
题意: 有编号为1~n的女生和1~n的男生配对 首先输入m组,a,b表示编号为a的女生没有和编号为b的男生吵过架 然后输入f组,c,d表示编号为c的女生和编号为d的女生是朋友 进行配对的要求满足其一即 ...
- 【AGC002E】Candy Piles 博弈论
题目大意 有\(n\)堆糖果,第\(i\)堆有\(a_i\)个. 两个人轮流决策,决策分为两种: 1.选择糖果数最多的一堆糖果,并把这堆糖全吃了. 2.在每堆非空的糖果堆里拿一颗糖吃掉. 吃掉最后一颗 ...
- 【XSY1098】第k小 可持久化trie
题目描述 给你一个长度为\(n\)数列\(a\),有\(m\)次操作: \(1~x\):把所有数异或\(x\) \(2~x\):把所有数与\(x\) \(3~x\):把所有数或\(x\) \(4~l~ ...
- Docker 私有仓库 Harbor registry 安全认证搭建 [Https]
Harbor源码地址:https://github.com/vmware/harborHarbort特性:基于角色控制用户和仓库都是基于项目进行组织的, 而用户基于项目可以拥有不同的权限.基于镜像的复 ...
- HNOI2017 抛硬币 (FakeBeng)
除了队长快跑外最难的题吧. 除了需要写\(exLucas\)之外,还教会了我大量的卡常技巧. 首先\(70\)分就是个直接按题意模拟,易得\(ans=\sum_{j=0}^{b} C_{b}^{j}\ ...
- 【CF671D】Roads in Yusland（贪心，左偏树）
[CF671D]Roads in Yusland(贪心,左偏树) 题面 洛谷 CF 题解 无解的情况随便怎么搞搞提前处理掉. 通过严密(大雾)地推导后,发现问题可以转化成这个问题: 给定一棵树,每条边 ...
- 「HNOI2016」序列 解题报告
「HNOI2016」序列 有一些高妙的做法,懒得看 考虑莫队,考虑莫队咋移动区间 然后你在区间内部找一个最小值的位置,假设现在从右边加 最小值左边区间显然可以\(O(1)\),最小值右边的区间是断掉的 ...
- PHP安装－phpMyAdmin+Discuz
PHP安装-phpMyAdmin+Discuz基于Apache和MySQL安装完成之后继续安装PHP.以构建LAMP动态网站平台.http:./configure --prefix=/usr/loca ...