首页
所有分类
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 11 Javascript
Jquery公告滚动+AJAX后台得到数据
Apr 14 Javascript
JavaScript函数的调用以及参数传递
Oct 21 Javascript
利用javascript实现的三种图片放大镜效果实例（附源码）
Jan 23 Javascript
jQuery插件FusionCharts绘制的3D环饼图效果示例【附demo源码】
Apr 02 jQuery
VUE中使用MUI方法
Feb 12 Javascript
详解Vue用cmd创建项目
Feb 12 Javascript
微信小程序实现点击图片放大预览
Oct 21 Javascript
JQuery发送ajax请求时中文乱码问题解决
Nov 14 jQuery
基于html+css+js实现简易计算器代码实例
Feb 28 Javascript
js实现车辆管理系统
Aug 26 Javascript
如何在vue中使用百度地图添加自定义覆盖物（水波纹）
Nov 03 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
Spring JPA(1) Switch(1) TextInputLayout(1) EditText(1) Selenium(1) Spring Bean(1) 远程桌面(2) openEuler(1) Tsmoothie(1) Django(9)
You might like
在 PHP 中使用随机数的三个步骤
2006/10/09 PHP
基于pear auth实现登录验证
2010/02/26 PHP
php简单判断文本编码的方法
2015/07/30 PHP
两个DIV等高的JS的实现代码
2007/12/23 Javascript
关于juqery radio写法的兼容性问题(新老版本jquery)
2010/06/14 Javascript
javascript 原型继承介绍
2011/08/30 Javascript
关于JavaScript的面向对象和继承有利新手学习
2013/01/11 Javascript
Javascript中this的用法详解
2014/09/22 Javascript
JQuery简单实现锚点链接的平滑滚动
2015/05/03 Javascript
JavaScript+html5 canvas实现本地截图教程
2020/04/16 Javascript
js style.display=block显示布局错乱问题的解决方法
2016/09/21 Javascript
angular.js指令中的controller、compile与link函数的不同之处
2017/05/10 Javascript
移动端手指放大缩小插件与js源码
2017/05/22 Javascript
jQuery事件_动力节点Java学院整理
2017/07/05 jQuery
js捆绑TypeScript声明文件的方法教程
2018/04/13 Javascript
vue ssr 实现方式(学习笔记)
2019/01/18 Javascript
Vue axios 将传递的json数据转为form data的例子
2019/10/29 Javascript
vue+iview实现分页及查询功能
2020/11/17 Vue.js
[01:46]新英雄登场
2019/09/10 DOTA
django反向解析和正向解析的方式
2018/06/05 Python
Python使用import导入本地脚本及导入模块的技巧总结
2019/08/07 Python
解决Tensorflow占用GPU显存问题
2020/02/03 Python
Tensorflow安装问题: Could not find a version that satisfies the requirement tensorflow
2020/04/20 Python
Python参数传递实现过程及原理详解
2020/05/14 Python
用CSS3打造HTML5的Logo(实现代码)
2016/06/16 HTML / CSS
CSS3制作皮卡丘动画壁纸的示例
2020/11/02 HTML / CSS
最新教师自我评价分享
2013/11/12 职场文书
中专毕业生自荐信
2013/11/16 职场文书
法学专业本科生自荐信范文
2013/12/17 职场文书
大学生村官心得体会范文
2014/01/04 职场文书
社区活动策划方案
2014/08/21 职场文书
2014年乡镇团委工作总结
2014/12/18 职场文书
2015年度培训工作总结范文
2015/04/02 职场文书
廉洁自律承诺书范文
2015/04/28 职场文书
施工安全保证书
2015/05/09 职场文书
基于Python编写一个监控CPU的应用系统
2022/06/25 Python