首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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

Posted in Javascript onFebruary 25, 2016

最近想学习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下添加配置文件，如下：

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

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

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

配置文件中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文件，如下：

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

这里使用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搭建开发环境

AngularJS整合Springmvc、Spring、Mybatis搭建开发环境就完成了，希望对大家的学习有所帮助。

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

- Author -

LZGS_4

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
wordpress之js库集合研究介绍
Aug 17 Javascript
js获得鼠标的坐标值的方法
Mar 13 Javascript
javascript判断office版本示例
Apr 11 Javascript
简单实现jQuery弹幕效果
May 06 jQuery
Javascript中的async awai的用法
May 17 Javascript
Angular.js自动化测试之protractor详解
Jul 07 Javascript
jQuery实现简单日期格式化功能示例
Sep 19 jQuery
js插件实现图片滑动验证码
Sep 29 Javascript
vue刷新和tab切换实例
Feb 11 Javascript
webpack配置打包后图片路径出错的解决
Apr 26 Javascript
H5+C3+JS实现双人对战五子棋游戏（UI篇）
May 28 Javascript
Vue.js组件实现选项卡以及切换特效
Jul 24 Javascript
JavaScript 正则表达式中global模式的特性
Feb 25 #Javascript
javascript动态获取登录时间和在线时长
Feb 25 #Javascript
基于javascript实现动态时钟效果
Aug 18 #Javascript
jQuery使用zTree插件实现树形菜单和异步加载
Feb 25 #Javascript
灵活的理解JavaScript中的this指向
Feb 25 #Javascript
jQuery插件实现表格隔行变色及鼠标滑过高亮显示效果代码
Feb 25 #Javascript
jQuery插件实现文字无缝向上滚动效果代码
Feb 25 #Javascript
tree shaking(1) 黑屏(2) OOP(1) MutationObserver(1) celery(1) SeaTable(1) Mysql8(2) appdata(1) Outlook(1) minio(1)
You might like
浅析ThinkPHP中的pathinfo模式和URL重写
2014/01/06 PHP
推荐5款跨平台的PHP编辑器
2014/12/25 PHP
php+mysqli使用面向对象方式更新数据库实例
2015/01/29 PHP
php中foreach结合curl实现多线程的方法分析
2016/09/22 PHP
thinkphp5框架调用其它控制器方法 实现自定义跳转界面功能示例
2019/07/03 PHP
Thinkphp5框架实现图片、音频和视频文件的上传功能详解
2019/08/27 PHP
JS 无法通过W3C验证的处理方法
2010/03/09 Javascript
JavaScript高级程序设计（第三版）学习笔记6、7章
2016/03/11 Javascript
JavaScript中有关一个数组中最大值和最小值及它们的下表的输出的解决办法
2016/07/01 Javascript
jQuery插件fullPage.js实现全屏滚动效果
2016/12/02 Javascript
解决OneThink中无法异步提交kindeditor文本框中修改后的内容方法
2017/05/05 Javascript
vue-cli单页应用改成多页应用配置详解
2017/07/14 Javascript
让网站自动生成章节目录索引的多个js代码
2018/01/07 Javascript
详解js正则表达式验证时间格式xxxx-xx-xx形式
2018/02/09 Javascript
vue中使用v-for时为什么不能用index作为key
2020/04/04 Javascript
Python制作数据导入导出工具
2015/07/31 Python
python里使用正则的findall函数的实例详解
2017/10/19 Python
基于Django filter中用contains和icontains的区别(详解)
2017/12/12 Python
Python字典操作详细介绍及字典内建方法分享
2018/01/04 Python
python中的常量和变量代码详解
2018/07/25 Python
python自定义线程池控制线程数量的示例
2019/02/22 Python
Pycharm如何运行.py文件的方法步骤
2020/03/03 Python
一款纯css3实现的动画加载导航
2014/10/08 HTML / CSS
利用Canvas模仿百度贴吧客户端loading小球的方法示例
2017/08/13 HTML / CSS
信息专业大学生自我评价分享
2014/01/17 职场文书
美食节策划方案
2014/05/26 职场文书
信息员培训方案
2014/06/12 职场文书
2014学习十八届四中全会精神思想汇报范文
2014/10/23 职场文书
机关作风建设整改方案
2014/10/27 职场文书
党委班子纠正“四风”问题整改措施
2014/10/28 职场文书
毕业论文致谢信
2015/05/14 职场文书
2015年民主评议党员工作总结
2015/05/19 职场文书
婚宴父亲致辞
2015/07/27 职场文书
大学生心理健康教育心得体会
2016/01/12 职场文书
2019最新版股权转让及委托持股协议书范本
2019/08/07 职场文书
C站最全Python标准库总结,你想要的都在这里
2021/07/03 Python