Node + MVC模式 登陸註冊 小示例

邏輯

MVC模式

 

文件部署

static靜態資源文件（js css img html）放在plugin文件夾下

給js 文件夾下建立base common page plugling

其餘img css相似 

1⃣️ 將公共的頭部導航條 進行抽離  如 header 登錄/註冊 模態框 獨立成塊 而後單個ii插入到公共頭部導航上： 複用性高 獨立性強 可任意搭配 如第二個頁面沒有登錄註冊 只需放置一個header 

2⃣️

3⃣️

 

編寫前端js代碼----獲取input框裏面的值  進行 ajax請求

 ①獲取到input框裏面的值

   首先須要找到各元素 而後給btn加點擊事件使用事件代理的方式 點擊的時候執行一個方法 var 一個對象 username:username.val() password....

存儲用戶名和密碼

②獲取到input框的值之後 進行ajax請求

$.ajax({

    type:"POST",

    url:""//後臺拿接口--------

    data:data//上面獲取的值 --數據

    dataType:"json"//值是以一個json格式

    success:$.proxy(this.handlesuccCb,this)

})

寫一個成功的回調

handle:function(data){

console.log(data)

}

 

 

後臺

 

③開始需求分析

 

如何定義接口格式。。

註冊

接口地址：

/api/user/register------------

 

 

參數：

username:

password:

 

 

返回值：

成功{

status：1，

info：「成功」

}

 

失敗

{

status.0,

info:"失敗"

}

 

④前臺給數據 後臺如何接收？

在路由中書寫js

前臺若是是get請求的話 數據放在req.query 經過url的參數進行提交；post請求是放在 req.body

 

router.get/post("接口地址",(req，res)=>{

console.log(req.query/req.body)

})

console XHR請求頁能夠看到pedding提交的數據 服務器端也接收到數據

 

接口對接成功以後  要開始MVC模式

數據放在控制層Controller 在控制層寫業務邏輯 怎麼放？ 方法寫在model數據庫 提供一個儲存數據的方法  儲存數據須要先鏈接到數據庫dataTool

 

 

api ----回調函數放在控制層

 

 

dataTool

 

 

Model ----數據層 建立了一個供控制層使用的存儲數據的方法

 

 

Controller ----使用數據層的存儲方法

 

 

註冊的信息 須要在服務器查找 斷定length 查找username 存在返回相關username ，沒有返回空。 有就註冊失敗 沒有就能夠成功註冊 須要一個查找的功能   存在會返回一個用戶信息數組對象  不存在則返回空數組

功能----數據層寫方法Moudle

 

User

||

const User=mongoose.mongoose.model('user',{

username:String,

password:String

});

 

const findData = (userInfo,succCb)=>{

User.find(userInfo).then((result)=>{

succCb&&succCb(result)

}）

}

方法一樣要導出供con控制層使用

控制層裏面 是須要先查找後保存

if 用戶名重複 else 註冊成功

 

實際開發中 密碼存在於服務器是加密的  常見的加密

MD5   MD5是一種經常使用的哈希算法，用於給任意數據一個「簽名」。這個簽名一般用一個十六進制的字符串表示

 

const crypto = require('crypto'); const hash = crypto.createHash('md5'); // 可任意屢次調用update():
hash.update('Hello, world!'); hash.update('Hello, nodejs!'); console.log(hash.digest('hex')); // 7e1977739c748beac0c0fd14fd26a544

 

 

SHA1 

若是要計算SHA1，只須要把'md5'改爲'sha1'，就能夠獲得SHA1的結果1f32b9c9932c02227819a4151feed43e131aca40。

還能夠使用更安全的sha256和sha512。

Hmac    hmac算法也是一種哈希算法，它能夠利用MD5或SHA1等哈希算法。不一樣的是，Hmac還須要一個密鑰 Hmac理解爲用隨機數「加強」的哈希算法

AES    AES是一種經常使用的對稱加密算法，加解密都用同一個密鑰。crypto模塊提供了AES支持，可是須要本身封裝好函數

Diffie-Hellman  DH算法是一種密鑰交換協議，它可讓雙方在不泄漏密鑰的狀況下協商出一個密鑰來

 

證書   crypto模塊也能夠處理數字證書。數字證書一般用在SSL鏈接，也就是Web的https鏈接。通常狀況下，https鏈接只須要處理服務器端的單向認證，如無特殊需求（例如本身做爲Root給客戶發認證證書），建議用反向代理服務器如Nginx等Web服務器去處理證書。

 

 

原生js中設置加密運行速度慢 代碼多 

 

node中提供了一種加密 模塊

 

//引入加密模塊

 

const crypto = require('crypto');

//建立一個加密的算法
const hash = crypto.createHash('sha256'); //對數據的一個加密
hash.update(password); //獲得加密之後的數據
userModel.registerSave({username:username,password:hash.digest('hex')},()=>{ res.json({ status:1, info:"成功" })

 

加密的密碼

 

 

 註冊頁面基本完成

 

登陸頁面

 前端代碼

給登陸按鈕加點擊事件用事件代理 

獲取到input框的內容

點擊登陸的時候獲取到input框的值

var data 一個對象存起來

 

console data 查看是否有值

 

需求分析

 

使用ajax傳遞給後臺

和後臺商議url接口 參數 返回值 接口格式。。。

走api路由 /api開頭 而後找到api.js 格式仍是後臺商議的格式

 

而後把api路由裏面的那個回調函數給到控制層

 

使用findData這個方法 比對用戶名是否存在於（判斷result.length）數據庫 比對密碼是否正確 密碼仍是進行加密後的

 

如何長期保持一個登陸的狀態 刷新以後還在

前端cookie存儲不安全 用戶能夠更改裏面的參數 只須要cookie儲存用戶的一個id 而後其餘參數返回給後臺的session session經過判斷id的狀態值 來驗證是否登錄成功

 

Session工做流程

①前端發送登陸狀態給後端 (把用戶的讀寫權限保存在服務器session)

②後端進行驗證若是驗證成功之後 會把你的狀態保存在session中

③後端給前端發送一個cookie字符串 當前用戶的一個

id

④ 判斷一下當前用戶的id值 如1爲登陸狀態 0 非登陸狀態

 

 

百度首頁 登陸帳號 控制檯document.cookie查看到cookie  BD_HOME=1 未登陸 BD_HOME=0 ------id值----登陸狀態

Application 查看cookie 清除全部請求 刷新頁面 會變爲非登陸狀態

 

 

 

 

$ npm install cookie-session

 

在配置app.js中引入session

使用中間件use 對session進行一個配置

 

app.use(cookieSession({
name: 'miao',  任意名字 存儲時的一個名字
secret:"qazxcvbnm",  加密的字符
maxAge:7 * 24 * 60 * 60 * 1000 // 24 hours  存儲的時間
}))

 

去到登陸的方法頁面 控制層 成功時設定req.session.login = true ---login可任意定義

 

服務器返回一個登陸狀態 

 

在header中建立一個方法 傳遞一個ajax請求給服務器

判斷 req.session.login是否爲true 爲true表示已經登錄了

返回一個登陸的json對象 裏面有狀態碼 提示信息

else....

 

這個時候就能夠根據狀態碼來斷定用戶的登陸狀態

若是登錄了 就把登陸的名字給到header 替換 頁面上的「」登陸「」 達到登陸顯示用戶名的效果

 

-------------------整理於yingxiang 20190218