近期想学习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="">





Author:顾故

Sign:别输给以前的自己





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

  1. springmvc+mybatis环境搭建

    1.spring+mybatis 环境搭建: A.配置jdbc和dbcp数据源:注意版本com.mysql.cj.jdbc.Driver B.配置sessionfactory,绑定dbcp及配置map ...

  2. SpringMVC + MyBatis 环境搭建(转)

    本文转自:http://blog.csdn.net/zoutongyuan/article/details/41379851 源码地址:https://github.com/starzou/quick ...

  3. 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. ...

  4. Mybatis环境搭建及测试

    1.新建java project,导入相应jar包 本次使用到的mybatis-3.2.7版本 mybatis需要jar包:mybatis-3.2.7.jar.lib文件下的依赖jar mysql驱动 ...

  5. MyBatis -01- 初识 MyBatis + MyBatis 环境搭建

    MyBatis -01- 初识 MyBatis + MyBatis 环境搭建 MyBatis 本是 apache 的一个开源项目 iBatis(iBATIS = "internet" ...

  6. MyBatis之MyBatis环境搭建

    MyBatis之MyBatis环境搭建 一.MyBatis开发环境搭建 1.引入Jar包 ①MyBatis mybatis-3.4.1.jar ant-1.9.6.jar ant-launcher-1 ...

  7. Mybatis环境搭建中的案例分析 及 如果自己编写DAO接口的实现类

    Mybatis环境搭建中的案例分析public static void main (String[] args) throws Exception { //读配置文件 //第一个: 使用类加载器,只能 ...

  8. 【SpringBoot】11.Springboot整合SpringMVC+Mybatis(上)

    Springboot整合SpringMVC+Mybatis 需求分析:通过使用Springboot+SpringMVC+Mybatis 整合实现一个对数据库表users表的CRUD操作. 1.创建项目 ...

  9. MyBatis 环境搭建(四)

    MyBatis 引言 在回顾JDBC时,我们已经创建有 Java 工程,而且也已经导入 mysql 依赖包,这里就直接在原有工程上搭建MyBatis环境,以及使用MyBatis来实现之前用 JDBC ...

随机推荐

  1. 使用 docker 搭建 openvpn,创建、删除用户证书

    我自己的配置,服务器:ubuntu16.04 + docker 17.12.0-ce:客户端:win10 + openvpn2.4.5 1 在dockerhub上搜索 openvpn,我是用的是 进去 ...

  2. unity, texture import settings

    如果图片带透明通道,则若勾选Alpha Is Transparency,图片会呈现透明的预览效果.   但Alpha Is Transparency勾选与否是否影响shader的输出效果目前我还不太清 ...

  3. Spring中三种配置Bean的方式

    Spring中三种配置Bean的方式分别是: 基于XML的配置方式 基于注解的配置方式 基于Java类的配置方式 一.基于XML的配置 这个很简单,所以如何使用就略掉. 二.基于注解的配置 Sprin ...

  4. unity + win8.1 apps 小游戏demo

    unity3d用的人挺多. . .本来想写个3d游戏试试. .额..貌似挺麻烦.. . .. ..先用unity写个简单的2d游戏吧.. (adsw回车  或者  触摸屏虚拟摇杆) 开发环境 unit ...

  5. IIS启用GZIP压缩js、css无效的原因及解决方法

    IIS启用GZIP压缩之后,原以为可以压缩所有文件了,包括html.CSS.JS.图片这些文件,但是当我检查的时候,发现并不是这样的,压缩的只有html文件,而CSS.JS并没有压缩 在卡卡网的网站速 ...

  6. NGUI UIPanel绘制原理学习

    NGUI底层绘制都是调用UIDrawCall来完成的,它会动态实例化出材质球,改变UV偏移和缩放(图集显示).并且全部是面片 UIPanel也是面片,但是内部物体遮罩比较特殊,经过查找发现,影响UIP ...

  7. 把UIView转成UIImage,解决模糊失真问题

    近期工作中,遇到一个需求,须要把一个UIView对象转成UIImage对象显示.经过网络搜索.找到例如以下答案: ? 1 2 3 4 5 6 7 8 -(UIImage*)convertViewToI ...

  8. zabbix应用之Low-level discovery监控磁盘IO

    参考文章: http://qicheng0211.blog.51cto.com/3958621/1599776/ zabbix自带的"Template OS Linux"模板支持监 ...

  9. android framework-安装samba

    用于在windows下使用souceinsight访问linux中的android源代码. □    apt-get install samba samba-common      #安装samba ...

  10. Android系统框架介绍

    src目录:主要是完成java代码的编写 assets目录:资源目录 res目录:存在图片,布局文件和字符串.菜单等文件 bin目录:输出文件夹,如生成的APK文件 project,propertie ...