2. 程式人生 > >Spring MVC前後端數據交互總結

Spring MVC前後端數據交互總結

阿新 • • 發佈：2018-01-14
Language 前後端交互 normal turn 資料 郵箱 success output author

  • 控制器

　　　　作為控制器，大體的作用是作為V端的數據接收並且交給M層去處理，然後負責管理V的跳轉。SpringMVC的作用不外乎就是如此，主要分為：接收表單或者請求的值，定義過濾器，跳轉頁面；其實就是servlet的替代品。

　　　　- append

　　　　Spring MVC在Web應用中扮演V的角色，負責處理HTTP請求並返回相應的資源，它在用的時候要配置一個核心的Dispatcher負責檢查資源，請求過來的時候會查找是否有相應的Handler，有就會把請求交給Controller，一般使用註解來配置暴露給用戶端進行調用。

@RequestMapping(value="/JSON",produces="text/html;charset=UTF-8")

　　　　value就是對外暴露的接口地址。

　　　　說到控制器，我們會想到熟悉的Struts2，它可以輕松的調用Request和Response來操作請求響應，如果要在Spring MVC裏調用請求響應的話，則需要附帶在方法參數上。

    //Request Response
    @RequestMapping(value="/ReqAndRep",produces="text/html;charset=UTF-8")
    public void reqAndrep(HttpServletRequest request,HttpServletResponse response){
        
    }

　　　　這樣就可以控制這個Http請求並且往響應體裏寫東西了。

  • 傳值方式

　　　　- append

　　　　管中窺豹，只見一斑；一葉障目，不見泰山。在前後端交互的過程中，首先要知道都是什麽數據類型並且對不同的類型看看Spring MVC會提供怎樣的編程方式。

　　　　前後端的數據無非是：變量，對象，數組，JSON；他們有可能會有叠代的行為，把基本的搞懂就不怕他們的二次型了。

　　　　springmvc最方便的一點就是可以通過註釋方式來定義它的url。

技術分享圖片 
@Controller
public class formMVC {
    @RequestMapping("/hello")
    public void login(){
        
    }
技術分享圖片

　　　　如上面這種方式，在項目名下跟著hello就能訪問這個方法了，相較struts2的xml配置加大了開發效率，並且是以方法為級別的開發。

　　　　接收表單數據只需要在方法的參數加入響應的字段，對應表單input的name屬性，因為是通過反射技術實現的所以字段要完全相同

。　　

　　　　變量

