AngularJS整合Springmvc、Spring、Mybatis搭建开发环境

最近想学习angularjs的使用，网上搜了一圈后，折腾了半天解决bug后，成功使用angularjs整合springmvc、spring、mybatis搭建了一个开发环境。（这里spring使用的版本是4.0.6，mybatis版本是3.2.5，angularjs的版本是1.0.3）

第一步：创建一maven项目，在pom.xml下添加需要的包

<project xmlns="http://maven.apache.org/pom/4.0.0" xmlns:xsi="http://www.w3.org/2001/xmlschema-instance" 
 xsi:schemalocation="http://maven.apache.org/pom/4.0.0 http://maven.apache.org/maven-v4_0_0.xsd"> 
 <modelversion>4.0.0</modelversion> 
 <groupid>test.angularspringmvcmybatis</groupid> 
 <artifactid>angularspringmvcmybatis</artifactid> 
 <packaging>war</packaging> 
 <version>0.0.1-snapshot</version> 
 <name>angularspringmvcmybatis maven webapp</name> 
 <url>http://maven.apache.org</url> 
 <dependencies> 
 <dependency> 
  <groupid>junit</groupid> 
  <artifactid>junit</artifactid> 
  <version>3.8.1</version> 
  <scope>test</scope> 
 </dependency> 
  
 <dependency> 
  <groupid>org.springframework</groupid> 
  <artifactid>spring-webmvc</artifactid> 
  <version>4.0.6.release</version> 
 </dependency> 
  
 <dependency> 
  <groupid>org.springframework</groupid> 
  <artifactid>spring-core</artifactid> 
  <version>4.0.6.release</version> 
 </dependency> 
  
 <dependency> 
  <groupid>org.springframework</groupid> 
  <artifactid>spring-tx</artifactid> 
  <version>4.0.6.release</version> 
 </dependency> 
  
 <dependency> 
  <groupid>org.springframework</groupid> 
  <artifactid>spring-jdbc</artifactid> 
  <version>4.0.6.release</version> 
 </dependency> 
  
 <dependency> 
  <groupid>org.springframework</groupid> 
  <artifactid>spring-orm</artifactid> 
  <version>4.0.6.release</version> 
 </dependency> 
  
 <dependency> 
  <groupid>org.springframework</groupid> 
  <artifactid>spring-aspects</artifactid> 
  <version>4.0.6.release</version> 
 </dependency> 
  
 <dependency> 
  <groupid>org.springframework</groupid> 
  <artifactid>spring-context-support</artifactid> 
  <version>4.0.6.release</version> 
 </dependency> 
  
 <dependency> 
  <groupid>org.mybatis</groupid> 
  <artifactid>mybatis</artifactid> 
  <version>3.2.5</version> 
 </dependency> 
  
 <dependency> 
  <groupid>org.mybatis</groupid> 
  <artifactid>mybatis-spring</artifactid> 
  <version>1.2.0</version> 
 </dependency> 
  
 <dependency> 
  <groupid>org.aspectj</groupid> 
  <artifactid>aspectjweaver</artifactid> 
  <version>1.6.8</version> 
 </dependency> 
  
 <dependency> 
  <groupid>mysql</groupid> 
  <artifactid>mysql-connector-java</artifactid> 
  <version>5.1.6</version> 
 </dependency> 
  
 <dependency> 
  <groupid>c3p0</groupid> 
  <artifactid>c3p0</artifactid> 
  <version>0.9.1</version> 
 </dependency> 
  
 <dependency> 
  <groupid>log4j</groupid> 
  <artifactid>log4j</artifactid> 
  <version>1.2.16</version> 
 </dependency> 
  
 <dependency> 
  <groupid>javax.servlet</groupid> 
  <artifactid>servlet-api</artifactid> 
  <version>3.0-alpha-1</version> 
 </dependency> 
  
 <dependency> 
  <groupid>asm</groupid> 
  <artifactid>asm</artifactid> 
  <version>3.3</version> 
 </dependency> 
 <dependency> 
  <groupid>asm</groupid> 
  <artifactid>asm-commons</artifactid> 
  <version>3.3</version> 
 </dependency> 
 <dependency> 
  <groupid>asm</groupid> 
  <artifactid>asm-tree</artifactid> 
  <version>3.3</version> 
 </dependency> 
  
 <dependency> 
  <groupid>ognl</groupid> 
  <artifactid>ognl</artifactid> 
  <version>3.0.6</version> 
 </dependency> 
  
 <dependency> 
  <groupid>commons-logging</groupid> 
  <artifactid>commons-logging</artifactid> 
  <version>1.1.3</version> 
 </dependency> 
  
 <dependency> 
  <groupid>org.apache.velocity</groupid> 
  <artifactid>velocity</artifactid> 
  <version>1.7</version> 
 </dependency> 
 
 <dependency> 
  <groupid>org.codehaus.jackson</groupid> 
  <artifactid>jackson-mapper-asl</artifactid> 
  <version>1.9.12</version> 
 </dependency> 
  
 </dependencies> 
 <build> 
 <finalname>angularspringmvcmybatis</finalname> 
 </build> 
