一、前言

通过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小案例)_实现简单的注册登录退出的更多相关文章

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

    这个小应用使用到了node.js  bootstrap  express  以及数据库的操作 :使用mongoose对象模型来操作 mongodb 如果没了解过的可以先去基本了解一下相关概念~ 首先注 ...

  2. node.js(小案例)_实现学生信息增删改

    一.前言 本节内容主要对小案例做一个总结: 1.如何开始搭建小项目 2.路由设计 3.模块应用 4.项目源码以及实现过程github地址: 项目演示如下: 二.主要内容 1.项目的关键性js源码: 项 ...

  3. node.js小案例_留言板

    一.前言 通过这个案例复习: 1.node.js中模板引擎的使用 2.node.js中的页面跳转和重定向 二.主要内容 1.案列演示:  2.案列源码:https://github.com/45612 ...

  4. node.js(小案例)_使用mongodb对学生信息列表优化

    一.前言 1.这篇文章主要对上一篇案列在操作增删改的时候使用mongodb进行优化 2.项目源码(包含上):https://github.com/4561231/crud-express-node.g ...

  5. JS实现拖拽小案例

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. 微信小程序_(map)简单的小地图

    map地图效果 官方文档:传送门 Page({ data: { markers: [{ iconPath: "/resources/others.png", id: 0, lati ...

  7. 微信小程序_(视图)简单的swiper容器

    swiper容器效果 官方文档:传送门 swiper容器可实现简单的轮播图效果 结构程序 Page({ /** * 页面的初始数据 */ data: { }, /** * 生命周期函数--监听页面加载 ...

  8. 微信小程序_(视图)简单的scroll-view容器

    scroll-view容器效果 官方文档:传送门 scroll-view 可滚动视图区域 scroll-x Boolean false 允许横向滚动 scroll-y Boolean false 允许 ...

  9. 原生js验证简洁美观注册登录页面

    序 一个以js验证表单的简洁的注册登录页面,不多说直接上图 效果 主要文件 完整代码 sign_up.html 注册表单 <!DOCTYPE html> <html lang=&qu ...

随机推荐

  1. LODOP设置打印机不存在不打印

    LODOP中打印机的选择有优先级的存在,如果程序中指定的是错误的打印机,那么会走下一个优先级,这样,就可能存在选择了打印机无效,从默认打印机打印出来了,可以在代码里加判断避免这一点. 打印机优先级简介 ...

  2. Jenkins+PowerShell持续集成环境搭建(八)邮件通知

    1. 默认邮件功能: Jenkins自带的邮件功能比较简单,配置如下: 设置默认发件人地址: 2. Email Extension Plugin 为了能够更加灵活地使用邮件功能,需要安装Email E ...

  3. hdu-2222(ac自动机模板)

    题意:给你一个长度为n的单词表,一个文本串,问你这个文本串中出现了单词表中多少个单词: 解题思路:ac自动机的模板题,可以直接当模板用: 代码: #include<iostream> #i ...

  4. poj-1273(最大流)

    题解:纯板子题... EK算法 #include<iostream> #include<algorithm> #include<cstring> #include& ...

  5. hdu1839(最小生成树)

    题意:字面意思: 思路:就是多了一个前提,有些点之间可能有边,有两个处理方法,一个是有边的,这条边权值归零,另一个是,先一次循环用并查集过一遍: 代码:(用的是第一种方法) #include<i ...

  6. ☆ [POJ2559] Largest Rectangle in a Histogram 「单调栈」

    类型:单调栈 传送门:>Here< 题意:给出若干宽度相同的矩形的高度(条形统计图),求最大子矩形面积 解题思路 单调栈的经典题 显然,最终的子矩形高度一定和某一个矩形相等(反证).因此一 ...

  7. 洛谷P1402 酒店之王

    传送门:>Here< 题意:有N个人去酒店,酒店共有P个房间,Q道菜.已知每个人喜欢特定的几个房间和几道菜,一个人是满意的当且仅当住了喜欢的房间,吃了喜欢的菜(一个人只能选一个房间一道菜) ...

  8. Codeforces510 C. Fox And Names

    Codeforces题号:#510C 出处: Codeforces 主要算法:判环+拓扑 难度:4.2 思路分析: 要是把这道题联系到图上就很容易想了. 如何建图?由于最后要求名字满足字典序,所以不妨 ...

  9. 【XSY2472】string KMP 期望DP

    题目大意 给定一个由且仅由字符'H','T'构成的字符串\(S\). ​ 给定一个最初为空的字符串\(T\) ,每次随机地在\(T\)的末尾添加'H'或者'T'. 问当\(S\)为\(T\)的后缀时, ...

  10. 【BZOJ1426】收集邮票 期望DP

    题目大意 有\(n\)种不同的邮票,皮皮想收集所有种类的邮票.唯一的收集方法是到同学凡凡那里购买,每次只能买一张,并且买到的邮票究竟是\(n\)种邮票中的哪一种是等概率的,概率均为\(\frac{1} ...