node.js(node.js+mongoose小案例)_实现简单的注册登录退出
一、前言? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?
通過node.js基本知識對node.js基本知識的一個簡單應(yīng)用
? ? ? ? ? ? ? ? ? ? ? ? ? ? 1、注冊
? ? ? ? ? ? ? ? ? ? ? ? ? ? 2、登錄
? ? ? ? ? ? ? ? ? ? ? ? ?? ? 3、退出? ? ? ??? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ??
二、基本內(nèi)容? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?
1、項目結(jié)構(gòu)搭建如圖所示
?
?
2、這個小案列中用到了art-template子模板以及模板的繼承 可以參考官網(wǎng)：art-template.org
? ? ?發(fā)現(xiàn)很多網(wǎng)站的頁面的頭部和尾部都是一樣的，所以我們可以將頭部和尾部提取出來，用art-template子模板，弄到一個單獨頁面中，其他頁面繼承這個頁面
? ?
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><title>{{block 'title'}}默認(rèn)標(biāo)題{{/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、先安裝依賴包快速搭建一個服務(wù)：
? ? ?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'))//開放靜態(tài)資源 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、設(shè)計路由
?
| 路徑 | 方法 | Get參數(shù) | Post參數(shù) | 是否需要登錄 | 備注 |
| / | 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) {})//掛載導(dǎo)出 module.exports = router
? ? ?（2）app.js中引入router.js
??
//引入 var router = require('./router') //使用 app.use(router)
?
6、設(shè)計mongose數(shù)據(jù)庫模型
? ? ?（1）注冊的時候需要用到mongodb數(shù)據(jù)庫
? ? ? 安裝：cnpm install mongoose
? ? ? 引入：var mongoose = require("mongoose")
? ? ? 開啟數(shù)據(jù)庫：mongo
? ? ?（2）根據(jù)可能顯示的用戶信息設(shè)計數(shù)據(jù)庫模型，并且將這個模型放到單獨的一個models目錄下面? ??
var mongoose = require('mongoose')// 連接數(shù)據(jù)庫 mongoose.connect('mongodb://localhost/test', { useMongoClient: true })var Schema = mongoose.Schemavar userSchema = new Schema({email: {type: String,required: true},nickname: {type: String,required: true},password: {type: String,required: true},created_time: {type: Date,// 注意：這里不要寫 Date.now() 因為會即刻調(diào)用// 這里直接給了一個方法：Date.now// 當(dāng)你去 new Model 的時候，如果你沒有傳遞 create_time ，則 mongoose 就會調(diào)用 default 指定的Date.now 方法，使用其返回值作為默認(rèn)值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 沒有權(quán)限限制// 1 不可以評論// 2 不可以登錄enum: [0, 1, 2],default: 0} })module.exports = mongoose.model('User', userSchema)數(shù)據(jù)庫模型
? ? ?（3）在router.js中引入數(shù)據(jù)庫
var User = require('./models/user')
?
7、數(shù)據(jù)庫模型設(shè)計好了之后處理注冊事件
? ? ?注冊響應(yīng)主要包含以下幾個邏輯
? ? ?（1）當(dāng)用戶發(fā)送get請求的時候會跳轉(zhuǎn)到注冊頁面，
? ? ?（2）用戶輸入注冊信息，輸入的注冊信息會和數(shù)據(jù)庫中的信息進(jìn)行查找對比
? ? ?（3）如果數(shù)據(jù)庫中存在這個用戶信息，則提示用戶 “用戶名已存在”
? ? ?（4）如果數(shù)據(jù)庫中不存在這用戶信息，則可以注冊,并將信息保存在session中
? ? ?（5）注冊完成之后頁面跳到首頁，并且在頁面右上角顯示用戶名， 此時登錄/注冊按鈕隱藏
?
?
?
? ? （1）點擊注冊的時候跳轉(zhuǎn)到注冊頁面
router.get('/register',function (req, res) {res.render('register.html') })
? ??
?
? （2）客戶端發(fā)送ajax請求，
$('#register-form').on('submit', function (e){//將提交的表單數(shù)據(jù)鍵值對序列化可以提交的字符串var formData = $(this).serialize()$.ajax({url: '/register',type: 'post',data: formData,dataType: 'json',success: function (data) {var err_code = data.err_codeif(err_code === 0) {//如果注冊成功，則進(jìn)行表單重定向window.location.href('/')}else if(err_code === 1) {window.alert('郵箱已存在！')} else if (err_code === 500) {window.alert('服務(wù)器忙，請稍后重試！')}}}) })
?
? (3)服務(wù)端接受到客戶端提交過來的數(shù)據(jù)，將受到的數(shù)據(jù)到mongose數(shù)據(jù)庫中查詢
router.post('/register', function (req, res) {//保存收到的數(shù)據(jù)var body = req.body//查詢 User.findOne({$or: [{ email: body.email},{ nickname: body.nickname}]}, function (err, data) {//判斷if(err) {//這里一定要響應(yīng)json格式的字符串，客戶端才收的到return res.status(500).json({success: false,message: "服務(wù)器出錯"})}//如果查詢到了，就提示郵箱或者昵稱已經(jīng)存在if(data) {return res.status(200).json({err_code: 1,message:"郵箱或者用戶名已經(jīng)存在"})}//執(zhí)行到這里，不存在，就可以注冊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格式的， 如果服務(wù)端給我們響應(yīng)的數(shù)據(jù)不是json格式，客戶端就接受不到
? ? ? ? ? ? ? ? ? ? ? ? express中提供了一個json()函數(shù)，會自動將字符串轉(zhuǎn)化為json格式
? ? ? ? ? ? ? ? ? ? ? ?這里用到了express-session,來保存用戶信息
?
5、登錄
? ? 服務(wù)端接收到了請求數(shù)據(jù)，然后在數(shù)據(jù)庫中進(jìn)行查詢
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'})}) })
客戶端接受到了服務(wù)端的數(shù)據(jù)響應(yīng)
<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('服務(wù)繁忙，稍后請重試')}}})})</script>
?
6、退出的時候只要清除session就可以
//退出 router.get('/logout',function (req, res) {req.session.user = null;res.redirect('/') })
?
? ??
?
?
三、總結(jié)? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?
1、ajax中的dataType為json, 如果服務(wù)器響應(yīng)的數(shù)據(jù)步數(shù)json格式的，在ajax中接受不到這個信息
2、服務(wù)器默認(rèn)只能重定向只針對同步請求有效， 對異步請求無效
?
轉(zhuǎn)載于:https://www.cnblogs.com/xxm980617/p/10575305.html
總結(jié)
以上是生活随笔為你收集整理的node.js(node.js+mongoose小案例)_实现简单的注册登录退出的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 求一个不想写作业的个性签名。
- 下一篇： 基于uFUN开发板的心率计（一）DMA方