详解AngularJs与SpringMVC简单结合使用
程序员文章站
2023-12-05 20:32:58
最近在学习angularjs的知识，收获不少，不过因为自己平时工作时开发都是用的freemarker+springmvc来做的页面数据交互，所以也自然想到了用angular...
最近在学习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格式的数据
好了，运行一下程序试试，点击提交按钮，出现了结果
测试成功
上面这两种是最简单的方式实现了angularjs和springmvc的结合使用，基本的功能算是实现了，后面若学到还有其他方法会在这里补充
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。