angularjs安装

当前位置:首页>AngularJS>angularjs安装>AngularJS整合Springmvc Mybatis环境搭建

AngularJS整合Springmvc Mybatis环境搭建

时间:2015-06-30 02:44来源:网络整理 作者:KKWL 点击:
> 编程语言 > MFC > 正文 编程大巴 AngularJS整合Springmvc Mybatis环境搭建 作者:发布日期:2015-06-29 20:56:46 Tag标签:环境 最近想学习AngularJS的使用,网上搜了一圈后,折腾了半天解决bug后,成

  • > 编程语言 > MFC > 正文
  • 编程大巴
  • AngularJS整合Springmvc Mybatis环境搭建

    作者:  发布日期:2015-06-29 20:56:46

    Tag标签:环境  

  • 最近想学习AngularJS的使用,网上搜了一圈后,折腾了半天解决bug后,成功使用AngularJS整合Springmvc、Spring、Mybatis搭建了一个开发环境。(这里Spring使用的版本是4.0.6,Mybatis版本是3.2.5,AngularJS的版本是1.0.3) 博客最后有源码链接

    第一步:创建一Maven项目,在pom.xml下添加需要的包 <project xmlns="" xmlns:xsi="" xsi:schemaLocation=" 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></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="" xmlns:xsi="" xmlns:p="" xmlns:aop="" xmlns:context="" xmlns:jee="" xmlns:tx="" xsi:schemaLocation=" http://www.springframework.org/schema/aop/spring-aop-4.0.xsd http://www.springframework.org/schema/beans/spring-beans-4.0.xsd http://www.springframework.org/schema/context/spring-context-4.0.xsd http://www.springframework.org/schema/jee/spring-jee-4.0.xsd 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="" xmlns:xsi="" xmlns:p="" xmlns:aop="" xmlns:mvc="" xmlns:context="" xmlns:jee="" xmlns:tx="" xsi:schemaLocation=" http://www.springframework.org/schema/aop/spring-aop-4.0.xsd http://www.springframework.org/schema/beans/spring-beans-4.0.xsd http://www.springframework.org/schema/mvc/spring-mvc-4.0.xsd http://www.springframework.org/schema/context/spring-context-4.0.xsd http://www.springframework.org/schema/jee/spring-jee-4.0.xsd 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" "" > <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下就可以看到效果了,如下:

    \



    源码链接:https://coding.net/u/code2015/p/angularspringmvcmybatis/git


    Author:顾故

    Sign:别输给曾经的自己

  • 延伸阅读:

    返回到首页 返回到编程大巴

    ------分隔线----------------------------