|
最近想学习AngularJS的使用，网上搜了一圈后，折腾了半天解决bug后，成功使用AngularJS整合Springmvc、Spring、Mybatis搭建了一个开发环境。（这里Spring使用的版本是4.0.6，Mybatis版本是3.2.5，AngularJS的版本是1.0.3）
第一步：创建一Maven项目，在pom.xml下添加需要的包
4.0.0
test.AngularSpringmvcMybatis
AngularSpringmvcMybatis
war
0.0.1-SNAPSHOT
AngularSpringmvcMybatis Maven Webapp
http://maven.apache.org
junit
junit
3.8.1
test
org.springframework
spring-webmvc
4.0.6.RELEASE
org.springframework
spring-core
4.0.6.RELEASE
org.springframework
spring-tx
4.0.6.RELEASE
org.springframework
spring-jdbc
4.0.6.RELEASE
org.springframework
spring-orm
4.0.6.RELEASE
org.springframework
spring-aspects
4.0.6.RELEASE
org.springframework
spring-context-support
4.0.6.RELEASE
org.mybatis
mybatis
3.2.5
org.mybatis
mybatis-spring
1.2.0
org.aspectj
aspectjweaver
1.6.8
mysql
mysql-connector-java
5.1.6
c3p0
c3p0
0.9.1
log4j
log4j
1.2.16
javax.servlet
servlet-api
3.0-alpha-1
asm
asm
3.3
asm
asm-commons
3.3
asm
asm-tree
3.3
ognl
ognl
3.0.6
commons-logging
commons-logging
1.1.3
org.apache.velocity
velocity
1.7
org.codehaus.jackson
jackson-mapper-asl
1.9.12
AngularSpringmvcMybatis
第二步：在src/main/resources下添加配置文件，如下：
（注：如果刚创建的maven项目中没显示src/main/resources与src/test/java目录，可以右键项目，再properties，在Java Build Path中，将JRE System Library修改为1.7版本，如下）
配置文件中applicationContext.xml如下：
<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 id="sqlSessionFactory" class="org.mybatis.spring.SqlSessionFactoryBean">
<bean class="org.mybatis.spring.mapper.MapperScannerConfigurer">
<bean id="transactionManager"
class="org.springframework.jdbc.datasource.DataSourceTransactionManager">
<tx:advice id="txAdvice" transaction-manager="transactionManager">
spring-mvc.xml如下：
<bean id="velocityConfig" class="org.springframework.web.servlet.view.velocity.VelocityConfigurer">
<property name="resourceLoaderPath" value="/WEB-INF/html/"/>
<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"/>
完后配置web.xml，如下：
Archetype Created Web Application
contextConfigLocation
classpath:applicationContext.xml
encodingFilter
org.springframework.web.filter.CharacterEncodingFilter
true
encoding
UTF-8
encodingFilter
/*
org.springframework.web.context.ContextLoaderListener
springMVC
org.springframework.web.servlet.DispatcherServlet
contextConfigLocation
classpath:spring-mvc.xml
1
springMVC
/
第三步：编写各个Java类，以下是用户控制器（实现db_news数据库中t_user表的用户添加与用户删除）
@Controller
@RequestMapping("/users")
public class UserController {
@Resource
private UserService userService;
@RequestMapping("/userlist.json")
public @ResponseBody List 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，如下：
/**
- 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下就可以看到效果了，如下：
AngularJS整合Springmvc、Spring、Mybatis搭建开发环境就完成了，希望对大家的学习有所帮助。 （编辑：李大同）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!
|
