java与angularjs_angularjs与springmvc的整合（restful）

REST 指的是一组架构约束条件和原则。满足这些约束条件和原则的应用程序或设计就是RESTful。

最近尝试了一下springmvc框架和google的angularjs进行整合，发现了很多的问题，并且有很多问题无法在网络上找到。幸运的是最后成功把问题都调通了。那么下面我来把自己遇到的问题总结一下。

首先我们要搭建我们的springmvc框架，最初遇到的这个框架感觉很高端，但其实项目的搭建是非常简单的。多的不说先来看一下，最早加载的web.xml吧！

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_2_5.xsd"

id="WebApp_ID" version="2.5">

springmvc

springmvc

org.springframework.web.servlet.DispatcherServlet

contextConfigLocation

classpath:applicationContext.xml,classpath:spring/**/spring-*.xml

1

springmvc

/

default

*.jpg

default

*.js

default

*.css

index.html

index.htm

index.jsp

default.html

default.htm

default.jsp

上面已经有比较详细的注释，我就不在这里赘述了。不过有一点需要简单说明一下，contextConfigLocation配置的使用了通配符的形式，这样就我们可以使用以spring-开头来命名spring配置文件，并且放到指定的目录下，这样就可以一劳永逸了。

下面来看一下，spring-mvc.xml的配置，这个文件的配置更加简单，不过我在这个配置文件的研究上花费了非常多的时间。好了先看一下这个配置文件的内容吧！

xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:mvc="http://www.springframework.org/schema/mvc"

xmlns:context="http://www.springframework.org/schema/context"

xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans.xsd http://www.springframework.org/schema/mvc http://www.springframework.org/schema/mvc/spring-mvc.xsd http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context.xsd">

class="org.springframework.web.servlet.view.InternalResourceViewResolver">

以上是这个文件的配置，基本的功能我都写到注释中了，如果有不明白的大家可以在回复中提出来。

都搞定了之后我们来看看Controller类是怎么实现的。

package com.ice.personnel.controller;

import java.io.IOException;

import java.util.HashMap;

import java.util.List;

import java.util.Map;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

import org.springframework.beans.factory.annotation.Autowired;

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.util.WebUtils;

import com.ice.personnel.bean.User;

import com.ice.personnel.service.IUserService;

@Controller

@RequestMapping(value = "/user")

public class UserController {

/**

* 添加用户(该方法用来测试ajax正常调用)

*

* @return

*/

@RequestMapping(value = "/addUser", method = RequestMethod.POST)

@ResponseBody

public Map addUser(HttpServletRequest request,

HttpServletResponse response) {

User user = new User();

user.setUsername("ice");

Map map = new HashMap();

try {

userService.saveOrUpdateUser(user);

map.put("flag", true);

} catch (Exception e) {

map.put("flag", false);

}

return map;

}

/**

* 获取用户列表()

*

* @return

* @throws IOException

*/

@RequestMapping(value = "/getUserList", method = RequestMethod.POST)

@ResponseBody

public Map getUserList(HttpServletRequest request,

HttpServletResponse response) {

String sPage = WebUtils.findParameterValue(request, "page");

String sPageSize = request.getParameter("pageSize");

int page = Integer.parseInt(sPage);

int pageSize = Integer.parseInt(sPageSize);

Map map = new HashMap();

List userList = userService.getUserList(page, pageSize);

map.put("userList", userList);

return map;

}

/**

* 获取用户列表

*

* @return

*/

@RequestMapping(value = "/userList", method = RequestMethod.GET)

@ResponseBody

public List getUserList(HttpServletRequest request) {

String sPage = WebUtils.findParameterValue(request, "page");

String sPageSize = request.getParameter("pageSize");

int page = Integer.parseInt(sPage);

int pageSize = Integer.parseInt(sPageSize);

List userList = userService.getUserList(page, pageSize);

return userList;

}

/**

* 添加用户

*

* @return

*/

@RequestMapping(value = "/add", method = RequestMethod.PUT)

@ResponseBody

public List addUser(@RequestBody User user, HttpServletRequest request) {

String sPage = WebUtils.findParameterValue(request, "page");

String sPageSize = request.getParameter("pageSize");

int page = Integer.parseInt(sPage);

int pageSize = Integer.parseInt(sPageSize);

userService.saveOrUpdateUser(user);

List userList = userService.getUserList(page, pageSize);

return userList;

}

/**

* 更新用户

*

* @param user

* 前台获取用户对象

* @param request

* 请求对象

* @return

*/

@RequestMapping(value = "/update", method = RequestMethod.POST)

@ResponseBody

public List updateUser(@RequestBody User user,

HttpServletRequest request) {

String sPage = WebUtils.findParameterValue(request, "page");

String sPageSize = request.getParameter("pageSize");

int page = Integer.parseInt(sPage);

int pageSize = Integer.parseInt(sPageSize);

userService.saveOrUpdateUser(user);

List list = userService.getUserList(page, pageSize);

return list;

}

/**

* 删除用户

*

* @param request

* 请求对象

* @return

*/

@RequestMapping(value = "/delete", method = RequestMethod.DELETE)

@ResponseBody

public List deleteUser(HttpServletRequest request) {

String userId = request.getParameter("id");

String sPage = WebUtils.findParameterValue(request, "page");

String sPageSize = request.getParameter("pageSize");

int page = Integer.parseInt(sPage);

int pageSize = Integer.parseInt(sPageSize);

User user = new User(userId);

userService.deleteUser(user);

List list = userService.getUserList(page, pageSize);

return list;

}

/**

* 用户业务接口

*/

@Autowired

private IUserService userService;

}

