• 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存在时和不存在不同显示


  • 相关阅读:
    Linux学习笔记六----------文件传输
    Linux学习笔记五----------文本编辑
    Linux学习笔记四----------远程连接和SSH
    Linux学习笔记三----------Linux进阶知识和命令
    Linux学习笔记二----------Linux基础知识和命令
    ArcGIS API for JavaScript3.16 使用中遇到的问题,及解决方法
    ArcGIS API for JavaScript学习
    echarts容器动态变化高度
    好用的流程图js插件
    jeecg-boot + ant-design-vue开发,希望点击菜单打开新窗口页签
  • 原文地址:https://www.cnblogs.com/easyweb/p/6641729.html
Copyright © 2020-2023  润新知