Node + MVC模式登陆注册小示例

时间 2019-11-12

标签 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 ----数据层建立了一个供控制层使用的存储数据的方法javascript

Controller ----使用数据层的存储方法css

注册的信息须要在服务器查找断定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:"成功" })

加密的密码html

注册页面基本完成前端

登陆页面

前端代码

给登陆按钮加点击事件用事件代理

获取到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值如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