AngularJS整合Springmvc、Spring、My... - 分享生活和学习中的点点滴滴

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

前端技术 2023/09/05 JavaScript

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

本文地址：https://www.stayed.cn/item/14316

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请联系我

微信
QQ好友
QQ空间
腾讯微博
新浪微博
人人网

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案

2024-02(2)
2023-06(1)
2023-05(1)
2023-04(14)
2023-03(3)
2023-01(6)
2022-12(5)
2022-11(5)
2022-07(2)
2022-06(4)
2022-05(3)
2022-03(1)
2021-12(6)
2021-11(1)
2021-10(3)
2021-09(5)
2021-07(5)
2021-02(2)
2021-01(7)
2020-12(18)
2020-11(14)
2020-10(12)
2020-09(10)
2020-08(22)
2020-07(2)
2020-06(1)
2020-04(5)
2020-03(9)
2020-02(7)
2020-01(9)
2019-12(8)
2019-11(10)
2019-10(11)
2019-09(17)
2019-08(16)
2019-07(6)
2019-06(3)
2019-04(1)
2019-03(8)
2019-02(5)
2019-01(1)
2018-11(2)
2018-10(3)
2018-09(1)
2018-08(3)
2018-07(3)
2018-06(7)
2018-04(4)
2018-03(5)
2018-02(4)
2018-01(22)
2017-12(3)
2017-11(5)
2017-10(15)
2017-09(26)
2017-08(1)
2017-07(3)