详解AngularJs与SpringMVC简单结合使用
作者：dandancc007 发布时间：2023-10-22 04:19:08
标签：angularjs,springmvc
最近在学习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格式的数据
来源：http://blog.csdn.net/dandancc007/article/details/44201735
0
投稿猜你喜欢
- 更新: 工作中突然想起来，关于Yaml的使用，并不属于Spring的范畴，是org.yaml.snakeyaml处理的。所以yaml的使用应
前言：其实作为一名Java的程序猿，无论你是初学也好，大神也罢，学生管理系统一直都是一个非常好的例子，初学者主要是用数组、List等等来写出- 应用场景假设仓库中只能存放一件产品，生产者将生产出来的产品放入仓库，消费者将仓库中产品取走消费如果仓库中没有产品，则生产者将产品放入仓库，否
- 项目中要使用到在线支付功能 目前常用的在线支付手段主要是 支付宝 和微信。 这里我使用的是支付宝支付，支付宝有个好处就是他有一个沙箱模式 即
- 最近在刷力扣上的题目，刷到了65不同路径，当初上大学的时候，曾在hihocoder上刷到过这道题目，但是现在已经几乎全忘光了，大概的知识点是
- （注意：本文基于JDK1.8）前言元素在存储到内存中，当我们需要使用在内存中存储的元素，这就涉及到在内存中查找元素，今天一起学习Vector
- 简介Arthas 是Alibaba开源的Java诊断工具，动态跟踪Java代码；实时监控JVM状态，可以在不中断程序执行的情况下轻松完成JV
- 在我们的程序设计中，我们经常要加密一些特殊的内容，今天总结了几个简单的加密方法，分享给大家！如何用JAVA实现字符串简单加密解密？为保证用户
- 定义：用于顺序访问集合对象的元素，不需要知道集合对象的底层表示。特点： 1、它支持以不同的方式遍历一个
- 1.雪崩效应 雪崩效应如上图所示，假设我们有3个微服务A，B，C，A调用B，B调用C，如果C挂掉了，由于B是同步调用，不断等待，导致资源耗尽
- 背景SpringBoot集成Beetl后如果页面出现异常会将出现异常之前的页面输出到客户端，但是由于页面不完整会导致用户看到的页面错乱或者空
- 今天来了一个问题：软键盘无法弹出。分析后是因为系统判断当前有外接硬键盘，就会隐藏软键盘。但实际情况并不是这么简单，该问题只有在特定条件下偶现
- 本文实例为大家分享了利用Swing绘制一个动态时钟的具体代码，供大家参考，具体内容如下效果代码在下面，可跳过解析。前言编程实现一个时钟利用S
- Mybatis-Spring当我们使用mybatis和spring整合后为什么下面的代码可以运行?一个问题:我就写了个mapper接口为什么
- 概念二叉搜索树又称二叉排序树，它或者是一棵空树，或者是具有以下性质的二叉树：1、若它的左子树不为空，则左子树上所有节点的值都小于根结点的值。
- 本文实例为大家分享了java实现简单石头剪刀布游戏的具体代码，供大家参考，具体内容如下问题描述Alice, Bob和Cindy一起玩猜拳的游
- 【程序1】题目：有1、2、3、4个数字，能组成多少个互不相同且无重复数字的三位数？都是多少？1.程序分析：可填在百位、十位、个位的数字都是1
- engine的实现结构elasticsearch对于索引中的数据操作如读写get等接口都封装在engine中，同时engine还封装了索引的
- 使用ExecutorService来停止线程服务之前的文章中我们提到了ExecutorService可以使用shutdown和shutdow
- 要想使Java运行，我们可以设计一个面向Java语言特性的虚拟机，并通过编译器将Java程序转换为它可以识别的指令序列，也称为Java字节码