我这里写的类比较乱，因为我把所有的异常都拿到Controller这里处理了。大家可能注意到了@ResponseBody这个可以保证该方法的返回值为json格式，因为我是为了做单页面程序才这样做的，只做数据的交换不做页面的跳转，springmvc的页面跳转网上的教程有很多我就不介绍了。

还有一点需要说明的是@RequestBody这个标注是为了将前台传递进来js的Object自动封装成相应的对象。前提是属性要一致。后台的基本配置已经基本准备好了。

还有restful我个人理解是一种思想，具体了解该方面的知识可以参考百度、google等搜索引擎

我把User这个类也贴一下:

package com.ice.personnel.bean;

/**

* @author ice

*

*/

public class User {

public User() {

}

public User(String id) {

this.id = id;

}

/**

* @return the id

*/

public String getId() {

return id;

}

/**

* @param id

* the id to set

*/

public void setId(String id) {

this.id = id;

}

/**

* @return the username

*/

public String getUsername() {

return username;

}

/**

* @param username

* the username to set

*/

public void setUsername(String username) {

this.username = username;

}

/**

* @return the password

*/

public String getPassword() {

return password;

}

/**

* @param password

* the password to set

*/

public void setPassword(String password) {

this.password = password;

}

/**

* @return the realname

*/

public String getRealname() {

return realname;

}

/**

* @param realname

* the realname to set

*/

public void setRealname(String realname) {

this.realname = realname;

}

/**

* @return the email

*/

public String getEmail() {

return email;

}

/**

* @param email

* the email to set

*/

public void setEmail(String email) {

this.email = email;

}

/**

* @return the address

*/

public String getAddress() {

return address;

}

/**

* @param address

* the address to set

*/

public void setAddress(String address) {

this.address = address;

}

/**

* @return the zip

*/

public int getZip() {

return zip;

}

/**

* @param zip

* the zip to set

*/

public void setZip(int zip) {

this.zip = zip;

}

/**

* @return the identityCard

*/

public String getIdentityCard() {

return identityCard;

}

/**

* @param identityCard

* the identityCard to set

*/

public void setIdentityCard(String identityCard) {

this.identityCard = identityCard;

}

/**

* id

*/

private String id;

/**

* 用户名

*/

private String username;

/**

* 密码

*/

private String password;

/**

* 真实姓名

*/

private String realname;

/**

* 电子邮箱

*/

private String email;

/**

* 地址

*/

private String address;

/**

* 邮编

*/

private int zip;

/**

* ×××

*/

private String identityCard;

}

这样就可以准备我们的前台程序了。

前台程序也很简单，只需要两个东东。一个是angular.js，一个是angular-resource.js。因为我前台请求使用了angularjs中的resource模块。具体内容请看这里：http://docs.angularjs.org/api/ngResource.$resource

然后我们来关注一下去前台吧！废话不多说，先直接上代码

pageEncoding="UTF-8"%>

Insert title here

style="display: block; margin-left: auto; margin-right: auto;">

用户id
用户名	ng-model="saveUser.username" />
密码	ng-model="saveUser.password" />
用户姓名	ng-model="saveUser.realname" />
ng-click="addUserClick()" />