</project> 

第二步：在src/main/resources下添加配置文件，如下：

（注：如果刚创建的maven项目中没显示src/main/resources与src/test/java目录，可以右键项目，再properties，在java build path中，将jre system library修改为1.7版本，如下）

配置文件中applicationcontext.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:aop="http://www.springframework.org/schema/aop"  
 xmlns:context="http://www.springframework.org/schema/context" 
 xmlns:jee="http://www.springframework.org/schema/jee" 
 xmlns:tx="http://www.springframework.org/schema/tx" 
 xsi:schemalocation="  
  http://www.springframework.org/schema/aop http://www.springframework.org/schema/aop/spring-aop-4.0.xsd 
  http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans-4.0.xsd 
  http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context-4.0.xsd 
  http://www.springframework.org/schema/jee http://www.springframework.org/schema/jee/spring-jee-4.0.xsd 
  http://www.springframework.org/schema/tx http://www.springframework.org/schema/tx/spring-tx-4.0.xsd">  
   
 <!-- 自动扫描 --> 
 <context:component-scan base-package="com.hin.dao" /> 
 <context:component-scan base-package="com.hin.service" /> 
  
 <!-- 配置数据源 --> 
 <bean id="datasource" 
  class="org.springframework.jdbc.datasource.drivermanagerdatasource"> 
  <property name="driverclassname" value="com.mysql.jdbc.driver"/> 
  <property name="url" value="jdbc:mysql://localhost:3306/db_news"/> 
  <property name="username" value="root"/> 
  <property name="password" value="root"/> 
 </bean> 
 
 <!-- 配置mybatis的sqlsessionfactory --> 
 <bean id="sqlsessionfactory" class="org.mybatis.spring.sqlsessionfactorybean"> 
  <property name="datasource" ref="datasource" /> 
  <!-- 自动扫描mappers.xml文件 ，要加上classpath:com/...--> 
  <property name="mapperlocations" value="classpath:com/hin/mappers/*.xml"></property> 
  <!-- mybatis配置文件 --> 
  <property name="configlocation" value="classpath:mybatis-config.xml"></property> 
 </bean> 
 
 <!-- dao接口所在包名，spring会自动查找其下的类 --> 
 <bean class="org.mybatis.spring.mapper.mapperscannerconfigurer"> 
  <property name="basepackage" value="com.hin.dao" /> 
  <property name="sqlsessionfactorybeanname" value="sqlsessionfactory"></property> 
 </bean> 
 
 <!-- (事务管理)transaction manager, use jtatransactionmanager for global tx --> 
 <bean id="transactionmanager" 
  class="org.springframework.jdbc.datasource.datasourcetransactionmanager"> 
  <property name="datasource" ref="datasource" /> 
 </bean> 
  
 <!-- 配置事务通知属性 --> 
 <tx:advice id="txadvice" transaction-manager="transactionmanager"> 
  <!-- 定义事务传播属性 --> 
  <tx:attributes> 
   <tx:method name="insert*" propagation="required" /> 
   <tx:method name="update*" propagation="required" /> 
   <tx:method name="edit*" propagation="required" /> 
   <tx:method name="save*" propagation="required" /> 
   <tx:method name="add*" propagation="required" /> 
   <tx:method name="new*" propagation="required" /> 
   <tx:method name="set*" propagation="required" /> 
   <tx:method name="remove*" propagation="required" /> 
   <tx:method name="delete*" propagation="required" /> 
   <tx:method name="change*" propagation="required" /> 
   <tx:method name="get*" propagation="required" read-only="true" /> 
   <tx:method name="find*" propagation="required" read-only="true" /> 
   <tx:method name="load*" propagation="required" read-only="true" /> 
   <tx:method name="*" propagation="required" read-only="true" /> 
  </tx:attributes> 
 </tx:advice> 
 
 <!-- 配置事务切面 --> 
 <aop:config> 
  <aop:pointcut id="serviceoperation" 
   expression="execution(* com.hin.service.*.*(..))" /> 
  <aop:advisor advice-ref="txadvice" pointcut-ref="serviceoperation" /> 
 </aop:config> 
 
