Spring MVC之中前端向後端傳數據
阿新 • • 發佈：2018-07-22
變化 性別 debug lan 直接 oot try 方向 表單
Spring MVC之中前端向後端傳數據
Spring MVC之中前端向後端傳數據和後端向前端傳數據是數據流動的兩個方向, 在此先介紹前端向後端傳數據的情況.
一般而言, 前端向後端傳數據的場景, 大多是出現了表單的提交,form表單的內容在後端學習的md文檔之中有所介紹,form標簽的語法格式如下
<FORM NAME="FORM1" ACTION="URL" METHOD="GET|POST" ENCTYPE="MIME" TARGET="..."> ... ... </FORM>
主要是三個參數的介紹,也就是name, method和action, 其中name可以省略, 只是一個標記符號, 用處不太大, 而action表示處理這個表單的方法, method表示將數據傳輸給後端的方式, 默認是get方式,這是基本的一些介紹.
前端頁面
數據是從前端的提交表單之中獲取的, 所以首先必須得有一個表單, 此處使用了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方法的參數的名稱是一樣的, 這樣就可以保證數據的對應, 但是這樣也使得前端和後端耦合, 是現在不太推薦的.
@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.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>
<!-- 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>完成以上三個步驟,就完成了從前臺輸入,到後臺處理, 再到前端展示的過程,示意圖如下:
st=>start: 開始
e=>end: 結束
op1=>operation: 前臺輸入
op2=>operation: 後臺處理
op3=>operation: 前臺展示
st(right)->op1(right)->op2(right)->op3(right)->e後臺直接傳數據給前端
實際上, 如果沒有前臺輸入, 後臺自己造數據, 也是可以直接給前臺展示的, 示意圖如下:
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之中需要的信息, 就需要在後端返回的信息之中獲取.
<!-- 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>Spring MVC之中前端向後端傳數據