详解AngularJs与SpringMVC简单结合使用

2019-11-26 11:57:17

字体：大中小

来源：转载

供稿：网友

最近在学习AngularJS的知识，收获不少，不过因为自己平时工作时开发都是用的freemarker+springmvc来做的页面数据交互，所以也自然想到了用angularjs+springmvc来做同样的事情。当然，在学习之前也到网上查阅了非常多的资料，但是都不是那么明细或者简单，至少对于本人来说都是看的是一知半解。所以用了些时间对这种方式进行学习。

在查阅了许多的资料以后，大致明白了AngularJs将数值传递给后台的方式是将要传递的对象Json化之后传递给后台，这点和Ajax比较类似，当然也是属于异步提交数据的方式。本人还没有了解过AngularJs同步方式提交数据是怎样，不过想想只需要将要的数据绑定在input标签上，之后还是用html的提交还是可以简便的实现的。

传递数据到后台

下面就来简单举个例子来说明吧

首先我们把springmvc的环境搭好，先来web.xml

<?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改了一个名字，以免和我自己本身用的冲突，并且设置了一下触发springmvc的url模式，是以.do结尾发起请求

下面是AngularJSTestApplicationContext.xml

<?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 /> 就用默认的数据转换器了，因为默认的里面有对Json串进行数据绑定的转换器

这样mvc的环境已经搭建好了，下面我们写页面

<%@ 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>

页面很简单，有三个输入参数，id，name，age绑定了控制器里面的saveUser对象的属性，这个也对应了我后台需要绑定的数据的属性名称。对于AngularJs,在body标签处声明了一个控制器MyController，之后在script中对这个控制器里面的saveUser 对象属性进行了初始化并且定义了一个方法getUser，它是传递参数的关键。之后制定了当点击提交按钮以后会把数据传递出去。

看一下getUser方法，看上去很像ajax的提交数据方式，指定了请求的方法是Post，请求的地址url以及请求中要发送的数据data，这里我将MyController控制器中的对象属性作为数据进行传递，这个对象在传输的时候会自动的将其结构转换成Json格式进行传递

下面贴上后台Controller的代码

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，所以我们这里也设定RequestMapping的method为post，最为关键的就是@RequestBody这个注释，其可以将传来的Json格式的数据与Bean中的属性值进行直接绑定，也就是说这里的AngularUser 对象内的属性已经成功的被赋值了，这里贴上AngularUser Bean定义

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; }}

部署到服务器上运行，直接点击提交按钮以后后台控制台结果

ID1
nameJohn
age16

之后我们将input中的数值改变为2、David、17，点击提交按钮控制台结果

ID2
nameDavid
age17

测试成功

从后台获取数据

这个要容易些，对原有的内容适当修改就可以了

页面

<!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标签用来接收从后台传过来的数据，里面存储的是一个Json数组，这个数组在当我们点击按钮之后触发的回调函数中进行赋值，而回调的这个函数的参数data就是我们从后台获取到的数据，具体data是怎样的要看后台Controller中返回的数值是怎样的。这里我们返回的是一个Json数组

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，里面的数据是Map这样就刚好符合Json数组的数据模式了，当然最重要的是这里在方法前需要添加一个@ResponseBody 注释，它可以把返回的值转化为Json格式的数据

好了，运行一下程序试试，点击提交按钮，出现了结果