Express实现页面跳转

之前的思路是页面获取登录名和密码之后，利用Ajax请求传输数据，然后在路由处理里面利用SQL获取数据库数据，进行校验之后利用res.redirect()进行跳转，但是一直出错，出现了好几个问题，下面讲述问题和原因。

1.首先Ajax一般只是用来传输数据，不是用于进行页面跳转

因为Ajax使用之后他是一个完整的一个请求和回调的过程，在这个过程里面只存在一个HTTP表头，如果你重定向就会重复，就会报错。使用Ajax就是在同一个界面的东西，不能重定向到其他界面就打破Ajax的整个请求过程，因为redirect这个函数改变的是Ajax请求中间的定向，这就打破了Ajax整个流程。

所以如果你想做一个登陆界面，那么只有Ajax返回打开下一步的url，然后前端进行调转吧。或者不用Ajax。

2.报错Can’t set headers after they are sent.

例如我在路由处理时候这么写：

// 登陆信息验证
router.all('/test1',function (req,res,next) {

  //接收传输过来的邮箱和密码
  var username = req.query.username;
  var password = req.query.password;

  // username 和 password 都是string类型
  console.log('a '+typeof(username));
  console.log('b '+ password);

  // 连接数据库
  var connection = mysql.createConnection({      //创建mysql实例
      host:'127.0.0.1',
      port:'3306',
      user:'root',
      password:'',
      database:'test'
  });
  connection.connect();
  var sql = 'SELECT passwd FROM users where username = ' + username ;

  connection.query(sql, function (err,result) {

      var result1 = result[0].passwd;

      console.log('3'+result1) // 输出3123

      if(err){
          res.send(500);
          console.log('[SELECT ERROR]:',err.message);
      }

      else{

          if(password == result1){

              //登陆成功，进行页面的跳转
              console.log("登陆成功");
              res.send(200);
          }else{

              res.send(404);
              console.log("密码错误");
          };
      }
  });

  connection.end();

  return res.send(username);
});

就会报错：Can’t set headers after they are sent.，测试了下不能使用多个res.send()，但是按照网上指示，添加return还是出错，这个问题一直没想到解决方法。

3.使用Ajax跳转

上面虽然说使用Ajax无法直接跳转，但是可以利用Ajax传递数据，利用数据的不同通过判断在前端进行跳转。

server.js

/**
 * Created by web-01 on 2018/1/4.
 */
var express=require('express');
var app=express();
var bodyParser=require('body-parser');
var m=require("./init1.js");
var pool=m.pool;

var urlencodedParser=bodyParser.urlencoded({extended:false});

app.use(express.static('public'));


app.get('/',function(req,res){
    res.sendFile(__dirname+"/"+"ex9_1.html");
});

app.get('/jquery.min.js',function(req,res){
    res.sendFile(__dirname+"/"+"jquery.min.js");
});

app.get('/main',function(req,res){
   res.sendFile(__dirname+"/"+"main.html");
});

/*app.get('index.html',function(req,res){
    res.sendFile(__dirname+"/"+"index.html");
});*/

app.post('/login',urlencodedParser,function(req,res){
    var response={
        "uname":req.body.uname,
        "upwd":req.body.upwd
    };
    console.log(response.uname);
    var sql="SELECT * FROM t_user WHERE uname=? AND binary upwd=?";//记得加binary区分大小写
    pool.getConnection((err,conn)=>{
        conn.query(sql,[response.uname,response.upwd],(err,result)=>{
           if(result.length>0){
               res.json({code:1,msg:"登录成功"});
            }else{
               res.json({code:-1,msg:"用户名或密码错误"});
            }
            conn.release();
        });
    })
    //res.end(JSON.stringify(response));
});

app.get('/list',function(req,res){
    var sql="SELECT * FROM test";
    pool.getConnection((err,conn)=>{
        conn.query(sql,(err,result)=>{
        if(result.length>0){
            res.json(result);
            //res.send(result)也可
        }else{
            res.json({code:-1,msg:"用户名或密码错误"});
        }
        conn.release();
    });
    })
});

var server=app.listen(8081,function(){

});

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    用户名：<input type="text" name="uname" id="uname"><br/>
    密码：<input type="password" name="upwd" id="upwd"><br/>
    <input type="submit" id="btn_smt" value="提交">

    <script src="jquery.min.js"></script>
    <script>
        btn_smt.onclick=function(){
            var uname=$("#uname").val();
            var upwd=$("#upwd").val();
            $.ajax({
                type:"post",
                url:"/login",
                data:{uname:uname,upwd:upwd},
                success:function(data){
                    if(data.code>0){
                        alert(data.msg);
                        location.href="/main";
                    }else{
                        alert(data.msg);
                    }
                },
                error:function(){
                    alert("网络故障，请检查");
                }
            });
        }
    </script>
</body>
</html>

main.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <table>
        <thead>
            <tr>
                <td>tid</td>
                <td>tname</td>
            </tr>
        </thead>
        <tbody>

        </tbody>
    </table>

    <script src="jquery.min.js"></script>
    <script>
        $.ajax({
            type:"GET",
            url:"/list",
            success:function(data){
                var html="";
                for(var i=0;i<data.length;i++){
                    html+="<tr>";
                        html+="<td>"+data[i].tid+"</td>";
                        html+="<td>"+data[i].tname+"</td>";
                    html+="</tr>";
                }
                $("tbody").html(html);
            },
            error:function(){
                alert("网络故障，请检查");
            }
        })
    </script>
</body>
</html>

参考文献：

https://segmentfault.com/q/1010000007613619
https://cnodejs.org/topic/53774ffecbcc396349ca1155
https://blog.csdn.net/spfLinux/article/details/78974205

其他可以参考的文章：

https://www.cnblogs.com/Leo_wl/p/4361289.html

Express实现页面跳转

猜你喜欢