Spring MVC之中前端向後端傳數據

時間 2019-11-10

標籤 spring mvc 之中端向後端數據欄目 Spring 简体版

原文原文鏈接

Spring MVC之中前端向後端傳數據和後端向前端傳數據是數據流動的兩個方向, 在此先介紹前端向後端傳數據的狀況.

通常而言, 前端向後端傳數據的場景, 大可能是出現了表單的提交,form表單的內容在後端學習的md文檔之中有所介紹,form標籤的語法格式以下css

<FORM NAME="FORM1" ACTION="URL" METHOD="GET|POST" ENCTYPE="MIME" TARGET="...">
... ... 
</FORM>

主要是三個參數的介紹,也就是name, method和action, 其中name能夠省略, 只是一個標記符號, 用處不太大, 而action表示處理這個表單的方法, method表示將數據傳輸給後端的方式, 默認是get方式,這是基本的一些介紹.html

前端頁面

數據是從前端的提交表單之中獲取的, 因此首先必須得有一個表單, 此處使用了freemarker視圖的頁面, 命名爲login.ftl, form的名字爲"login", 其中在form之中的action表示的是要處理這"login"表單的後臺url(方法), 也就是對應的controller之中的url(方法), 正好在LoginController.java之中,其中login.ftl以下:前端

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>第一個freemarker模板</title>
    <!-- 新 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">
    <!-- jQuery文件。務必在bootstrap.min.js 以前引入 -->
    <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
    <!-- CSS樣式 -->
</head>
<body>
<h4 class="text-primary">登陸頁面</h4>
<!-- 這些基本的東西貌似沒有變,使用方法和在jsp之中一致,有變化的在於數據的獲取-->
<form name="login" action="/freemarker/login" class="text-info">
    姓名:<input type="text" name="name"><br/>
    性別:<input type="text" name="gender"><br/>
    年齡:<input type="text" name="age"><br/>
    密碼:<input type="password" name="password"><br/>
    <input type="submit" value="提交">
</form>
</body>
</html>

後臺方法

以下是處理前端頁面提交內容的方法login, 可是在下面有兩個方法, 其中此處用到的方法是login, 在這個Controller之中, 咱們把從前臺提交的數據處理, 須要注意的是, 咱們在form之中定義的參數的名字, 也就是以上每一個input的name屬性, 和在LoginController之中login方法的參數的名稱是同樣的, 這樣就能夠保證數據的對應, 可是這樣也使得前端和後端耦合, 是如今不太推薦的.java

@Controller
@RequestMapping("/freemarker")
public class LoginController {
    private Logger logger = LoggerFactory.getLogger(LoginController.class);

    @RequestMapping(value = "/gotologin", method = RequestMethod.GET)
    public String gotoLogin() {
        //跳轉到登陸的login頁面
        logger.debug("正在跳轉到login頁面!");
        return "login";
    }

    @RequestMapping(value = "/login", method = {RequestMethod.GET, RequestMethod.POST})
    public String login(String name, String gender, int age, String password, Model model) {
        //從頁面之中提取輸入的信息,而且封裝好
        model.addAttribute("name", name);
        model.addAttribute("gender", gender);
        model.addAttribute("age", age);
        model.addAttribute("password", password);
        //獲取了頁面的信息以後,就將信息發送到想要展現的頁面
        logger.debug("name: " + name + ", gender: " + gender + ", age: " + age + ", password: " + password);
        return "showinfo";
    }
}

前臺展現

其實完成以上兩個步驟, 咱們已經把從前臺傳輸過來的數據,完成了後臺的處理,而且把數據存儲在了model之中,可是這樣的狀況下, 數據沒有展現出來,其結果不直觀, 那麼,此時就須要將後端處理好的數據, 展現在前端頁面, 爲此咱們建立一個頁面, 將登錄後的信息展現出來,命名爲showinfo.ftljquery

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>第一個freemarker模板</title>
    <!-- 新 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">
    <!-- jQuery文件。務必在bootstrap.min.js 以前引入 -->
    <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
    <!-- CSS樣式 -->
</head>
<body>
<!-- freemarker獲取信息 -->
<h3 class="text-justify"> 登陸信息以下:</h3>
<h4 class="text-info"> 姓名:${name}</h4>
<h4 class="text-dark"> 性別:${gender}</h4>
<h4 class="text-primary"> 年齡:${age}</h4>
<h4 class="text-danger"> 密碼:${password}</h4>
</body>
</html>

完成以上三個步驟,就完成了從前臺輸入,到後臺處理, 再到前端展現的過程,示意圖以下:spring

st=>start: 開始
e=>end: 結束
op1=>operation: 前臺輸入
op2=>operation: 後臺處理
op3=>operation: 前臺展現
st(right)->op1(right)->op2(right)->op3(right)->e

後臺直接傳數據給前端

實際上, 若是沒有前臺輸入, 後臺本身造數據, 也是能夠直接給前臺展現的, 示意圖以下:bootstrap

st=>start: 開始
e=>end: 結束
op2=>operation: 後臺處理
op3=>operation: 前臺展現
st(right)->op2(right)->op3(right)->e

代碼操做以下:後端

@Controller
public class ToFrontController {
    private static Logger logger = LoggerFactory.getLogger(ToFrontController.class);

