简单登录(1)-CFANZ编程社区

LoginServlet类

package com.ffyc.webback.servlet;

import com.ffyc.webback.dao.LoginDao;
import com.ffyc.webback.model.User;
import com.google.gson.Gson;
import com.sun.media.sound.SoftTuning;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
import java.io.IOException;


public class LoginServlet extends HttpServlet {


    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {

        //接收表单请求数据
          req.setCharacterEncoding("utf-8");
          String account  = req.getParameter("account");
          String password = req.getParameter("password");
          System.out.println(account+":"+password);

         //处理 把账号,密码传递到 Dao层   与数据库进行交互查询,返回一个结果
          LoginDao loginDao = new LoginDao();

         resp.setHeader("Content-Type","text/html;charset=utf-8");

        try {
            User user = loginDao.login(account,password);
            if(user==null){
                resp.getWriter().println(0);
            }else{

                //响应的数据格式要发生变化  json
                /*
                   后端向前端响应数据时,大家都遵守一个规范,统一的格式(json),
                   两种语言对象结构不同的, 重点是数据的传输
                   java对象 ---> json格式的字符串 ---->前端--->js转为js对象
                   "{id:1,account:'admin',passsword:'qqqq'}"  --> 表示一个java对象
                   [{id:1,account:'admin',passsword:'qqqq'},{id:1,account:'admin',passsword:'qqqq'}]
                 */
               
                Gson gson = new Gson();
                String json = gson.toJson(user);
                resp.getWriter().println(json);//直接打印对象,默认调用对象toString()

            }
        } catch (Exception e) {
            e.printStackTrace();
            resp.getWriter().println(1);
        }
    }

  
   
}

LoginDao

package com.ffyc.webback.dao;

import com.ffyc.webback.model.User;

import java.sql.*;

public class LoginDao {

     public User login(String account,String password) throws ClassNotFoundException, SQLException {
          Connection connection = null;
          PreparedStatement ps = null;
          ResultSet rs = null;
          User user = null;
          try {
               Class.forName("com.mysql.cj.jdbc.Driver");
               String url = "jdbc:mysql://127.0.0.1:3306/web?characterEncoding=utf8&useSSL=false&serverTimezone=Asia/Shanghai";
                connection = DriverManager.getConnection(url,"root","12345");
                ps = connection.prepareStatement("  SELECT id,account FROM USER WHERE account = ? AND PASSWORD = ?");
               ps.setObject(1,account);
               ps.setObject(2,password);
                rs =  ps.executeQuery();
                       while(rs.next()){
                            user = new User();
                            user.setId(rs.getInt("id"));
                            user.setAccount(rs.getString("account"));
                            //.....
                            return user;
                       }
                       return user;
          }finally {
                if(rs!=null){
                     rs.close();
                }
               if(ps!=null){
                    ps.close();
               }
               if(connection!=null){
                    connection.close();
               }
          }
     }
}

前端

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<!-- 导入axios js包 -->
		<script src="js/axios.min.js" type="text/javascript" charset="utf-8"></script>
		
		<script type="text/javascript">
			function login(){
				var account = document.getElementById("accountid").value;
				var password = document.getElementById("passwordid").value;
				//表单验证
				 //return;
				//发起ajax请求   发起get(地址).then()  回调函数
				 // axios.get("http://127.0.0.1:8888/webback/login?account="+account+"&password="+password)
				 //      .then(function(resp){
					// 	  if(resp.data==0){
					// 		   document.getElementById("accountMsgId").innerHTML = "账号或密码错误";
					// 	  }else if(resp.data==1){
					// 		   document.getElementById("accountMsgId").innerHTML = "系统忙";
					// 	  }else{
					// 		  sessionStorage.setItem("id",resp.data.id);
					// 		  sessionStorage.setItem("account",resp.data.account);
					// 		  //location.replace("main.html");
					// 		  /*
					// 		     响应中关注数据
					// 		  	resp.data  响应回来的数据,默认下,已经转为js对象了
					// 		   */
					// 	  }
					//   })
					  
					 axios.post("http://127.0.0.1:8080/webback/login",
					            "account="+account+"&password="+password
								 )
					       .then(function(resp){
					  						  if(resp.data==0){
					  							   document.getElementById("accountMsgId").innerHTML = "账号或密码错误";
					  						  }else if(resp.data==1){
					  							   document.getElementById("accountMsgId").innerHTML = "系统忙";
					  						  }else{
					  							  sessionStorage.setItem("id",resp.data.id);
					  							  sessionStorage.setItem("account",resp.data.account);
					  							  
					  							  location.replace("main.html");
					  						  }
					  					  })
						}
			
		</script>
	</head>
	<body>
		 
		<form>
			账号:<input type="text" name="account" value="" id="accountid"/> <br/>
			     <span id="accountMsgId"></span><br/>
			密码:<input type="password" name="password" id="passwordid"/><br/>
			    <input type="button" value="登录"  onclick="login()"/>
		</form>
	</body>
</html>

main

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			function showUserInfo(){
				var id = sessionStorage.getItem("id"); 
				var account = sessionStorage.getItem("account");
				if(account==null){
					location.replace("login.html");
					return;
				}
				document.getElementById("id").innerHTML=id;
				document.getElementById("accountid").innerHTML=account;
			}
		</script>
	</head>
	<body onload="showUserInfo()">
		<!-- 登录成功之后,需要在此页面显示用户信息 -->
		<div>
			<span id="id"></span>
			<span id="accountid"></span>
		</div>
	</body>
</html>

js文件

在这里插入图片描述

lib
在这里插入图片描述