天天看點

黑馬旅遊網學習記錄(五)黑馬旅遊網學習記錄(五)

黑馬旅遊網學習記錄(五)

今天學習為登陸界面的設計。還是分成三層進行設計:Servlet,Dao,Service。

後端:LoginServlet

//1、首先在doget中加上這樣一句

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        this.doPost(request,response);
    }
//2、在dopost中進行這樣設計
	//這裡servlet的名字要注意。前端要和後端保持一緻。
	//@WebServlet("/loginServlet"),這裡寫的是logServlet,這樣在前端跳轉的時候,就必須是這個名字。
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //1、從前端抓取資料
        Map<String, String[]> parameterMap = request.getParameterMap();
        //2、封裝user對象
        User user = new User();
        try {
            BeanUtils.populate(user,parameterMap);
        } catch (IllegalAccessException e) {
            e.printStackTrace();
        } catch (InvocationTargetException e) {
            e.printStackTrace();
        }

        //3、開始在service層進行判斷
        UserService service = new UserServiceImpl();
        User u = service.login(user);
        ResultInfo resultInfo = new ResultInfo();
        if(u == null){
            //使用者賬号密碼錯誤
            resultInfo.setFlag(false);
            resultInfo.setErrorMsg("賬号或者密碼輸入錯誤");
        }
        //使用者尚未激活的狀态
        if(u != null && !u.getStatus().equals("Y")){
            resultInfo.setFlag(false);
            resultInfo.setErrorMsg("使用者尚未激活,請激活後重新登陸");
        }
        if(u != null && u.getStatus().equals("Y")){
            resultInfo.setFlag(true);
            System.out.println(u.getStatus());
        }
        //響應資料,使用json資料進行封裝。
        ObjectMapper objectMapper = new ObjectMapper();
        response.setContentType("application/json;charset=utf-8");
        objectMapper.writeValue(response.getOutputStream(),resultInfo);
    }

           

後端:UserServiceImpl

//1、在接口中進行聲明。這裡不再贅述,可以在LoginServlet裡面,寫到service.login(user)的時候自動聲明。
	//2、在實作類中進行重寫。
	    @Override
    public User login(User user) {
        return userDao.FindByUserNameAndUserPassword(user.getUsername(),user.getPassword());
    }
	//在寫到這裡的時候,可以直接快捷鍵alt+enter自動在Dao接口中聲明。
           

後端:UserDaoImpl

//1、接口中的聲明不再贅述。
	//2、UserDaoImpl中的方法實作
	    @Override
    public User FindByUserNameAndUserPassword(String username, String password) {
        User user = null;
        try {
            String sql = "select * from tab_user where username = ? and password = ?";
            user = template.queryForObject(sql, new BeanPropertyRowMapper<User>(User.class), username,password);
        }catch (Exception e){

        }
        return user;
    }

           

-------------------以上就是登陸界面的後端代碼的書寫----------------------

前端 login.html

<script>
		$(function () {
			//1、給登陸按鈕綁定事件
			$("#btn_sub").click(function () {	
			//2、發送ajax請求,送出表單資料			
			$.post("loginServlet",$("#loginForm").serialize(),function (data) {
			//3、處理響應結果
				if(data.flag){
					location.href="index.html";
					$("#errorMsg").html("登陸成功");
				}
				else{
					$("#errorMsg").html(data.errorMsg);
				}
				})
			})
		})
	</script>
           

姓名的正确顯示

這個小東西也要分成前後端,以及後端三個子產品來寫。

前端 header.html

<script>
    $(function () {
        $.get("findUserServlet",{},function (data) {
            //data: id,name
            var msg = "歡迎回來," + data.name;
            $("#span_name").html(msg);

        });
    });
</script>

           

後端:FindUserServlet

後端隻有這一個代碼,沒有dao和service層。

//1、老規矩,現在doget裡添上一句話
	    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        this.doPost(request,response);
    }
    //2、dopost
    //注意servlet的名字,和前端保持一緻。
        protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //1、從session中擷取user對象
        Object user =  request.getSession().getAttribute("user");
        //2、将user寫回用戶端
        ObjectMapper objectMapper = new ObjectMapper();
        response.setContentType("application/json;charset=utf-8");
        objectMapper.writeValue(response.getOutputStream(),user);
        System.out.println(user);
    }