</beans> 

spring-mvc.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:aop="http://www.springframework.org/schema/aop"  
 xmlns:mvc="http://www.springframework.org/schema/mvc" 
 xmlns:context="http://www.springframework.org/schema/context" 
 xmlns:jee="http://www.springframework.org/schema/jee" 
 xmlns:tx="http://www.springframework.org/schema/tx" 
 xsi:schemalocation="  
  http://www.springframework.org/schema/aop http://www.springframework.org/schema/aop/spring-aop-4.0.xsd 
  http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans-4.0.xsd 
  http://www.springframework.org/schema/mvc http://www.springframework.org/schema/mvc/spring-mvc-4.0.xsd 
  http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context-4.0.xsd 
  http://www.springframework.org/schema/jee http://www.springframework.org/schema/jee/spring-jee-4.0.xsd 
  http://www.springframework.org/schema/tx http://www.springframework.org/schema/tx/spring-tx-4.0.xsd">  
 
 <mvc:annotation-driven /> 
 
 <mvc:resources mapping="/resources/**" location="/resources/" /> 
 
 <bean id="velocityconfig" class="org.springframework.web.servlet.view.velocity.velocityconfigurer"> 
  <property name="resourceloaderpath" value="/web-inf/html/"/> 
 </bean> 
 
 <!-- 使用注解的包，包括子集 --> 
 <context:component-scan base-package="com.hin.controller" /> 
 
 <bean id="viewresolver" class="org.springframework.web.servlet.view.velocity.velocityviewresolver"> 
  <property name="cache" value="true"/> 
  <property name="prefix" value=""/> 
  <property name="suffix" value=".html"/> 
  <property name="exposespringmacrohelpers" value="true"/> 
 </bean> 
 
</beans> 

完后配置web.xml，如下：

<!doctype web-app public 
 "-//sun microsystems, inc.//dtd web application 2.3//en" 
 "http://java.sun.com/dtd/web-app_2_3.dtd" > 
 
