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

最近想学习AngularJS的使用，网上搜了一圈后，折腾了半天解决病菌后，成功使用AngularJS整合Springmvc、Spring、Mybatis搭建了一个开发环境。(这里春天使用的版本是4.0.6，Mybatis版本是3.2.5，AngularJS的版本是1.0.3)

第一步：创建一专家项目，在pom.xml下添加需要的包

项目xmlns=' http://aven。阿帕奇。org/POM/4。0 .0 ' xmlns : xsi=' http://www。w3。org/2001/XMLSchema-instance ' xsi 3360 schema location=' http://aven。阿帕奇。org/POM/4。0 .0 http://maven.apache.org/maven-v4_0_0.xsd'车型版本4。0 .0/型号版本groupIdtest.AngularSpringmvcMybatis/groupId artifactinglarlspringmvcmybatis/artifactId packing war/packing依赖关系组id log4j/组id artifactIdlog4j/artifactId版本1 .2 .16/版本/依赖关系依赖关系groupIdjavax.servlet/groupId人工智能服务程序-应用编程接口/人工智能版本3.0--1/版本/依赖关系依赖关系组id sm/组id artifactism/artifactId版本3.3/版本/依赖关系依赖关系组id/group id artifact ism-commons/artifact id版本3.3/版本/依赖关系组id sm/组id artifactism-tree/artifactId版本3第二步：在src/main/resources下添加配置文件，如下：

（注：如果刚创建的专家项目中没显示src/main/resources与src/test/java目录，可以右键项目，再属性，在爪哇构建路径中，将Java运行时环境系统库修改为1.7版本，如下)

配置文件中applicationContext.xml如下：

？可扩展标记语言版本='1.0 '编码='UTF-8 '？beans xmlns=' http://www。弹簧框架。org/schema/beans ' xmlns : xsi=' http://www .w3。org/2001/XMLSchema-instance ' xmlns : p=' http://www .弹簧框架。org/schema/p ' xmlns : context=' 3http://www-自动扫描-context :组件-扫描基本包=' com。欣。Dao '/context :组件-扫描基础-包=' com。欣。服务“/！-配置数据源-bean id='数据源' class=' org。弹簧框架。JDBC。数据源。' drivermanagerdatasource '属性名称='driverClassName '值='com.mysql.jdbc.Driver'/属性名称='url '值=' JDBC : MySQL ://localhost 33603306/db _ news '/属性名称='用户名'值='root'/属性名称='密码'值=' root '/bean！-配置mybatis的sqlSessionFactory-bean id=' sqlSessionFactory ' class=' org。我的巴蒂斯。春天。sqlsessionfactorybean '属性名称='数据源' ref='数据源'/！-自动扫描mappers.xml文件，要加上classpath:com/.-属性名=“映射器位置”值=“类路径： com/hin/mappers/* .XML '/属性！-米巴蒂斯配置文件-属性名='配置位置'值='类路径： mybatis-config。XML '/属性/bean！- DAO接口所在包名春天，会自动查找其下的类比恩类=' org。我的巴蒂斯。春天。映射器。mapperscanerconfigurer '属性名称='basePackage '值='com.hin.dao' /属性名称='sqlSessionFactoryBeanName '值=' sqlSessionFactory '/属性/比恩！- (事务管理)事务管理器，请对全局tx-bean id='事务管理器' class=' org。弹簧框架。JDBC。数据源。“datasourcetransactionmanager”属性名称='数据源' ref='数据源'/bean！-配置事务通知属性- tx:advice id='txAdvice '事务管理器='transactionManager '！-定义事务传播属性-tx :属性tx :方法名=' insert * '传播=' REQUIRED '/tx :方法名=' update * '传播=' REQUIRED '/tx :方法名=' edit * '传播=' REQUIRED '/tx :方法名=' save * '传播=' REQUIRED '/tx :方法名=' new * '传播=' REQUIRED '-配置事务切面-AOP :配置AOP :切入点id='serviceOperation '表达式='execution(* com.hin.service.*).*(.))'/AOP :顾问建议-ref=' Txadvice '切入点-ref=' ServiceOperation '/AOP : config/beans spring-MVC。可扩展置标语言如下：

