AngularJS整合Springmvc、Spring、Mybatis搭建开发环境

2024-03-06 07:53:04

最近想学习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文件，如下：

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

AngularJS整合Springmvc、Spring、Mybatis搭建开发环境就完成了，希望对大家的学习有所帮助。

详解AngularJs与SpringMVC简单结合使用

最近在学习AngularJS的知识,收获不少,不过因为自己平时工作时开发都是用的freemarker+springmvc来做的页面数据交互,所以也自然想到了用angularjs+springmvc来做同样的事情.当然,在学习之前也到网上查阅了非常多的资料,但是都不是那么明细或者简单,至少对于本人来说都是看的是一知半解.所以用了些时间对这种方式进行学习. 在查阅了许多的资料以后,大致明白了AngularJs将数值传递给后台的方式是将要传递的对象Json化之后传递给后台,这点和Ajax比较类似,当然
Angular.js前台传list数组由后台spring MVC接收数组示例代码

前言本文主要给大家介绍了关于Angular.js前台传list数组由后台spring MVC接收数组的相关内容,分享出来供大家参考学习,下面话不多说,来一起看看详细的介绍吧. 在开发中有时候需要在前台自定义对象,然后把对象封装在list中,在传送到后台,这样的思想也比较合理,直接来看示例代码: 1. 前台代码 $scope.saveScore = function () { $scope.userScoreList = new Array();//自定义数组 angular.forEach (
解决angular的post请求后SpringMVC后台接收不到参数值问题的方法

这是我后台SpringMVC控制器接收isform参数的方法,只是简单的打出它的值: @RequestMapping(method = RequestMethod.POST) @ResponseBody public Map<String, Object> save( @RequestParam(value = "isform", required = false) String isform) { System.out.println("isform value
AngularJS整合Springmvc、Spring、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="
详解SpringMVC和MyBatis框架开发环境搭建和简单实用

1.下载SpringMVC框架架包,下载地址: 点击下载点击打开地址如图所示,点击下载即可然后把相关的jar复制到lib下导入 2.MyBatis(3.4.2)下载点击下载 MyBatis中文文档地址点击查看下载解压之后把jar复制到lib下导入,大概是这样子的 3.jdbc连接库还没有下载...这个是5.1.41版本的... 点击下载解压之后这样子... 4.fastjson 阿里巴巴的json解析库点击下载版本是1.2.24 这个是托管到了github上面的,地址是:点击进入
Electron整合React使用搭建开发环境的步骤详解

简介用于构建用户界面的 JavaScript 库步骤首先创建React npx create-react-app doc 进入到doc项目 cd doc 安装electron npm install electron --save-dev 安装依赖判断是否为生产环境 cnpm install electron-is-dev --save-dev 在项目根目录创建main.js const { app ,BrowserWindow } = require('electron') const
React Native 搭建开发环境的方法步骤

本文介绍了React Native 搭建开发环境,分享给大家,具体如下: 准备工作 node -v:确认是否安装Node,若已经成功安装了,则执行下面的命令:否则先进行Node的安装. npm install -g create-react-native-app:使用npm快速创建React Native应用. create-react-native-app AwesomeProject:创建名为AwesomeProject的项目. cd AwesomeProject:进入项目所在文件目录. y
Python自动化测试Eclipse+Pydev 搭建开发环境

Python自动化测试 Eclipse+Pydev 搭建开发环境 C#之所以容易让人感兴趣,是因为安装完Visual Studio, 就可以很简单的直接写程序了,不需要做如何配置. 对新手来说,这是非常好的"初体验", 会激发初学者的自信和兴趣. 而有些语言的开发环境的配置非常麻烦, 这让新手有挫败感,没有好的"初体验",可能会对这门语言心存敬畏, 而失去兴趣. 作为一个.NET程序员, 用惯了Visual Studio. Visual Studio的强大功能,比
windows下安装QT及visual studio 2017搭建开发环境

1.环境搭建这里并不是说qt必须要和visual studio结合使用,不过用习惯了visual studio开发,继续使用可节省开发时间,并大大提供便利性. 关于安装过程这里不再详细赘述,软件下载链接如下: visual studio:https://www.visualstudio.com/zh-hans/downloads/ QT:http://download.qt.io/archive/qt/(这里推荐安装最新的,原因是vs2017不支持一些老版本的makefile文件生成,这个在文
Maven 搭建开发环境

Maven 是一个基于 Java 的工具,所以要做的第一件事情就是安装 JDK. 系统要求项目要求 JDK Maven 3.3 要求 JDK 1.7 或以上 Maven 3.2 要求 JDK 1.6 或以上 Maven 3.0/3.1 要求 JDK 1.5 或以上内存没有最低要求磁盘 Maven 自身安装需要大约 10 MB 空间.除此之外,额外的磁盘空间将用于你的本地 Maven 仓库.你本地仓库的大小取决于使用情况,但预期至少 500 MB 操作系统没有最低检查 Java 安装
Golang搭建开发环境的图文教程

Golang开发环境搭建 Go 语言开发包国外:https://golang.org/dl/ 国内(推荐): https://golang.google.cn/dl/ 编辑器 Golang:https://www.jetbrains.com/go/ Visual Studio Code: https://code.visualstudio.com/ 搭建 Go 语言开发环境,需要先下载 Go 语言开发包. 查看操作系统及版本 Windows: Mac: Linux: 终端输入uname -a
快速掌握使用Docker搭建开发环境

随着平台的不断壮大,项目的研发对于开发人员而言,对于外部各类环境的依赖逐渐增加,特别是针对基础服务的依赖.这些现象导致开发人员常常是为了简单从而直接使用公有的基础组件进行协同开发,在出现并行开发的情况特别是针对数据库的变动或数据的更改常常会导致其他开发人员无辜增加问题的排查时间,导致整体的开发效率降低,同时对于远程协助也造成了巨大的障碍.为了解决上述存在的问题,将会利用Docker Compose技术辅助开发人员对于开发环境的搭建,最终实现开发人员只要装有Docker就可以完成整个开发环境的搭建
Python入门开发教程 windows下搭建开发环境vscode的步骤详解

目录一.环境介绍二. 搭建python开发环境 2.1 Python版本介绍 2.2 在windows下安装Python环境 2.3 windows下安装VSCode代码编辑器一.环境介绍操作系统: win10 64位 python版本: 3.8 IDE: 采用vscode 用到的相关安装包CSDN打包下载地址: http://xiazai.jb51.net/202107/yuanma/Pytho_jb51.rar 二. 搭建python开发环境 2.1 Python版本介绍因为Pyt

AngularJS整合Springmvc、Spring、Mybatis搭建开发环境

相关推荐

随机推荐