    @RequestMapping("/login")
    public String login(String username,String password){
        System.out.println(username+" "+password);
        return "form.jsp";
    }

　　　　- append

　　　　變量一般是在表單中指定的name對應的形參，也可以在形參中使用別名。

技術分享圖片 
    //傳入一般參數
    @RequestMapping(value="/Normal",produces="text/html;charset=UTF-8")
    public String normal(HttpServletRequest request,@RequestParam("username") String username,@RequestParam("password") String password){
        System.out.println("username:"+username+" password:"+password);
        request.setAttribute("info", "Normal server recv:"+username+" "+password);
        return "testPage.jsp";
    }
技術分享圖片

　　　　前端數據頁面，寫一個Form，input對應別名就好。

技術分享圖片 
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>測試數據交互</title>
</head>
<body>
    <form action="/Shop/Array" method="post">
        <table>
            <tr>
                <td>用戶名:</td>
                <td><input name="username" size="15"></td>
            </tr>
            <tr>
                <td>密碼:</td>
                <td><input name="password" size="15"></td>
            </tr>
            <tr>
                <td><button type="submit">提交</button></td>
                <td><button type="reset">重置</button></td>
            </tr>
        </table>
    </form>
    <span>服務器信息：${info}</span>
</body>
</html>
技術分享圖片

　　　　如上面這種方式，表單提交之後就會獲得值。跳轉方式就是使用返回的字符串，springmvc的DispatcherServlet會跳轉到字符串的頁面。你也可以配置它的前綴後綴。在它的配置文件中配置下面屬性，就是在這個return的字符串的前面和後面加入你配置的前綴後綴。比如你return一個index.jsp，配置了前綴就可能是demo/index.jsp這樣的demo包裏面的index頁面。

技術分享圖片 
    <!-- configure the InternalResourceViewResolver -->
    <bean class="org.springframework.web.servlet.view.InternalResourceViewResolver" 
            id="internalResourceViewResolver">
        <!-- 前綴 -->
        <property name="prefix" value="" />
        <!-- 後綴 -->
        <property name="suffix" value="" />
    </bean>
技術分享圖片

　　　　對象

　　　　- append

　　　　傳遞對象這回事，說實在的和Struts2沒什麽區別，Struts2使用ModelDriven或者直接在控制器裏新建一個對象，提交Http請求的時候name需要寫成：對象名.字段名，這樣的形式。但是Spring MVC只要你和字段名（類屬性名）相同就行了。

技術分享圖片 
    //傳入對象
    @RequestMapping(value="/Object",produces="text/html;charset=UTF-8")
    public String objTransaction(HttpServletRequest request,@ModelAttribute Demo d){
        System.out.println("username:"+d.getUsername()+" password:"+d.getPassword());
        request.setAttribute("info", "objTransaction server recv:"+d.getUsername()+" "+d.getPassword());
        return "testPage.jsp";
    }
技術分享圖片

　　　　前臺仍然是上個頁面，改一些Action就行。

　　　　另外，Spring MVC可以使用bean來接收參數，因為是反射技術，所以屬性字段依然要保持完全一樣。

技術分享圖片 
public class user {
    private String username;
    private String password;
    public String getUsername() {
        return username;
    }
    public void setUsername(String username) {
        this.username = username;
    }
    public String getPassword() {
        return password;
    }
    public void setPassword(String password) {
        this.password = password;
    }
    
}
技術分享圖片 
    @RequestMapping(value="/Model",method=RequestMethod.POST)
    public String loginModel(user u){
        System.out.println(u.getUsername()+" "+u.getPassword());
        return "form.jsp";
    }　　

　　　　- append

　　　　數組

　　　　表單提交肯定會有批量提交的需求，批量提交雖然不一定經常能見到，但是學習一定要學全。批量提交就是name共用一個name，一般都是框架給你處理好拿到手上的，所以Spring MVC在方法形參中寫List就可以接收批量提交同個變量了。

技術分享圖片 
    //傳入數組
    @RequestMapping(value="/Array",produces="text/html;charset=UTF-8")
    public String arrayTransaction(HttpServletRequest request,@RequestParam("username") String[] usernames){
        if(usernames != null)
        {
            for(int i=0;i<usernames.length;i++)
                System.out.println("username:"+usernames[i]);
        }
        request.setAttribute("info", "arrayTransaction server recv");
        return "testPage.jsp";
    }
技術分享圖片

技術分享圖片 
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>測試數據交互</title>
</head>
<body>
    <form action="/Shop/Array" method="post">
        <table>
            <tr>
                <td>用戶名:</td>
                <td><input name="username" size="15"></td>
            </tr>
            <tr>
                <td>用戶名:</td>
                <td><input name="username" size="15"></td>
            </tr>
            <tr>
                <td><button type="submit">提交</button></td>
                <td><button type="reset">重置</button></td>
            </tr>
        </table>
    </form>
    <span>服務器信息：${info}</span>
</body>
</html>
技術分享圖片

　　　　JSON

　　　　- append

　　　　Spring MVC提供了自動序列化JSON數據的註解，在前端提供JSON數據的時候，可以十分方便的轉換。JSON為何如此重要，因為在Restful風格的架構中，傳遞數據使用JSON差不多可以算是一種標準了，即使是微服務架構，每個服務之間也普遍見到設計成Restful風格的接口，設計Restful風格Spring MVC有著天然的支持，只需要使用它的註解就好了，而返回的字符串可以自己構造。

技術分享圖片 
package Common.Controller;
import org.springframework.stereotype.Controller;

import net.sf.json.JSONObject;
/**
 * 接口輸出JSON形式
 * restful
 * {"status":"0|1|2","info":message,"result":result}
 * status：0.失敗；1.成功；2.（未定）；
 * info：返回服務器信息
 * result：返回查詢結果
 * @author ctk
 *
 */
@Controller
public class OutputStringController {
    //返回成功信息
    public String success(String info){
        JSONObject result = new JSONObject();
        result.put("status", 1);
        if(info == null)
            result.put("info", "");
        else
            result.put("info", info);
        result.put("result", "");
        return result.toString();
    }
    //返回失敗信息
    public String failure(String info){
        JSONObject result = new JSONObject();
        result.put("status",0);
        if(info == null)
            result.put("info", "");
        else
            result.put("info", info);
        result.put("result", "");
        return result.toString();
    }
    //返回供前端使用的result-成功
    public String resultSuccess(String info,String resultStr){
        JSONObject result = new JSONObject();
        result.put("status",1);
        if(info == null)
            result.put("info", "");
        else
            result.put("info", info);
        if(resultStr == null)
            result.put("result", "");
        else
            result.put("result", resultStr);
        return result.toString();
    }
    //返回供前端使用的result-失敗
    public String resultFailure(String info,String resultStr){
        JSONObject result = new JSONObject();
        result.put("status",0);
        if(info == null)
            result.put("info", "");
        else
            result.put("info", info);
        if(resultStr == null)
            result.put("result", "");
        else
            result.put("result", resultStr);
        return result.toString();
    }
}
技術分享圖片

　　　　定義了頂層類之後，編寫接口就繼承。接口風格如下。　　　　

技術分享圖片 
    //restful接口
    @RequestMapping(value = "/start/{name}", produces = "text/html;charset=UTF-8")
    @ResponseBody 
    public String start2(@PathVariable("name") String name1) {
        System.out.println(name1);
        return "start";
    }
技術分享圖片

　　　　

　　　　回歸正題，要傳遞JSON，它的過程是前臺等待用戶輸入，用戶輸入完畢之後把數據構造成JSON Data，然後訪問接口。前臺的代碼我是這樣寫。

技術分享圖片 
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
 <script src="../js/jquery/jquery.min.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSON數據提交</title>
</head>
<body>
<table>
    <tr>
        <td>用戶名:</td>
        <td><input id="username"></td>
    </tr>
        <tr>
        <td>密碼:</td>
        <td><input id="password"></td>
    </tr>
        <tr>
        <td>姓名:</td>
        <td><input id="name"></td>
    </tr>
        <tr>
        <td>郵箱:</td>
        <td><input id="email"></td>
    </tr>
</table>
<button id="submitForm">提交</button>

<script type="text/javascript">
    $(document).ready(function(){
        $(‘#submitForm‘).click(function(){
            var formData = new Object;
            formData.username = $(‘#username‘).val();
            formData.password = $(‘#password‘).val();
            formData.name = $(‘#name‘).val();
            formData.email = $(‘#email‘).val();
            var JsonData = JSON.stringify(formData); 
            console.log(JsonData);
            $.ajax({
                type : "POST",
                url : "/Shop/JSON",
                dataType : ‘text‘,  
                contentType: "application/json",
                data : JsonData,
                success : function(data) {
                   alert(data);
                }
            });
        });        
    });
</script>
</body>
</html>
技術分享圖片

　　　　註意dataType如果使用json那服務器返回什麽都會往error走，我初步理解它為返回數據類型。

　　　　Spring MVC解包需要jackson這個東西，筆者踩過了坑，沒加jar包一直訪問返回415，不支持此類媒介。筆者使用的是2.5版本的，Spring是4.0的。

技術分享圖片

　　　　將其導入到工程中，然後配置applicationContext.xml，就是Spring的配置文件。

技術分享圖片 
    <!--json轉換器-->
    <bean class="org.springframework.web.servlet.mvc.method.annotation.RequestMappingHandlerAdapter">
        <property name="messageConverters">
            <list >
                <ref bean="mappingJacksonHttpMessageConverter" />
            </list>
        </property>
    </bean>
    <bean id="mappingJacksonHttpMessageConverter"
        class="org.springframework.http.converter.json.MappingJackson2HttpMessageConverter">
        <property name="supportedMediaTypes">
            <list>
                <value>text/html;charset=UTF-8</value>
            </list>
        </property>
    </bean>
技術分享圖片

　　　　然後後臺接口如下。

技術分享圖片 
    //傳入JSON
    @RequestMapping(value="/JSON",produces="text/html;charset=UTF-8")
    @ResponseBody 
    public String jsonTransaction(HttpServletRequest request,@RequestBody Demo ds){
        System.out.println("username:"+ds.getUsername()+" password:"+ds.getPassword()+" name:"+ds.getName()+" email:"+ds.getEmail());
        request.setAttribute("info", "JSON server recv");
        return "success";
    }
技術分享圖片

　　　　@ResponseBody是返回值寫到響應體中，@RequestBody是把請求主體信息中的內容轉換成Demo類。

技術分享圖片

技術分享圖片　　　　

　　　　最後，前端發過來的數據是經過json包裝的，依然可以在後端使用bean來接收。

技術分享圖片 
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="jquery.min.js"></script>  
<title>登錄表單</title>
</head>
<script type="text/javascript">  
    $(document).ready(function(){  
        $("#button_submit").click(function(){  
            //序列化表單元素，返回json數據  
            var params = $("#userForm").serializeArray();  
            console.log(params);
            //也可以把表單之外的元素按照name value的格式存進來  
            //params.push({name:"hello",value:"man"});  
            $.ajax({
                type:"post",
                url:"Model",
                data:params
            });
        });  
    });  
</script>  
<body>
    <form id="userForm">
        <input name="username" type="text"/>
        <br/>
        <input name="password" type="password"/>
        <br/>
    </form>
        <button id="button_submit">提交</button>
        <button type="reset" >重置</button>
</body>
</html>
技術分享圖片

技術分享圖片

技術分享圖片

　　　　最後還有一個未解之謎，對象數組提交該怎麽去做，資料還未查到，先不幹這個了。

Spring MVC前後端數據交互總結

相關推薦

Spring MVC前後端數據交互總結

Language 前後端交互 normal turn 資料 郵箱 success output author 控制器 　　　　作為控制器，大體的作用是作為V端的數據接收並且交給M層去處理，然後負責管理V的跳轉。SpringMVC的作用不外乎就是如此，主要分為：接收

2017.11.30 Reat前後端數據交互之Button提交數據處理（ajax方法單獨封裝成API，不用Form）

logs 處理 mage mongoose 技術 module strong 輸入框 reat 1.按鈕定義： 2.引入外部js文件（封裝了ajax方法的文件）：註意目錄結構 3.調用ajax文件中的具體方法： 4.關於ajax文件中方法的編寫語法： 寫

springboot-vue-前後端數據交互

data RKE false body ict pan etime HR SQ 前端項目： pom文件： <?xml version="1.0" encoding="UTF-8"?> <project xmlns="http://maven.apache

Python Django 前後端數據交互 之 後端向前端發送數據

ews 新頁面 keyword asc -html span func param url Django 從後臺往前臺傳遞數據時有多種方法可以實現。 最簡單的後臺是這樣的： from django.shortcuts import render def main_

Python Django 前後端數據交互 之 HTTP協議下GET與POST的區別

要求 提交 時間差 lan 渠道 pic 世界 們的 class 作者：Larry鏈接：https://zhuanlan.zhihu.com/p/22536382來源：知乎著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請註明出處。 GET和POST是HTTP請求

Vue小項目二手書商城：（二）axios前後端數據交互

-s 16px 獨立 數據 run 有一點 引入 現在 app 一.寫接口 1.我們要在前端取到後端的數據（之前寫的data.json）可以用vue-resourse或者用axios，在vue2之後官方就不再維護vue-resourse，推薦使用axios。 2.在ax

關於前端和後端數據交互問題

缺點 lan back 加載 -a type dom 如同 .sh 作者：NimoChu鏈接：https://www.zhihu.com/question/26532621/answer/33144979來源：知乎著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請註

一次有趣的ant-design與後端數據交互的使用

時間排序 展示 進入 lap 圖片 時間 ora display 就是 最近有個需求是新聞時間排序與點擊量排序，數據庫中存儲的新聞是按照時間順序排序的，從後臺數據中取出數據，在前端進行頁面展示即可。 我用到了ant-design中的Tabs切換頁,樣式大概如下圖。 其實這

7.Nuxt與後端數據交互

eat 出了 出現 分享 是什麽 network 網絡 log url 接下來就是對接服務端接口，展示真實的數據 1.做了個虛擬接口地址：http://test.yms.cn/testjson.asp 輸出數據： { 　　"title": "單間出租", 　　

php中使用ajax進行前後端json數據交互

前端 array char 取數 方式 註冊界面 test 傳輸 created (最近在學習ajax，所以想自己總結一下在PHP中如何使用ajax技術！) 一、ajax註意點： 　　1、原理圖：（來自韓順平ajax視頻） 　　　　 　　　　2、ajax返回數據類型

Android實戰簡易教程-第六十六槍（server端搭建和server端Json數據交互）

視頻 pack tis sta listen let Coding read ide 學習Android有一段時間了。對server端有非常深的好奇，決定對serve

socket網絡編程登錄實現及多客戶端和服務端的數據交互

取數據 sin 一個用戶 run set inf exceptio 反序列化 ram 一.TCP/IP 客戶端 package com.demo.entity; import java.io.Serializable; public class User

ASP.Net WebAPI與Ajax進行跨域數據交互時Cookies數據的傳遞

調整 ucc header set 定義 div ren ext domain 前言 最近公司項目進行架構調整，由原來的三層架構改進升級到微服務架構（準確的說是服務化，還沒完全做到微的程度，顆粒度沒那麽細），遵循RESTFull規範，使前後端完全分離，實現大前端思想。由於是

5月20日重點：當請求的參數是動態的形式時，原生app與h5頁面之間數據交互的方法

post方法 註意 data 不能 images 動態 構建 parse 拼接 方案一： 1.app在打開H5頁面的時候，把需要給的參數，以get的形式，放在H5的url中。 2.然後H5的js從url中獲取到需要的參數，拼接到ajax請求的url中。 3.H5ajax請求

大前端之——數據交互

之前 後端 lar 指令 發的 建立 div tro 而且 　　作為一名web前端工程師，很多人認為前端不就是用來做頁面的嗎。在上一篇文章我已經說過了，前端可不僅僅做頁面，今天我就來簡單的介紹工作中的數據處理問題。 　　從傳統的開發過程來說，前端的主要作用是頁面模板，數據渲

JDBC—簡單的數據交互

statement nec port page 需要 jdb src http 添加 　　　　 　　　　東西傳值、交互 　　　　ps:裏面的時間為手動添加。如果需要更改為系統日期，那就把裏面 加了 // 的語句去掉 ，然後再加 包驅動。 新建一個1.jsp 用來當

使用django和vue進行數據交互

com 狀態 method tag comm 文章 json tor 目錄 一、前端請求的封裝 1.將請求地址封裝起來，以便日後修改，在src/assets/js目錄下創建getPath.js文件 export default function getUrl(str) {

JSP數據交互(二)

alt -s 四種 存取 大小 spa 數據 blog ont 對象的作用域: JSP中提供了四種作用域,分別是page作用域,request作用域,session作用域和application作用域. page作用域： page作用域指單一JSP頁

JSP數據交互（一）

post 每一個 uri rac 對象 string prot tro jsp 1.常用的JSP內置對象 out,request,response,session,application 2.request對象（請求） 2.1 方法 Str

SpringMVC的JSON數據交互(七)

control 自動 tail med function 內容 頁面 ssa 字符串 1.@RequestBody (自動將請求的數據封裝為對象) 作用： @RequestBody註解用於讀取http請求的內容(字符串)，通過springmvc提供的HttpMessag