<web-app> 
 <display-name>archetype created web application</display-name> 
 
 <!-- spring配置文件 --> 
 <context-param> 
  <param-name>contextconfiglocation</param-name> 
  <param-value>classpath:applicationcontext.xml</param-value> 
 </context-param> 
 <!-- 编码过滤器 --> 
 <filter> 
  <filter-name>encodingfilter</filter-name> 
  <filter-class>org.springframework.web.filter.characterencodingfilter</filter-class> 
  <async-supported>true</async-supported> 
  <init-param> 
   <param-name>encoding</param-name> 
   <param-value>utf-8</param-value> 
  </init-param> 
 </filter> 
 <filter-mapping> 
  <filter-name>encodingfilter</filter-name> 
  <url-pattern>/*</url-pattern> 
 </filter-mapping> 
 <!-- spring监听器 --> 
 <listener> 
  <listener-class>org.springframework.web.context.contextloaderlistener</listener-class> 
 </listener> 
  
 <!-- 添加对springmvc的支持 --> 
 <servlet> 
  <servlet-name>springmvc</servlet-name> 
  <servlet-class>org.springframework.web.servlet.dispatcherservlet</servlet-class> 
  <init-param> 
   <param-name>contextconfiglocation</param-name> 
   <param-value>classpath:spring-mvc.xml</param-value> 
  </init-param> 
  <load-on-startup>1</load-on-startup> 
  <!-- 
  <async-supported>true</async-supported> 
   --> 
   
 </servlet> 
 <servlet-mapping> 
  <servlet-name>springmvc</servlet-name> 
  <url-pattern>/</url-pattern> 
 </servlet-mapping> 
</web-app> 

第三步：编写各个java类，以下是用户控制器（实现db_news数据库中t_user表的用户添加与用户删除）

package com.hin.controller; 
import java.util.list; 
import javax.annotation.resource; 
import org.springframework.stereotype.controller; 
import org.springframework.web.bind.annotation.pathvariable; 
import org.springframework.web.bind.annotation.requestmapping; 
import org.springframework.web.bind.annotation.requestmethod; 
import org.springframework.web.bind.annotation.responsebody; 
import com.hin.entity.user; 
import com.hin.service.userservice; 
 
@controller 
@requestmapping("/users") 
public class usercontroller { 
 
 @resource 
 private userservice userservice; 
  
 @requestmapping("/userlist.json") 
 public @responsebody list<user> getuserlist() { 
  return userservice.getallusers(); 
 } 
 
 @requestmapping(value = "/adduser/{username}", method = requestmethod.post) 
 public @responsebody void adduser(@pathvariable("username") string username) { 
  userservice.adduser(username); 
 } 
 
 @requestmapping(value = "/removeuser/{username}", method = requestmethod.delete) 
 public @responsebody void removeuser(@pathvariable("username") string username) { 
  userservice.deleteuser(username); 
 } 
 
 @requestmapping(value = "/removeallusers", method = requestmethod.delete) 
 public @responsebody void removeallusers() { 
  userservice.deleteall(); 
 } 
 
 @requestmapping("/layout") 
 public string getuserpartialpage() { 
  return "users/layout"; 
 } 
} 

第四步：引入angular的js文件，如下：

这里使用angular来实现添加用户与删除用户功能主要是usercontroller.js，如下：

'use strict'; 
 
/** 
 * usercontroller 
 */ 
var usercontroller = function($scope, $http) { 
 $scope.fetchuserslist = function() { 
  $http.get('users/userlist.json').success(function(userlist){ 
   $scope.users = userlist; 
  }); 
 }; 
 
 $scope.addnewuser = function(newuser) { 
  $http.post('users/adduser/' + newuser).success(function() { 
   $scope.fetchuserslist(); 
  }); 
  $scope.username = ''; 
 }; 
 
 $scope.removeuser = function(user) { 
  $http.delete('users/removeuser/' + user).success(function() { 
   $scope.fetchuserslist(); 
  }); 
 }; 
 
 $scope.removeallusers = function() { 
  $http.delete('users/removeallusers').success(function() { 
   $scope.fetchuserslist(); 
  }); 
 
 }; 
 
 $scope.fetchuserslist(); 
}; 

关于angular的其他文件具体可看源码，最后再右键项目，run as，maven install，再发布到tomcat下就可以看到效果了，如下：

angularjs整合springmvc、spring、mybatis搭建开发环境就完成了，希望对大家的学习有所帮助。