Springmvc中,web層與前端數據綁定學習(一)

         剛學完ssm,打算搞一個自己的框架,各種封裝,說不定以後用的上,然而由於初學,基礎不紮實,對springMVC的數據綁定不熟悉,所以吃了很多苦頭啊!所以利用這篇文章來記錄一下自己所用到的springmvc的數據綁定,當然是數據綁定有很多種方法,這裏給出的這兩種足以應對實際開發的各種情況了。


第一種:使用Model來向前端傳數據。流程是這樣的:當我們獲取到前端的請求的時候,web層會調用Service層來處理,Service層會根據相應的信息到Dao層去查詢數據,Service層將查詢到數據返回給Web層,至此Web層將該數據傳到前端來顯示。

這裏只給出Web層的寫法,Service層和Dao層就不給出了,這些需要自己去體會怎麼寫。

Web層(即Controller層)寫法:

    @RequestMapping("/content")
    public String showcontent(Model model){
        int id=1;
        UserEntity user=queryservice.getByid(id);
        System.out.println(user);
        model.addAttribute("user",user.getUsername());//這裏將數據以key-value的形式傳給前端
        return "content";
    }

Content.jsp頁面:${user}:即是web層傳過去的數據,“user”爲key的名字

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>顯示內容</title>
</head>
<body>

<h1>這是根據springmvc攔截請求,然後service層處理,去dao層查詢數據,然後返回給web層,所顯示的結果:</h1>${user}

</body>
</html>



第二種:獲取表單穿來的信息。當用戶提交表單請求的時候,將數據綁定到一個bean(Entity)實體中,日後直接調用這個實體類,便可獲取到表單穿來的相應的信息(好處:一次性大批量獲取)

Web層(即Controller層)寫法:@ModelAttribute註解可以很方便的將表單穿來的數據保存到實體中(這裏的實體類是UserEntity),如果獲取數據不爲空,則用model將數據傳到成功頁面來顯示。

    @RequestMapping(value = "/login",method = {RequestMethod.POST})
    public String login(HttpServletRequest request, Model model,@ModelAttribute("userEntity")UserEntity userEntity){
        if(userEntity!=null){
            System.out.print(userEntity.getUsername()+"  "+userEntity.getPassword());
            model.addAttribute("userEntity",userEntity);
            return "loginsuccess";
        }
        return "login";
    }


login.jsp:這裏使用springmvc的表單標籤,利用它的modelAttribute屬性獲取數據

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<html>
<head>
    <title>登錄頁面</title>
</head>
<body>

<h1>這是登錄</h1>

<div align="center">
    <form:form modelAttribute="userEntity" method="POST">
    用戶名:<form:input path="username"/><br>
    密碼:<form:password path="password"/><br>
    <input type="submit" value="提交" />     <input type="reset" value="取消" />
    </form:form>
</div>

</body>
</html>

loginsuccess.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>登錄成功</title>
</head>
<body>
<h1>用戶名:${userEntity.username}</h1>
<h1>密碼:${userEntity.password}</h1>
</body>
</html>

這樣便可以實現數據綁定與傳輸


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章