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

转载自：http://www.jb51.net/article/80046.htm

这篇文章主要介绍了AngularJS整合Springmvc、Spring、Mybatis搭建开发环境的相关资料，为学习使用AngularJS做好基础准备，感兴趣的小伙伴们可以参考一下
最近想学习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.0modelVersion> 
 <groupId>test.AngularSpringmvcMybatisgroupId> 
 <artifactId>AngularSpringmvcMybatisartifactId> 
 <packaging>warpackaging> 
 <version>0.0.1-SNAPSHOTversion> 
 <name>AngularSpringmvcMybatis Maven Webappname> 
 <url>http://maven.apache.orgurl> 
 <dependencies> 
 <dependency> 
  <groupId>junitgroupId> 
  <artifactId>junitartifactId> 
  <version>3.8.1version> 
  <scope>testscope> 
 dependency> 

 <dependency> 
  <groupId>org.springframeworkgroupId> 
  <artifactId>spring-webmvcartifactId> 
  <version>4.0.6.RELEASEversion> 
 dependency> 

 <dependency> 
  <groupId>org.springframeworkgroupId> 
  <artifactId>spring-coreartifactId> 
  <version>4.0.6.RELEASEversion> 
 dependency> 

 <dependency> 
  <groupId>org.springframeworkgroupId> 
  <artifactId>spring-txartifactId> 
  <version>4.0.6.RELEASEversion> 
 dependency> 

 <dependency> 
  <groupId>org.springframeworkgroupId> 
  <artifactId>spring-jdbcartifactId> 
  <version>4.0.6.RELEASEversion> 
 dependency> 

 <dependency> 
  <groupId>org.springframeworkgroupId> 
  <artifactId>spring-ormartifactId> 
  <version>4.0.6.RELEASEversion> 
 dependency> 

 <dependency> 
  <groupId>org.springframeworkgroupId> 
  <artifactId>spring-aspectsartifactId> 
  <version>4.0.6.RELEASEversion> 
 dependency> 

 <dependency> 
  <groupId>org.springframeworkgroupId> 
  <artifactId>spring-context-supportartifactId> 
  <version>4.0.6.RELEASEversion> 
 dependency> 

 <dependency> 
  <groupId>org.mybatisgroupId> 
  <artifactId>mybatisartifactId> 
  <version>3.2.5version> 
 dependency> 

 <dependency> 
  <groupId>org.mybatisgroupId> 
  <artifactId>mybatis-springartifactId> 
  <version>1.2.0version> 
 dependency> 

 <dependency> 
  <groupId>org.aspectjgroupId> 
  <artifactId>aspectjweaverartifactId> 
  <version>1.6.8version> 
 dependency> 

 <dependency> 
  <groupId>mysqlgroupId> 
  <artifactId>mysql-connector-javaartifactId> 
  <version>5.1.6version> 
 dependency> 

 <dependency> 
  <groupId>c3p0groupId> 
  <artifactId>c3p0artifactId> 
  <version>0.9.1version> 
 dependency> 

 <dependency> 
  <groupId>log4jgroupId> 
  <artifactId>log4jartifactId> 
  <version>1.2.16version> 
 dependency> 

 <dependency> 
  <groupId>javax.servletgroupId> 
  <artifactId>servlet-apiartifactId> 
  <version>3.0-alpha-1version> 
 dependency> 

 <dependency> 
  <groupId>asmgroupId> 
  <artifactId>asmartifactId> 
  <version>3.3version> 
 dependency> 
 <dependency> 
  <groupId>asmgroupId> 
  <artifactId>asm-commonsartifactId> 
  <version>3.3version> 
 dependency> 
 <dependency> 
  <groupId>asmgroupId> 
  <artifactId>asm-treeartifactId> 
  <version>3.3version> 
 dependency> 

 <dependency> 
  <groupId>ognlgroupId> 
  <artifactId>ognlartifactId> 
  <version>3.0.6version> 
 dependency> 

 <dependency> 
  <groupId>commons-logginggroupId> 
  <artifactId>commons-loggingartifactId> 
  <version>1.1.3version> 
 dependency> 

 <dependency> 
  <groupId>org.apache.velocitygroupId> 
  <artifactId>velocityartifactId> 
  <version>1.7version> 
 dependency> 

 <dependency> 
  <groupId>org.codehaus.jacksongroupId> 
  <artifactId>jackson-mapper-aslartifactId> 
  <version>1.9.12version> 
 dependency> 

 dependencies> 
 <build> 
 <finalName>AngularSpringmvcMybatisfinalName> 
 build> 
project> 

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

（注：如果刚创建的maven项目中没显示src/main/resources与src/test/java目录，可以右键项目，再properties，在Java Build Path中，将JRE System Library修改为1.7版本，如下）

配置文件中applicationContext.xml如下：

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

  
 <bean id="sqlSessionFactory" class="org.mybatis.spring.SqlSessionFactoryBean"> 
  <property name="dataSource" ref="dataSource" /> 
   
  <property name="mapperLocations" value="classpath:com/hin/mappers/*.xml">property> 
   
  <property name="configLocation" value="classpath:mybatis-config.xml">property> 
 bean> 

  
 <bean class="org.mybatis.spring.mapper.MapperScannerConfigurer"> 
  <property name="basePackage" value="com.hin.dao" /> 
  <property name="sqlSessionFactoryBeanName" value="sqlSessionFactory">property> 
 bean> 

  
 <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如下：
  
<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，如下：
 

<web-app> 
 <display-name>Archetype Created Web Applicationdisplay-name> 

  
 <context-param> 
  <param-name>contextConfigLocationparam-name> 
  <param-value>classpath:applicationContext.xmlparam-value> 
 context-param> 
  
 <filter> 
  <filter-name>encodingFilterfilter-name> 
  <filter-class>org.springframework.web.filter.CharacterEncodingFilterfilter-class> 
  <async-supported>trueasync-supported> 
  <init-param> 
   <param-name>encodingparam-name> 
   <param-value>UTF-8param-value> 
  init-param> 
 filter> 
 <filter-mapping> 
  <filter-name>encodingFilterfilter-name> 
  <url-pattern>/*url-pattern> 
 filter-mapping> 
  
 <listener> 
  <listener-class>org.springframework.web.context.ContextLoaderListenerlistener-class> 
 listener> 

  
 <servlet> 
  <servlet-name>springMVCservlet-name> 
  <servlet-class>org.springframework.web.servlet.DispatcherServletservlet-class> 
  <init-param> 
   <param-name>contextConfigLocationparam-name> 
   <param-value>classpath:spring-mvc.xmlparam-value> 
  init-param> 
  <load-on-startup>1load-on-startup> 
   

 servlet> 
 <servlet-mapping> 
  <servlet-name>springMVCservlet-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 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搭建开发环境就完成了，希望对大家的学习有所帮助。