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小案例)_實現簡單的註冊登錄退出