4.用户登录实现

4.1.用户登录实现思路

1 用户输入登录信息，点击登录的时候把用户登录的这些信息收集起来，然后组装数据通过ajax方式发送到后台

2 后台接到用户输入的登录信息，把这些信息拿去和数据库中的数据做比对，如果成功返回成功信息，如果失败返回失败信息

3 后台返回信息给前台页面，在前台页面中做相应的逻辑处理

4.2.收集用户登录信息并且发送到后台

<script>
        var oBtn = document.getElementById('btn');
        var oPass = document.getElementById('password');
        var oUser = document.getElementById('username');
        oBtn.onclick = function () {
          ajax({
            method: 'post',
            url: '/login',
            data: 'username='+oUser.value+'&password='+oPass.value,
            success: function (result) {
             console.log(result)
            }
          })
        }
    </script>

4.3.接收用户登录信息和后台做比对

if(url_obj.pathname === '/login' && req.method === 'POST'){
    var user_info = '';
    req.on('data',function (chunk) {
      user_info+=chunk;
    });
    req.on('end', function (err) {
      res.setHeader('content-type', 'text/html;charset=utf-8');
      var user_obj = queryString.parse(user_info);
      if(!err){
        var sql = 'SELECT * FROM admin WHERE username="'+user_obj.username+'" AND password="'+user_obj.password+'"';
        connection.query(sql, function (error, result) {
          if(!error && result.length !== 0) {
            res.write('{"status":0, "message": "登录成功"}');
          }else{
            res.write('{"status":1, "message": "用户名或者密码不正确"}')
          }
          res.end();
        });
      }
    })
    return;
  }

4.4.前端收到后台发送的信息，根据信息做具体业务处理

var oBtn = document.getElementById('btn');
var oPass = document.getElementById('password');
var oUser = document.getElementById('username');
oBtn.onclick = function () {
    ajax({
    method: 'post',
    url: '/login',
    data: 'username='+oUser.value+'&password='+oPass.value,
    success: function (result) {
        if (result.status === 0){
        window.location.href = '/admin';
        }else{
        alert(result.message);
        }
    }
    })
}

5.客户列表渲染

5.1.新建数据表

数据表user的规划字段如下：

id int primary key auto_increment,
username varchar(30) not null,
email varchar(30) not null,
phone char(11) not null,
qq char(11) not null

新建完成后手动添加几条数据

5.2.发送请求获取数据

在admin.html文件中发送ajax请求

<script>
 //获取表格数据
    ajax({
      method: 'get',
      url: '/list',
      success: function (result) {
        console.log(result)
       }
    });
</script>

5.3.后台接收请求，并从数据库中查询出数据，返回给前端页面

//  返回整个表格数据
if(url_obj.pathname === '/list' && req.method === 'GET'){
    var sql = 'SELECT * FROM user';
    connection.query(sql, function (error, result) {
        if(!error && result){
            res.setHeader('content-type','text/plain;charset=utf-8');
            res.write(JSON.stringify(result));
            res.end();        }else {
            console.log(error)
        }
    })
    return;
}

5.4.前端接收到后台返回的数据，生成表格

 //获取表格数据
    ajax({
      method: 'get',
      url: '/list',
      success: function (result) {
        for(var i=0; i<result.length;i++){
          var oTr = document.createElement('tr');
          for(var item in result[i]){
            var oTd = document.createElement('td');
            oTd.innerHTML = result[i][item];
            oTr.appendChild(oTd);
          }
          var oP = document.createElement('td');
          oP.innerHTML = '<button class="btn btn-primary ">修改</button>\n' +
              '<button class="btn btn-danger">删除</button>';
          oTr.appendChild(oP);
          oTable.appendChild(oTr);
        }
      }
    });

螺钉课堂视频课程地址：http://edu.nodeing.com