序号	用户id	用户名称	用户密码	用户姓名	用户操作

ng-class-odd="'odd'">

{{$index + 1}}`user`.`id``user`.`username``user`.`password``user`.`realname` 修改  

href="" ng-click="deleteUser(user)">删除

style="display: block; margin-left: auto; margin-right: auto;">

用户id	ng-model="modifyUser.id" />
用户名	ng-model="modifyUser.username" />
密码	ng-model="modifyUser.password" />
用户姓名	ng-model="modifyUser.realname" />
ng-click="updateUserClick()" />

var projectName = '/' + window.location.pathname.split('/')[1];

var userUrl = {

'addUrl' : projectName + '/user/add',

'deleteUrl' : projectName + '/user/delete',

'updateUrl' : projectName + '/user/update',

'queryUrl' : projectName + '/user/userList'

};

var user = angular.module('userService', [ 'ngResource' ], angular.noop);

user.controller('userController', function($scope, $resource) {

var actions = {

'add' : {

method : 'PUT',

isArray : true,

headers : {

'Content-Type' : 'application/json'

}

},

'delete' : {

method : 'DELETE',

isArray : true

},

'query' : {

method : 'GET',

isArray : true

},

'update' : {

method : 'POST',

isArray : true,

headers : {

'Content-Type' : 'application/json'

}

}

};

var getUserList = $resource(userUrl.queryUrl, {

page : 1,

pageSize : 20

}, actions);

getUserList.query({}, function(data) {

subobj = data;

$scope.mydata = data;

});

var userAdd = $resource(userUrl.addUrl, {

page : 1,

pageSize : 20

}, actions);

$scope.addUserClick = function() {

userAdd.add($scope.saveUser, function(data) {

subobj = data;

$scope.mydata = data;

});

};

var userUpdate = $resource(userUrl.updateUrl, {

page : 1,

pageSize : 20

}, actions);

$scope.updateUserClick = function() {

userUpdate.update($scope.modifyUser, function(data) {

subobj = data;

$scope.mydata = data;

});

};

var userDelete = $resource(userUrl.deleteUrl, {

page : 1,

pageSize : 20,

id : ':id'

}, actions);

$scope.deleteUser = function(user) {

userDelete['delete']({

id : user.id

}, {}, function(data) {

subobj = data;

$scope.mydata = data;

});

};

$scope.updateUser = function(user) {

$scope.modifyUser = user;

};

});

现在这里已经把代码基本都已经贴出来了，可以根据这个代码写一个自己的单页面程序了。前台后台交互都用json来完成，值得注意一点我们如果获取的返回值为list或者数组形式的数组，那么我们应该在定义resource模块的时候，需要指定isArray: true(否则会浏览器报has no method 'push'的异常)。大致的流程是这样的，由于第一次写这么长的博客，写的不是很好。如果大家有什么问题可以给我留言。

我是通过这几个教程学习的，大家有兴趣可以参考一下他们的博文，对大家会很有帮助。

可能大家有疑问，搭建这样一个项目需要哪些jar包呢？我是由maven来管理jar包的，pom的简单配置如下：

xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">

4.0.0

springmvc

springmvc

0.0.1-SNAPSHOT

war

4.0.0.RELEASE

src

maven-compiler-plugin

3.1

1.6

1.6

maven-war-plugin

2.3

web

false

org.springframework

spring-core

${spring.version}

org.springframework

spring-web

${spring.version}

org.springframework

spring-webmvc

${spring.version}

org.springframework

spring-jdbc

${spring.version}

org.springframework

spring-orm

${spring.version}

org.apache.commons

commons-lang3

3.1

javax.servlet

servlet-api

2.5

javax.servlet.jsp

jsp-api

2.1

provided

junit

junit

4.8.2

test

jstl

jstl

1.2

org.hibernate

hibernate-core

4.3.0.Final

org.codehaus.jackson

jackson-core-asl

1.9.13

org.codehaus.jackson

jackson-mapper-lgpl

1.9.13

mysql

mysql-connector-java

5.1.28

有些是不是必须的jar包，所以可以根据自己的需求来导入。如果不是使用maven来管理的话，可以根据artifactId来到maven资料库上面手动下载一下就可以了。

好了就说到这吧！

有问题留言探讨！

我把代码共享到51CTO的下载区了。稍后给出链接  共享链接：http://pan.baidu.com/s/1sjFC22x