最近在學(xué)習(xí)AngularJS的知識，收獲不少，不過因為自己平時工作時開發(fā)都是用的freemarker+springmvc來做的頁面數(shù)據(jù)交互，所以也自然想到了用angularjs+springmvc來做同樣的事情。當(dāng)然，在學(xué)習(xí)之前也到網(wǎng)上查閱了非常多的資料，但是都不是那么明細或者簡單，至少對于本人來說都是看的是一知半解。所以用了些時間對這種方式進行學(xué)習(xí)。
在查閱了許多的資料以后，大致明白了AngularJs將數(shù)值傳遞給后臺的方式是將要傳遞的對象Json化之后傳遞給后臺，這點和Ajax比較類似，當(dāng)然也是屬于異步提交數(shù)據(jù)的方式。本人還沒有了解過AngularJs同步方式提交數(shù)據(jù)是怎樣，不過想想只需要將要的數(shù)據(jù)綁定在input標(biāo)簽上，之后還是用html的提交還是可以簡便的實現(xiàn)的。
傳遞數(shù)據(jù)到后臺
下面就來簡單舉個例子來說明吧
首先我們把springmvc的環(huán)境搭好，先來web.xml
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
|
<?xml version="1.0" encoding="UTF-8"?><web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd" id="WebApp_ID" version="3.0"> <display-name>SpringMVC</display-name> <context-param> <param-name>contextConfigLocation</param-name> <param-value>/WEB-INF/AngularJSTestApplicationContext.xml</param-value> </context-param> <listener> <listener-class> org.springframework.web.context.ContextLoaderListener </listener-class> </listener> <servlet> <servlet-name>baobaotao</servlet-name> <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class> <init-param> <param-name>contextConfigLocation</param-name> <param-value>/WEB-INF/AngularJSTestApplicationContext.xml</param-value> </init-param> <load-on-startup>1</load-on-startup> </servlet> <servlet-mapping> <servlet-name>baobaotao</servlet-name> <url-pattern>*.do</url-pattern> </servlet-mapping></web-app> |
這里我把applicationContext改了一個名字，以免和我自己本身用的沖突，并且設(shè)置了一下觸發(fā)springmvc的url模式，是以.do結(jié)尾發(fā)起請求
下面是AngularJSTestApplicationContext.xml
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
<?xml version="1.0" encoding="UTF-8"?><beans xmlns="http://www.springframework.org/schema/beans" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:p="http://www.springframework.org/schema/p" xmlns:mvc="http://www.springframework.org/schema/mvc" xmlns:context="http://www.springframework.org/schema/context" xmlns:aop="http://www.springframework.org/schema/aop" xmlns:tx="http://www.springframework.org/schema/tx" xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans-3.0.xsd http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context-3.0.xsd http://www.springframework.org/schema/mvc http://www.springframework.org/schema/mvc/spring-mvc-3.0.xsd http://www.springframework.org/schema/aop http://www.springframework.org/schema/aop/spring-aop-3.0.xsd http://www.springframework.org/schema/tx http://www.springframework.org/schema/tx/spring-tx-3.0.xsd"><mvc:annotation-driven /><context:component-scan base-package="com.baobaotao.web"/><bean class="org.springframework.web.servlet.view.InternalResourceViewResolver"> <property name="prefix" value="/WEB-INF/jsp/" /> <property name="suffix" value=".jsp" /></bean></beans> |
我直接用了<mvc:annotation-driven /> 就用默認的數(shù)據(jù)轉(zhuǎn)換器了，因為默認的里面有對Json串進行數(shù)據(jù)綁定的轉(zhuǎn)換器
這樣mvc的環(huán)境已經(jīng)搭建好了，下面我們寫頁面
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
|
<%@ 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 ng-app=""><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><script type="text/javascript" src="../angular.js"></script><title>AngularJSTest</title></head><body ng-controller="MyController"> <p>User</p> <p>ID</p> <input id="id" name="id" ng-model="saveUser.id"> <br> <p>Name</p> <input id="id" name="name" ng-model="saveUser.name"> <br> <p>age</p> <input id="id" name="age" ng-model="saveUser.age"> <br> <button ng-click="getUser()">提交</button> <script> function MyController($scope, $http){ $scope.saveUser = { id:1, name:"John", age:"16" }; $scope.getUser = function(){ $http({ method: "POST", url: "http://localhost:8080/SpringMVC/AngularJS/getUser.do", data: $scope.saveUser }).success(function (data, status){ // handle success }) }; } </script></body></html> |
頁面很簡單，有三個輸入?yún)?shù)，id，name，age綁定了控制器里面的saveUser對象的屬性，這個也對應(yīng)了我后臺需要綁定的數(shù)據(jù)的屬性名稱。對于AngularJs,在body標(biāo)簽處聲明了一個控制器MyController，之后在script中對這個控制器里面的saveUser 對象屬性進行了初始化并且定義了一個方法getUser，它是傳遞參數(shù)的關(guān)鍵。之后制定了當(dāng)點擊提交按鈕以后會把數(shù)據(jù)傳遞出去。
看一下getUser方法，看上去很像ajax的提交數(shù)據(jù)方式，指定了請求的方法是Post，請求的地址url以及請求中要發(fā)送的數(shù)據(jù)data，這里我將MyController控制器中的對象屬性作為數(shù)據(jù)進行傳遞，這個對象在傳輸?shù)臅r候會自動的將其結(jié)構(gòu)轉(zhuǎn)換成Json格式進行傳遞
下面貼上后臺Controller的代碼
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
|
package com.baobaotao.web;import com.baobaoto.domain.AngularUser;import org.springframework.stereotype.Controller;import org.springframework.web.bind.annotation.RequestBody;import org.springframework.web.bind.annotation.RequestMapping;import org.springframework.web.bind.annotation.RequestMethod;import org.springframework.web.bind.annotation.ResponseBody;import org.springframework.web.servlet.ModelAndView;@Controller@RequestMapping(value="/AngularJS")public class TestAngularJS { @RequestMapping("/intro.do") public ModelAndView intro(){ ModelAndView mav = new ModelAndView(); mav.setViewName("AngularJsTest"); return mav; } @RequestMapping(value="/getUser.do", method=RequestMethod.POST) public String getUser(@RequestBody AngularUser angularUser){ System.out.println("ID" + angularUser.getId()); System.out.println("name" + angularUser.getName()); System.out.println("age" + angularUser.getAge()); return null; }} |
頁面上的請求映射到了這里的getUser方法，因為頁面上提出的請求方法是post，所以我們這里也設(shè)定RequestMapping的method為post，最為關(guān)鍵的就是@RequestBody這個注釋，其可以將傳來的Json格式的數(shù)據(jù)與Bean中的屬性值進行直接綁定，也就是說這里的AngularUser 對象內(nèi)的屬性已經(jīng)成功的被賦值了，這里貼上AngularUser Bean定義
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
|
package com.baobaoto.domain;public class AngularUser { Long id; String name; String age; public Long getId() { return id; } public void setId(Long id) { this.id = id; } public String getName() { return name; } public void setName(String name) { this.name = name; } public String getAge() { return age; } public void setAge(String age) { this.age = age; }} |
部署到服務(wù)器上運行，直接點擊提交按鈕以后后臺控制臺結(jié)果
ID1
nameJohn
age16
之后我們將input中的數(shù)值改變?yōu)?、David、17，點擊提交按鈕控制臺結(jié)果
ID2
nameDavid
age17
測試成功
從后臺獲取數(shù)據(jù)
這個要容易些，對原有的內(nèi)容適當(dāng)修改就可以了
頁面
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
|
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html ng-app=""><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><script type="text/javascript" src="../angular.js"></script><title>AngularJSTest</title></head><body ng-controller="MyController"> <p>User</p> <p>ID</p> <input id="id" name="id" ng-model="saveUser.id"> <br> <p>Name</p> <input id="id" name="name" ng-model="saveUser.name"> <br> <p>age</p> <input id="id" name="age" ng-model="saveUser.age"> <br> <ul> <li ng-repeat="x in infos"> {{ x.ID + x.name + x.age }} </li> </ul> <button ng-click="getUser()">提交</button> <script> function MyController($scope, $http){ $scope.saveUser = { id:1, name:"John", age:"16" }; $scope.getUser = function(){ $http({ method: "POST", url: "http://localhost:8080/SpringMVC/AngularJS/getUser.do", data: $scope.saveUser }).success(function (data){ $scope.infos = data; }) }; } </script></body></html> |
這里增加了一個ul標(biāo)簽用來接收從后臺傳過來的數(shù)據(jù)，里面存儲的是一個Json數(shù)組，這個數(shù)組在當(dāng)我們點擊按鈕之后觸發(fā)的回調(diào)函數(shù)中進行賦值，而回調(diào)的這個函數(shù)的參數(shù)data就是我們從后臺獲取到的數(shù)據(jù)，具體data是怎樣的要看后臺Controller中返回的數(shù)值是怎樣的。這里我們返回的是一個Json數(shù)組
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
|
package com.baobaotao.web;import com.baobaoto.domain.AngularUser;import org.springframework.stereotype.Controller;import org.springframework.web.bind.annotation.RequestBody;import org.springframework.web.bind.annotation.RequestMapping;import org.springframework.web.bind.annotation.RequestMethod;import org.springframework.web.bind.annotation.ResponseBody;import org.springframework.web.servlet.ModelAndView;import java.util.ArrayList;import java.util.HashMap;import java.util.List;import java.util.Map;@Controller@RequestMapping(value="/AngularJS")public class TestAngularJS { @RequestMapping("/intro.do") public ModelAndView intro(){ ModelAndView mav = new ModelAndView(); mav.setViewName("AngularJsTest"); return mav; } @RequestMapping(value="/getUser.do", method=RequestMethod.POST) @ResponseBody public List<Map<String, String>> getUser(@RequestBody AngularUser angularUser){ System.out.println("ID" + angularUser.getId()); System.out.println("name" + angularUser.getName()); System.out.println("age" + angularUser.getAge()); List<Map<String, String>> list = new ArrayList<Map<String, String>>(); for(int i = 0; i < 5; i++){ Map<String, String> map = new HashMap<String, String>(); map.put("ID", String.valueOf(i)); map.put("name", String.valueOf(i)); map.put("age", String.valueOf(i)); list.add(map); } return list; }} |
上面是修改過的Controller，我將返回值改為了一個list，里面的數(shù)據(jù)是Map這樣就剛好符合Json數(shù)組的數(shù)據(jù)模式了，當(dāng)然最重要的是這里在方法前需要添加一個@ResponseBody 注釋，它可以把返回的值轉(zhuǎn)化為Json格式的數(shù)據(jù)
好了，運行一下程序試試，點擊提交按鈕，出現(xiàn)了結(jié)果
測試成功
上面這兩種是最簡單的方式實現(xiàn)了AngularJs和springmvc的結(jié)合使用，基本的功能算是實現(xiàn)了，后面若學(xué)到還有其他方法會在這里補充
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持服務(wù)器之家。
原文鏈接：http://blog.csdn.net/dandancc007/article/details/44201735
