【AngularJS】AngularJS整合Springmvc、Mybatis环境搭建

近期想学习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下加入配置文件，例如以下：

（注：假设刚创建的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="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文件，例如以下：

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvTFpHU180/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="">

这里使用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下就能够看到效果了，例如以下：

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvTFpHU180/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="">

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

Author：顾故

Sign：别输给以前的自己

【AngularJS】AngularJS整合Springmvc、Mybatis环境搭建的更多相关文章

springmvc+mybatis环境搭建
1.spring+mybatis 环境搭建: A.配置jdbc和dbcp数据源:注意版本com.mysql.cj.jdbc.Driver B.配置sessionfactory,绑定dbcp及配置map ...
SpringMVC + MyBatis 环境搭建（转）
本文转自:http://blog.csdn.net/zoutongyuan/article/details/41379851 源码地址:https://github.com/starzou/quick ...
idea spring+springmvc+mybatis环境配置整合详解
idea spring+springmvc+mybatis环境配置整合详解 1.配置整合前所需准备的环境: 1.1:jdk1.8 1.2:idea2017.1.5 1.3:Maven 3.5.2 2. ...
Mybatis环境搭建及测试
1.新建java project,导入相应jar包本次使用到的mybatis-3.2.7版本 mybatis需要jar包:mybatis-3.2.7.jar.lib文件下的依赖jar mysql驱动 ...
MyBatis -01- 初识 MyBatis + MyBatis 环境搭建
MyBatis -01- 初识 MyBatis + MyBatis 环境搭建 MyBatis 本是 apache 的一个开源项目 iBatis(iBATIS = "internet" ...
MyBatis之MyBatis环境搭建
MyBatis之MyBatis环境搭建一.MyBatis开发环境搭建 1.引入Jar包 ①MyBatis mybatis-3.4.1.jar ant-1.9.6.jar ant-launcher-1 ...
Mybatis环境搭建中的案例分析及如果自己编写DAO接口的实现类
Mybatis环境搭建中的案例分析public static void main (String[] args) throws Exception { //读配置文件 //第一个: 使用类加载器,只能 ...
【SpringBoot】11.Springboot整合SpringMVC+Mybatis（上）
Springboot整合SpringMVC+Mybatis 需求分析:通过使用Springboot+SpringMVC+Mybatis 整合实现一个对数据库表users表的CRUD操作. 1.创建项目 ...
MyBatis 环境搭建（四）
MyBatis 引言在回顾JDBC时,我们已经创建有 Java 工程,而且也已经导入 mysql 依赖包,这里就直接在原有工程上搭建MyBatis环境,以及使用MyBatis来实现之前用 JDBC ...

随机推荐

selenium grid2 使用远程机器的浏览器
下载 selenium-server-standalone-3.4.0.jar包在selenium-server-standalone-3.4.0.jar包目录下面执行cmd 命令 java -ja ...
ORACLE生成唯一标识函数
-- Create tablecreate table TAB_TEST( id VARCHAR2(40) not null, fxnum VARCHAR2(40)) ---------------- ...
linux批量备份服务器配置文件和目录的脚本
这篇文章主要介绍了linux下批量备份服务器配置文件和目录的方法,需要的朋友可以参考下功能:1. 只在备份机执行,远程的服务器只需要允许备份机用root通过密钥登录:2. 在备份机上配置需要备份哪些 ...
HTML解析HtmlAgility学习
HtmlAgility是一个开源的Html解析库,据说是C#版的JQuery,功能非常强大. 该篇学习它的解析功能,还可以模拟用户请求,创建html,设置代理等等,暂先不研究. ----------- ...
【Android】21.4 图片动画缩放示例
分类:C#.Android.VS2015: 创建日期:2016-03-21 一.简介该例子演示如何动画缩放图片,实现类似"点击看大图"的效果. 二.示例 1.运行截图 2. ...
TreeView 高速单击时不运行AfterCheck时间
解决方法1: 在AfterCheck事件中,通过System.Threading.Thread.Sleep()来控制函数的运行的最短时间.保证函数运行时间必须大于某个值解决方法2: 编写列TreeV ...
graal
https://github.com/graalvm/graal-core/blob/master/docs/Publications.md http://stefan-marr.de/downloa ...
C# 获取FormData数据
通常的方法是你创建一个 FormData 对象.然后你使用append方法来加入任何额外的key和他们的值.就像这样: var form = new FormData(); form.append(& ...
深入理解Eureka - Eureka Client获取注册信息机制
深入理解Eureka - Eureka Client获取注册信息机 Eureka Client提供了定时获取注册信息的机制.Eureka Client获取注册信息的所有逻辑都在DiscoveryCli ...
stock article
stock 征服星辰大海 http://www.tianya.cn/95789158 论坛_悟道股市_天涯社区 http://www.tianya.cn/108318593/bbs?t=post 当下 ...

【AngularJS】AngularJS整合Springmvc、Mybatis环境搭建

【AngularJS】AngularJS整合Springmvc、Mybatis环境搭建的更多相关文章

随机推荐

热门专题