？可扩展标记语言版本='1.0 '编码='UTF-8 '？beans xmlns=' http://www。弹簧框架。org/schema/beans ' xmlns : xsi=' http://www .w3。org/2001/XMLSchema-instance ' xmlns : p=' http://www .弹簧框架。org/schema/p ' xmlns : MVC=' http://www-使用注解的包，包括子集-context :组件-扫描基本包=' com。欣。控制器/bean id=' viewcresolver ' class=' org。弹簧框架。网络。servlet。查看。速度视图解决器属性名称=“缓存”值='true'/属性名称='前缀'值=''/属性名称='后缀'值='。html'/属性名='exposeSpringMacroHelpers '值=' true '/bean/bean完后配置web.xml，如下：

！DOCTYPE Web-app PUBLIC '-//Sun Microsystems，Inc .//DTD Web Application 2.3//EN ' ' http://Java。星期日com/DTD/Web-app _ 2 _ 3。数字电视网络应用显示-名称原型创建的网络应用程序/显示-名称！春天配置文件-上下文-参数-名称上下文配置位置/参数-名称param-value class path : application context . XML/param-value/上下文-参数！-编码过滤器-筛选器筛选器-名称编码筛选器/筛选器-名称筛选器-类别组织。弹簧框架。网络。过滤器。字符编码filter/filter-class async-支持true/async-支持init-param-name编码/param-name param-value utf-8/param-value/init-param/filter-mapping filter-namencoding filter/filter-name URL-pattern/*/URL-pattern/filter-mapping！春天监听器-监听器监听器-类组织。弹簧框架。网络。语境。contextloaderlistener/listener-class/listener！-添加对springmvc的支持-servlet servlet-namesprinmvc/servlet-name servlet-class org。弹簧框架。网络。servlet。dispatchersvlet/servlet-class init-param param-namecontextConfigLocation/param-name param-value class path : spring-MVC . XML/param-value/init-param启动时加载1/启动时加载！-async-支持true/async-支持-/servlet servlet-映射servlet-NameSpringMVc/servlet-名称网址模式//网址模式/servlet-映射/web-app第三步：编写各个爪哇类，以下是用户控制器（实现db_news数据库中t_user表的用户添加与用户删除)

打包。欣。控制器；导入Java。乌提尔。列表；导入javax。注释。资源；导入组织。弹簧框架。刻板印象。控制器；导入组织。弹簧框架。网络。绑定。注释。路径变量；导入组织。弹簧框架。网络。绑定。注释。请求映射；导入组织。弹簧框架。网络。绑定。注释。请求方法；导入组织。弹簧框架。网络。绑定。注释。反应体；导入com。欣。实体。用户；导入com。欣。ServiCe。UserServiCe@ Controller @请求映射("/user ")公共类用户控制器{ @资源私有用户服务用户服务；@请求映射('/用户列表。JSON’)public @ response body list user get user list(){ return user service。getalluers()；} @RequestMapping(值='/addUser/{userName} '，方法=RequestMethod .POST)public @ response body void addUser(@ path变量(' userName ')String userName){ user service。添加用户(用户名)；} @RequestMapping(值='/removeUser/{userName} '，方法=RequestMethod .DELETE)public @ response body void remove user(@ path变量(' userName ')String userName){ user service。删除用户(用户名)；} @RequestMapping(值='/removeAllUsers '，方法=RequestMethod .DELETE)public @ response body void remove all users(){ user service。DELETE all()；} @请求映射("/layout ")public String getuserpialpage(){ return ' users/layout '；} } 第四步：引入有角的的射流研究…文件，如下：

这里使用有角的来实现添加用户与删除用户功能主要是UserController.js，如下：

使用"严格";/* * *用户控制器*/var用户控制器=函数($ scope，$ http){ $ scope。fetchuslist=function(){ $ http。get('用户/用户列表。JSON ').成功（函数(userrist){ $ scope。users=userrist});};$ scope。addNewUser=function(NewUser){ $ http。post(' users/AddUser/' NewUser ').success(function(){ $ scope。fetchuslist()；});$ scope . username=}；$ scope。移除用户=函数(用户){ $ http。删除('用户/删除用户/'用户).success(function(){ $ scope。fetchuslist()；});};$ scope。remove all user=function(){ $ http。删除(“用户/删除所有用户”).success(function(){ $ scope。fetchuslist()；});};$ scope。fetchuslist()；};关于有角的的其他文件具体可看源码，最后再右键项目，运行方式梅文安装，再发布到雄猫下就可以看到效果了，如下：

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