    //在把值傳給前端頁面的時候，通常是須要經過Model協助的，沒有不須要Model或者接近的輔助處理方式的方法
    //此處其實不須要傳值，由於不接收前端傳來的值，只須要在裏面本身設置便可
    @RequestMapping(value = "/toFrontTest")
    public String toFront(Model model) {
        logger.info("toFront方法被調用,應該返回toFrontInfo的視圖!");
        User user1 = new User();
        user1.setAge(24);
        user1.setName("Wangsan Lee");
        user1.setPassword("dfasfagasdfsdafgyrt75");
        System.out.println(user1.getName() + "," + user1.getAge() + "," + user1.getPassword());
        model.addAttribute("user1", user1);
        return "tryandlearn/toFrontInfo";
    }
}

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%@ taglib prefix="sf1" uri="http://www.springframework.org/tags/form" %>
<%@ taglib prefix="from" uri="http://www.springframework.org/tags/form" %>
<html>
<head>
    <title>toFrontInfo</title>
    <!-- 新 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">
    <!-- jQuery文件。務必在bootstrap.min.js 以前引入 -->
    <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
    <!-- CSS樣式 -->
</head>
<body>
<h4 class="text-info">toFrontInfo，此處是後端傳給前端理後的信息，顯示在此處</h4>
<p class="text-md-center text-area text-warning">後端傳值給前端，涉及到的部分包括，ToFrontController之中的toFront方法處理，
    而後處理完成後，跳轉到tryandlearn/toFrontInfo.jsp頁面，ToFrontController之中的toFront方法裏面的參數，都是寫死了的，
    能夠認爲是已經從前端來，而後通過後端處理好了，須要傳給前端的值</p>
<p class="text-info">ToFrontController.toFront(name,age,password,model)--->tryandlearn/toFrontInfo.jsp</p>

<h4 class="text-info">使用\<\form:form\>標籤包起來的方式！</h4>
<form:form method="get" action="toFrontTest" modelAttribute="user1">
    name:${user1.name} </br>
    age:${user1.age} </br>
    password:${user1.password}</br>
</form:form>
<!-- form標籤，jstl標籤，sf標籤，el表達式，各自使用在什麼地方而且有什麼區別？-->

<h4 class="text-info">使用\<\form:form\>標籤包起來的方式！命名了不一樣的標籤名字！</h4>
<sf1:form method="get" action="toFrontTest" modelAttribute="user1">
    name:${user1.name} </br>
    age:${user1.age} </br>
    password:${user1.password}</br>
</sf1:form>
<!-- form標籤，jstl標籤，sf標籤，el表達式，各自使用在什麼地方而且有什麼區別？-->

<h4 class="text-warning">不使用\<\form:form\>標籤包起來的方式！</h4>
name:${user1.name} </br>
age:${user1.age} </br>
password:${user1.password}</br>

</body>
</html>

操做之中的錯位感

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="sf" uri="http://www.springframework.org/tags" %>
<html>

<head>
    <title>一個有內涵的Index頁面！</title>
    <!-- 新 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">
    <!-- jQuery文件。務必在bootstrap.min.js 以前引入 -->
    <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
    <!-- CSS樣式 -->
</head>
<body>
<!-- Spring MVC貌似不支持從一個jsp頁面經過<a href="sss.jsp">的方式跳轉，都要經過controller的方式訪問頁面-->
<h3 class="text-info">我是XML方式配置的Spring MVC工程首頁!</h3>
<a href="/freemarker/hello">freemarker的hello首頁!(經過controller的方式訪問頁面)</a></br>
<a href="/freemarker/gotologin">跳轉到登陸首頁</a></br>
</body>
</html>

咱們知道,前端是一個展現的頁面, 主要展現出來數據和頁面, 固然也要收集數據, 可是總的一切都是爲了收集數據,好比,咱們要登陸, 登陸的頁面是login.html, 可是若是想到達這個頁面, 咱們須要一個連接讓其跳轉到這個頁面, 在<a href="/freemarker/gotologin">跳轉到登陸首頁</a></br>之中說明處理這個跳轉的url, 是的,咱們跳轉到了http://localhost:8080/freemarker/gotologin,可是這是在後臺的Controller之中決定的, 是在第一段LoginController之中的gotologin方法之中,才決定跳轉到login頁面,因此其實有一個延遲性, 咱們想達成的, 都要作做爲咱們當前動做的結果出現, 也就是說,好比咱們想要到達登陸頁面, 那麼這個結果必將是咱們當前動做的結果, 而什麼是當前的動做呢? 那就是要跳轉到登陸頁面, 若是咱們登陸以後, 想要展現登錄的信息, 這兩個操做是連貫的, 登陸, 而後展現, 也就是說, login-->show, 意味着show是登陸的結果, 那麼show就要做爲結果出現,在第一段代碼的login方法中體現了出來, 也就是login方法返回的是showinfo, 而showinfo之中須要的信息, 就須要在後端返回的信息之中獲取.spring-mvc

<!-- freemarker獲取信息 -->
<h3 class="text-justify"> 登陸信息以下:</h3>
<h4 class="text-info"> 姓名:${name}</h4>
<h4 class="text-dark"> 性別:${gender}</h4>
<h4 class="text-primary"> 年齡:${age}</h4>
<h4 class="text-danger"> 密碼:${password}</h4>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。