AngularJS整合Springmvc、Spring、Mybatis搭建開發(fā)環(huán)境
更新時(shí)間：2016年02月25日 17:23:00 作者：LZGS_4
這篇文章主要介紹了AngularJS整合Springmvc、Spring、Mybatis搭建開發(fā)環(huán)境的相關(guān)資料，為學(xué)習(xí)使用AngularJS做好基礎(chǔ)準(zhǔn)備，感興趣的小伙伴們可以參考一下
最近想學(xué)習(xí)AngularJS的使用，網(wǎng)上搜了一圈后，折騰了半天解決bug后，成功使用AngularJS整合Springmvc、Spring、Mybatis搭建了一個(gè)開發(fā)環(huán)境。（這里Spring使用的版本是4.0.6，Mybatis版本是3.2.5，AngularJS的版本是1.0.3）
第一步：創(chuàng)建一Maven項(xiàng)目，在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下添加配置文件，如下：
（注：如果剛創(chuàng)建的maven項(xiàng)目中沒顯示src/main/resources與src/test/java目錄，可以右鍵項(xiàng)目，再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"> <!-- 自動(dòng)掃描 --> <context:component-scan base-package="com.hin.dao" /> <context:component-scan base-package="com.hin.service" /> <!-- 配置數(shù)據(jù)源 --> <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" /> <!-- 自動(dòng)掃描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會(huì)自動(dòng)查找其下的類 --> <bean class="org.mybatis.spring.mapper.MapperScannerConfigurer"> <property name="basePackage" value="com.hin.dao" /> <property name="sqlSessionFactoryBeanName" value="sqlSessionFactory"></property> </bean> <!-- (事務(wù)管理)transaction manager, use JtaTransactionManager for global tx --> <bean id="transactionManager" class="org.springframework.jdbc.datasource.DataSourceTransactionManager"> <property name="dataSource" ref="dataSource" /> </bean> <!-- 配置事務(wù)通知屬性 --> <tx:advice id="txAdvice" transaction-manager="transactionManager"> <!-- 定義事務(wù)傳播屬性 --> <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> <!-- 配置事務(wù)切面 --> <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監(jiān)聽器 --> <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>
第三步：編寫各個(gè)Java類，以下是用戶控制器（實(shí)現(xiàn)db_news數(shù)據(jù)庫中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來實(shí)現(xiàn)添加用戶與刪除用戶功能主要是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();
};
關(guān)于Angular的其他文件具體可看源碼，最后再右鍵項(xiàng)目，Run as，Maven install，再發(fā)布到Tomcat下就可以看到效果了，如下：
AngularJS整合Springmvc、Spring、Mybatis搭建開發(fā)環(huán)境就完成了，希望對大家的學(xué)習(xí)有所幫助。
您可能感興趣的文章:
- 使用maven整合Spring+SpringMVC+Mybatis框架詳細(xì)步驟(圖文)
- springboot+springmvc+mybatis項(xiàng)目整合
- Java框架搭建之Maven、Mybatis、Spring MVC整合搭建(圖文)
- Spring+SpringMVC+MyBatis整合詳細(xì)教程(SSM)
- 一步步教你整合SSM框架（Spring MVC+Spring+MyBatis）詳細(xì)教程
- SpringMVC4 + MyBatis3 + SQL Server 2014整合教程（含增刪改查分頁）
- 詳解spring+springmvc+mybatis整合注解
- SpringMVC整合mybatis實(shí)例代碼
- MyBatis SpringMVC整合實(shí)現(xiàn)步驟詳解
相關(guān)文章
詳解angular部署到iis出現(xiàn)404解決方案
這篇文章主要介紹了詳解angular部署到iis出現(xiàn)404解決方案，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-08-08
本篇文章主要介紹了詳解AngularJS ui-sref的簡單使用，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-04-04
詳解ng-alain動(dòng)態(tài)表單SF表單項(xiàng)設(shè)置必填和正則校驗(yàn)
這篇文章主要介紹了詳解ng-alain動(dòng)態(tài)表單SF表單項(xiàng)設(shè)置必填和正則校驗(yàn)，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-06-06
這篇文章主要介紹了angularjs實(shí)現(xiàn)分頁和搜索功能，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-01-01
詳解angularjs popup-table 彈出框表格指令
本篇文章主要介紹了angularjs popup-table 彈出框表格指令，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-09-09
Angularjs 實(shí)現(xiàn)移動(dòng)端在線測評效果(推薦)
這篇文章主要介紹了Angularjs 實(shí)現(xiàn)移動(dòng)端在線測評效果,需要的朋友可以參考下2017-04-04
詳解在Angularjs中ui-sref和$state.go如何傳遞參數(shù)
這篇文章主要介紹了詳解在Angularjs中ui-sref和$state.go如何傳遞參數(shù)，詳細(xì)的介紹了ui-sref和$state.go的區(qū)別和如何傳參，有興趣的可以了解下2017-04-04
AngularJs Injecting Services Into Controllers詳解
本文主要介紹AngularJs Injecting Services Into Controllers的知識,這里整理了一下相關(guān)資料，及示例代碼，幫助大家學(xué)習(xí)和理解，有興趣的小伙伴可以參考下2016-09-09
詳解Angular 中 ngOnInit 和 constructor 使用場景
最初學(xué)習(xí)Angular的時(shí)候總是搞不清楚ngOnInit和constructor的區(qū)別，現(xiàn)在我們來稍微理一下兩者之間的區(qū)別。2017-06-06
這篇文章總結(jié)了一些Angular的應(yīng)用技巧,都是在實(shí)際項(xiàng)目中應(yīng)用了的,感覺對于使用Angular還是有一些幫助的，有需要的小伙伴可以參考下2016-09-09