當(dāng)前位置：首頁 > 人文社科 > 生活经验 >内容正文

生活经验

node.js(node.js+mongoose小案例)_实现简单的注册登录退出

發(fā)布時間：2023/11/27 生活经验 42 豆豆

生活随笔收集整理的這篇文章主要介紹了 node.js(node.js+mongoose小案例)_实现简单的注册登录退出小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

一、前言? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?

通過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)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。

上一篇：求一个不想写作业的个性签名。
下一篇：基于uFUN开发板的心率计（一）DMA方