【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下添加需要的包

  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如下：

spring-mvc.xml如下：

完后配置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表的用户添加与用户删除）

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 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：别输给曾经的自己