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