ch4-注册 登陆 实现 cookie使用
1 mysql 回调函数优化
1.1 mysql代码:
config.query(handlerStr, value, function (err, data) { callback && callback(err, data); //回调函数优化 });
1.2 一些请求后还是要指定 回调
如果 post 请求 还是要指定res
reg.js代码
router.post('/', function (req, res) { var sqlInsert = 'INSERT INTO `user` (`id`, `username`, `pass`, `admin`) VALUES (0, ?, ?)', //????????????? sqlSelect = 'SELECT * FROM user where username = ?', user = req.body.userName, pass = req.body.pass; sql(sqlSelect, [user], function (err, data) { //console.log(data); var md5 = crypto.createHash('md5');//指定编码 if(data.length == 0){ //未存在与当前数据用户名相同的可以注册 //最后插入时候加密 var newpass = md5.update(pass).digest('hex'); sql(sqlInsert, [user, newpass], function (err, data) { if(err){ res.locals.result = '<p class="err">注册失败,请重试</p>'; return; } res.locals.result = '<p class="ok">恭喜注册成功</p>'; res.render('login'); }) }else{ //已存在同用户名 不能注册 或直接登录 res.locals.result = '<p class="err">该用户名已被注册</p>'; res.render('reg'); // } }); })
2 注册 form post 提交
router/index.js代码
//注册页面
router.use('/reg', require('./reg')); //当地址为/reg的时候使用reg.js的路由 router/reg.js代码 var express = require('express'), sql = require('../module/mysql'), router = express.Router(); //注册页面 即地址为/reg的时候 router.get('/', function (req, res) { res.render('reg'); //渲染到reg.ejs }); 地址为/reg的时候 router.post('/', function (req, res) { var sqlInsert = 'INSERT INTO `user` (`id`, `username`, `pass`, `admin`) VALUES (0, ?, ?)', //????????????? sqlSelect = 'SELECT * FROM user where username = ?', user = req.body.userName, pass = req.body.pass; sql(sqlSelect, [user], function (err, data) { //console.log(data); if(data.length == 0){ //未存在与当前数据用户名相同的可以注册 sql(sqlInsert, [user, pass], function (err, data) { if(err){ res.locals.result = '<p class="err">注册失败,请重试</p>'; return; } res.locals.result = '<p class="ok">恭喜注册成功</p>'; res.render('login'); //调到登录页面 }) }else{ //已存在同用户名 不能注册 或直接登录 res.locals.result = '<p class="err">该用户名已被注册</p>'; res.render('reg'); //保留在当前页面 } }); }) //导出这个模块 module.exports = router;
views/reg.ejs代码
<div><%- locals.result %></div> <form action="/reg" method="post"> <input type="text" name="userName"> <input type="text" name="pass"> <input type="submit" value="注册"> </form>
</div>
3 登录 reg 地址为/?
3.1
router/index.js代码
//登录页面
router.use('/login', require('./login'));
router/login.js代码
var express = require('express'), router = express.Router(), sql = require('../module/mysql'); //登录页面 router.get('/', function (req, res) { console.log(req.cookies); res.render('login');//渲染到login.ejs页面 }); router.post('/', function (req, res) { var sqlOptStr = 'SELECT * FROM `user` WHERE username = ?', user = req.body['userName'], pass = req.body['pass']; sql(sqlOptStr, [user], function (err, data) { //console.log(data); if(data.length == 0){ //查询结果不存在即该用户名未被注册 res.json({result: 0}); }else{ //存在相同的用户名 var newpass = md5.update(pass).digest('hex'); if( data[0]['pass'] == pass ){ res.cookie('login', {name: user}, {maxAge: 1000*60*60*24}); //设置cookie //session 所有后台页面都是可用访问到得 //保存在服务器上的 //当关闭页面 session都会清空 req.session.admin = Number(data[0]['admin']); //Number 将字符串转换为数字 console.log('管理员'+ req.session.admin); res.json({result: 2}); //成功登陆 }else{ res.json({result: 1});// 密码不对 } } }) }) //导出模块 module.exports = router;
views/login.ejs代码
<div><%- locals.result %></div> <input class="userName form-control" type="text"> <input class="pass" type="password"> <input class="submit btn btn-success" type="submit" value="登录">
//ajax提交
$('.submit').click(function(){ $('#loginAjax input').trigger('blur'); var numError = $('#loginAjax em.err').length; if(numError){ //有错误 return false; }else{ $.ajax({ url: '/login', type: 'post', dataType: 'json', data: { userName: $('.userName').val(), pass: $('.pass').val() }, success: function(data){ //console.log('success: '+ data); //console.log(data.result); var result = data.result, userName = $('.userName').val(); switch(result){ case 0: //未注册过 $('.result').empty() .html('<p>用户名未注册<a href="/reg">请先注册</a></p>'); break; case 1: //密码不存在 $('.result').empty() .html('<p>密码不正确,请重新输入</p>'); break; case 2: $('.result').empty() .html('<p>欢迎回来 '+ userName +'!!!</p>'); setTimeout(function(){ window.location.href="/";; },500) } }, error: function(data){ console.log('error: '+ data); } }) } });
3.2
后台 返回的数据不是 ajax指定的数据的时候 即使成功 也走error
res.json({ //返回给ajax() success用
result: '成功'
})
4 登录成功后保存成功状态
3.1 cookie方式 安装 cookie-parser时
3.2 安装
"cookie-parser": "latest"
3.3 在cookie存在时和不存在不同显示