寫點前端，vm + jquery + controller

我要啰里八嗦一些東西了。以下陳述，基於這些事實：

前端頁面：.vm, velocity + jquery

MVC：加強版的spring mvc

Controller：@Controller, @RequestMapping，.htm, .json, GET, POST

 

1）.htm

每一個.htm，在控制器里@Controller，意味着要寫一個方法，該方法頭部頂着@RequestMapping(value = "/topicEventcode.htm", method = RequestMethod.GET)。這樣，頁面刷新多次，都可以執行到該方法內。

我之前遇到這樣一個問題，寫的不是GET，而是POST，導致頁面刷新后，找不到控制器了，斷點斷在方法內怎么都進不來，呵呵，現在想來，這個太傻了。

刷新/重新加載頁面，那么你的這些內容都會被重新賦值渲染。這些值，就是從controller中帶回來的，你可以放在ModelMap里帶回來，也可以直接寫入response帶回。

我一般使用modelMap,存些String類型的值，以前存儲過復雜的對象，結果渲染不出來，是因為json序列化的時候，這個對象序列化失敗。

 

表1-1

                        #if($!mode == "topicStatistics") 
                            #foreach($line in $!data)
                                <tr>
                                    <td>$!line.topic</td>
                                    <td>$!line.eventcode</td>   
                                    <td>$!line.fromApps</td> 
                                    <td>$!line.toApps</td> 
                                    <td>$!line.numPerDay</td> 
                                    <td>$!line.exProperty</td> 
                                    <td>$!line.statusEnum</td>
                                    <td>$!line.gmtCreate</td>     
                                    <td>$!line.gmtModified</td>       
                                    <td>$!line.operator</td>
                                    <td>
                                        <a href="#updateDataDiv" onclick="replaceFormTS('$!line.topic','$!line.eventcode','$!line.fromApps','$!line.toApps', '$!line.numPerDay','$!line.exProperty','$!line.statusEnum')" class="boxLink" >修改</a>
                                    </td>
                                </tr>
                            #end    
                        #end

 

 

2）controller，方法

public String query(ModelMap modelMap, WebRequest request);  然后通過request.getParameter("mode")來獲取.vm中

public String query(ModelMap modelMap, String mode); 

這兩種方式都可以獲取前端提交過來的頁面元素的值。

但在使用過程中，發現public String uploadFile(ModelMap modelMap, MultipartFile file); 這樣使用，我上傳的文件內容總是取不出來，需要這樣轉一下：

寫一個類，並用這個類做參數public String uploadFile(ModelMap modelMap, FileForm fileForm); 這樣通過fileForm的get方法，就可以把文件內容取出來了。

public class FileForm {

     private MultipartFile file;

     // ... getters and setters 

}

 

3）.json

寫一個頁面，還是比較費神的，所以我目前更傾向於使用json這種輕量級的方式了。

.json可以做到，只提交頁面上的部分內容到controller里，例如只提交其中一個form。但同時也意味着，整個頁面不會重新刷新，值不會自動被重新加載。

如果你確實又需要加載某些值，或只是向用戶提示個什么，那么你需要使用ajax方式提交.json請求，並在ajax調用時，注入一個回調函數。

這樣，我們可以在modelMap/response里寫入待更新的值/待提示給用戶的值，並在回調函數里做相應處理就好。

   function postAddFormTM(){
        jQuery.post("insertRecordTM.json", 
                            {topic:$("input[name='aaa']").val(), eventcode:$("input[name='bbb']").val() }, 
                            function(result){
                                alert(result.result.resultMsg);
                            }
        );
    }

在使用過程中，我aaa的值為中文的時候，傳到controller里后就變亂碼了，那么就需要對這些中文框進行特殊編碼，var aaaChinese = encodeURIComponent($("input[name='aaa']").val());

在controller里，aaa= URLDecoder.decode(aaaChinese, "UTF-8");進行解碼就可以正確取出中文了。