（一）JavaScript+JSON +JQuery Ajax实现登录

实验内容：

       输入用户名和密码，在数据库查询，如果匹配则出现“登陆成功，即将跳转到主页”，如果无法匹配，则会出现“登陆失败”。

一、在前端设计登陆界面

<span>登录账号</span>
					<a class="guanbi"></a>
				</div>
			</div>
			<div class="min">
				<div class="tc_login">
					<div class="login_register">
						<form id="register-form" target="_top">
							<div align="center">

								<i class="icon-mobile-phone"></i>
								<input type="text" name="name" id="name" required="required" placeholder="用户名"   //前台请求参数name
									autocomplete="off" class="input_yh">

								<input type="password" name="pass" id="pass" required="required" placeholder="密码"    //前台请求参数pass
									autocomplete="off" class="input_mm">

							</div>
							<dd>
								<div class="user">
									<input type="checkbox" name="user" id="user" value="记住用户" class="r_user" />记住用户
									<a href="password.html" target="_blank">忘记密码？</a>
								</div>
							</dd>
							<div align="center">
								<input type="button" id="register-btn" class="button" title="Sign In" value="登录">  //登录按钮的id：register-btn
							</div>

二、在前端实现传输数据：将用jQuery实现了串化的数据传给后端（注：用Ajax实现数据异步传输）

       点击登录按钮，后端以json数据格式把操作返回给前端界面，前端接受之后，根据code的值判断是否登陆成功（code：200——>登陆成功，跳转到主页面；code：400——>显示登陆失败+后端传来的msg信息），进而显示相应的响应。

       用户在form中写完数据后还需要发送一个新的请求到后端用于后端的数据获取，所以我们在此将传数据的请求命名为login

<script>
	$('#register-btn').ready().click(function () { //点击登录按钮触发方法
		// 阻止表单的默认行为
		// e.preventDefault()
		console.log();
		const formData = $('#register-form').serialize()//实现获取数据串化
		console.log(formData)
		$.ajax(
			{
				url: '/user/login',
				method: 'post',
				data: formData,
				dataType: "json",  
				success: function (json) {
					console.log(json)
					if (json.code === 200) {						
						alert("登陆成功！即将跳转到主页...");
						window.location.href = "/user/main";  //实现页面之间的跳转
					}else if (json.code === 400) {  
						console.log(json);
						alert("登陆失败！" + json.msg);
					}
				}

			}
		)


	})
</script>

三、后端实现判断账号密码的正确与否

        获取上一步的login请求字段。

        后端获取前端请求参数，并启动连接池在数据库MYSQL中查询，利用if语句先判断用户是否存在，如果存在则进一步判断密码是否正确，如果不存在则直接传回code：400，msg：用户不存在。

outer.post('/login', function (req, res, next) {
  // 获取请求字段
  console.log('post')
  console.log("33", req);
  var username = req.body.name;//获取前台请求的参数
  var password = req.body.pass;
  console.log(username, password)

  // 启用连接池查询
  pool.getConnection(function (err, connection) {
    //先判断该账号是否存在

    var $sql = "select * from stu where name=?";
    connection.query($sql, [username], function (err, result) {
      var resultJson = result;
      console.log("1", result);
      console.log(resultJson.length);
      if (resultJson.length === 0) {
        result = {
          code: 400,
          msg: '该账号不存在'
        };
        res.json(result);
        connection.release();
      } else {  //账号存在，可以登录，进行密码判断

        var $sql1 = "select PASSWORD from stu where name=?";
        connection.query($sql1, [username], function (err, result) {


          var temp = result[0].PASSWORD;  //取得数据库查询字段值
          console.log(temp);
          if (temp == password) {
            result = {
              code: 200,
              msg: '密码正确'
            };
            req.session.status = {
              username: req.body.name,
              isLogin: true
            }
            // req.session.name=req.body
            // req.session.userid=req.session.name.name
            // req.session.islogin=true
          } else {
            result = {
              code: 400,
              msg: '密码错误'
            };
          }
          console.log(result);
          res.json(result); // 以json形式，把操作结果返回给前台页面
          connection.release();// 释放连接
        });
      }
    });
  });
});

四、界面实现