首页
所有分类
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 相关文章推荐
JS去掉第一个字符和最后一个字符的实现代码
Feb 20 Javascript
jquery操作select方法汇总
Feb 05 Javascript
jQuery中的siblings用法实例分析
Dec 24 Javascript
javascript每日必学之基础入门
Feb 16 Javascript
总结Node.js中的一些错误类型
Aug 15 Javascript
JS+CSS3制作炫酷的弹窗效果
Nov 08 Javascript
react 父组件与子组件之间的值传递的方法
Sep 14 Javascript
轻量级JS Cookie插件js-cookie的使用方法
Mar 22 Javascript
详解webpack+ES6+Sass搭建多页面应用
Nov 05 Javascript
JavaScript oncopy事件用法实例解析
May 13 Javascript
JavaScript图片旋转效果实现方法详解
Jun 28 Javascript
让Vue响应Map或Set的变化操作
Nov 11 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
DSP(2) R601SW(1) 接收机(2) 电子管(5) 矿石收音机(1) 修复(2) 车机(1) 放大器(1) 海燕B411(1) E1-XM(1)
You might like
百事可乐也出咖啡了 双倍咖啡因双倍快乐
2021/03/03 咖啡文化
PHP反向代理类代码
2014/08/15 PHP
php商品对比功能代码分享
2015/09/24 PHP
PHP中spl_autoload_register()函数用法实例详解
2016/07/18 PHP
php+ajax实现无刷新文件上传功能(ajaxuploadfile)
2018/02/11 PHP
php简单计算权重的方法示例【适合抽奖类应用】
2019/06/10 PHP
PHP使用PDO、mysqli扩展实现与数据库交互操作详解
2019/07/20 PHP
Laravel如何实现适合Api的异常处理响应格式
2020/06/14 PHP
JScript中的&quot;this&quot;关键字使用方式补充材料
2007/03/08 Javascript
一些主流JS框架中DOMReady事件的实现小结
2011/02/12 Javascript
jQuery EasyUI API 中文文档 - Form表单
2011/10/06 Javascript
js/jQuery对象互转(快速操作dom元素)
2013/02/04 Javascript
Jquery的基本对象转换和文档加载用法实例
2015/02/25 Javascript
jQuery内容折叠效果插件用法实例分析(附demo源码)
2016/04/28 Javascript
详解堆的javascript实现方法
2016/11/29 Javascript
Vue中使用clipboard实现复制功能
2018/09/05 Javascript
pageGroup.js实现分页功能
2019/07/27 Javascript
VScode格式化ESlint方法(最全最好用方法)
2019/09/10 Javascript
微信小程序实现左侧滑动导航栏
2020/04/08 Javascript
[46:12]完美世界DOTA2联赛循环赛 DM vs Matador BO2第一场 11.04
2020/11/04 DOTA
使用Python的Scrapy框架编写web爬虫的简单示例
2015/04/17 Python
python 实现红包随机生成算法的简单实例
2017/01/04 Python
python 与GO中操作slice，list的方式实例代码
2017/03/20 Python
Python中的pygal安装和绘制直方图代码分享
2017/12/08 Python
用matplotlib画等高线图详解
2017/12/14 Python
使用Python通过win32 COM实现Word文档的写入与保存方法
2018/05/08 Python
利用Python如何实现数据驱动的接口自动化测试
2018/05/11 Python
Selenium chrome配置代理Python版的方法
2018/11/29 Python
在Python中将函数作为另一个函数的参数传入并调用的方法
2019/01/22 Python
PyQt5下拉式复选框QComboCheckBox的实例
2019/06/25 Python
python代码xml转txt实例
2020/03/10 Python
来自南加州灵感的工作和娱乐服装：TravisMathew
2019/05/01 全球购物
李开复演讲稿
2014/05/24 职场文书
2014国庆节标语口号
2014/09/19 职场文书
2016年社区党支部公开承诺书
2016/03/25 职场文书
mysql5.7的安装及Navicate长久免费使用的实现过程
2021/11/17 MySQL