Node学习（九）061-管理系统之登录和注册——md5加密 & 前端注册成功跳转登录页 & 前端登录成功跳转首页 & node服务器之post接口写法

Node学习（九）061-管理系统之登录和注册——md5加密 & 前端注册成功跳转登录页 & 前端登录成功跳转首页 & node服务器之post接口写法

八、登录和注册

md5加密官网——https://www.cmd5.com/

登录页效果

8.1 设计用户表

用户名不能重复，所以username字段加入一个唯一索引：

效果图

1

2

解密

解密失败

8.2 完成注册

效果页

前端

注册成功

前端代码：

<!-- 导入md5 -->
<script src="./lib/md5/md5.min.js"></script>


<script>
    // 
    $('.register').click(function () {
      
      
        // 获取到账号和密码
        // console.log($('form').serialize()); 
                //字符串 username=lisi&password=123
        // console.log($('form').serializeArray()); // 数组[{name: 'username', value: 'zhangsan'}, {name: 'password', value: '123'}]
        // console.log(md5('abc' +md5('123')));密码加盐或md5套md5,不易破解
        var data = $('form').serializeArray();
        // 修改data中的密码为加密的密码
        data[1].value = md5(data[1].value);
        // console.log(md5('abc' + '123'));
        // console.log(data);
        // 发送ajax请求，完成注册即可
        $.post('/reg', data, function (res) {
      
      
            // 预定服务器返回的格式： {code: 200, message: '注册成功'}
            alert(res.message);
            if (res.code === 200) {
      
      
                // 注册完毕，跳转到登录页
                location.href = '/login.html';
            }
        }, 'json');
    });
</script>

服务端的接口：

// 6. 完成注册（接收提交过来的账号和密码，然后添加到数据库即可）
app.post('/reg', (req, res) => {
    
    
    console.log(req.body);
    // 写SQL，完成注册
    let sql = 'insert into user set ?';
    // let values = {
    
    
    //     username: ''
    // }
    db(sql, req.body, (err, data) => {
    
    
        if (err) {
    
    
            // 如果提示注册不成功，就 throw err
            res.send({
    
    code: 201, message: '注册失败'});
        } else {
    
    
            res.send({
    
    code: 200, message: '注册成功'});
        }
    });
});

注册成功

执行 git add . 和 git commit -m '完成注册'

8.3 完成登录

前端登录页

登录成功

登录失败

login.html 前端代码：

• 密码还是要使用加密的密码
• 收集表单数据的时候，验证码也收集到了

<!-- 导入md5 -->
<script src="./lib/md5/md5.min.js"></script>
<script>
    // 完成登录
    $('.login').click(function (e) {
      
      
        e.preventDefault();
        var data = $('form').serializeArray();
        // 还要对密码进行加密
        data[1].value = md5(data[1].value);
        // console.log(data);
        $.post('/login', data, function (res) {
      
      
            alert(res.message);
            if (res.code === 200) {
      
      
                // 登录成功，跳转到index.html首页
                location.href = '/index.html';
            }
        }, 'json');
    });
</script>

服务端代码：

// 7. 登录接口
app.post('/login', (req, res) => {
    
    
    console.log(req.body);
    // 提交信息到接口，马上进行验证码验证。验证通过才验证账号和密码（略）

    // 下面验证账号和密码
    let sql = 'select * from user where username = ? and password = ?';
    db(sql, [req.body.username, req.body.password], (err, result) => {
    
    
        if (err) throw err;
        // console.log(result); // 账号密码正确，得到一个非空数组；账号密码错误，得到空数组
        if (result.length > 0) {
    
    
            res.send({
    
    code: 200, message: '登录成功'});
        } else {
    
    
            res.send({
    
    code: 201, message: '登录失败'});
        }
    });
});

执行 git add . 和 git commit -m '完成登录，但是没有使用验证码'