AngularJs与SpringMVC简单结合使用

最新推荐文章于 2021-03-29 15:34:07 发布
原创 最新推荐文章于 2021-03-29 15:34:07 发布 · 2.3w 阅读 · 14 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#angularjs #springmvc

本文介绍了如何将AngularJS与SpringMVC结合，用于数据的传递和获取。通过示例展示了AngularJS如何将数据Json化后传递给后台，以及SpringMVC如何接收并绑定Json数据。同时，文章还演示了从后台获取数据并显示在前端的方法。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

最近在学习AngularJs的知识，收获不少，不过因为自己平时工作时开发都是用的freemarker+springmvc来做的页面数据交互，所以也自然想到了用AngularJs+springmvc来做同样的事情。当然，在学习之前也到网上查阅了非常多的资料，但是都不是那么明细或者简单，至少对于本人来说都是看的是一知半解。所以用了些时间对这种方式进行学习。

在查阅了许多的资料以后，大致明白了AngularJs将数值传递给后台的方式是将要传递的对象Json化之后传递给后台，这点和Ajax比较类似，当然也是属于异步提交数据的方式。本人还没有了解过AngularJs同步方式提交数据是怎样，不过想想只需要将要的数据绑定在input标签上，之后还是用html的提交还是可以简便的实现的。

传递数据到后台

下面就来简单举个例子来说明吧
首先我们把springmvc的环境搭好，先来web.xml

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd" id="WebApp_ID" version="3.0">
  <display-name>SpringMVC</display-name>
  <context-param>
    <param-name>contextConfigLocation</param-name>
    <param-value>/WEB-INF/AngularJSTestApplicationContext.xml</param-value>
  </context-param>

  <listener>
    <listener-class>
        org.springframework.web.context.ContextLoaderListener
    </listener-class>
  </listener>

  <servlet>
    <servlet-name>baobaotao</servlet-name>
    <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
    <init-param>
        <param-name>contextConfigLocation</param-name>
        <param-value>/WEB-INF/AngularJSTestApplicationContext.xml</param-value>
    </init-param>
    <load-on-startup>1</load-on-startup>
  </servlet>

  <servlet-mapping>
    <servlet-name>baobaotao</servlet-name>
    <url-pattern>*.do</url-pattern>
  </servlet-mapping>
</web-app>

这里我把applicationContext改了一个名字，以免和我自己本身用的冲突，并且设置了一下触发springmvc的url模式，是以.do结尾发起请求

下面是AngularJSTestApplicationContext.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:mvc="http://www.springframework.org/schema/mvc"
    xmlns:context="http://www.springframework.org/schema/context"
    xmlns:aop="http://www.springframework.org/schema/aop"
    xmlns:tx="http://www.springframework.org/schema/tx"
    xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans-3.0.xsd
                        http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context-3.0.xsd
                        http://www.springframework.org/schema/mvc http://www.springframework.org/schema/mvc/spring-mvc-3.0.xsd
                        http://www.springframework.org/schema/aop
                        http://www.springframework.org/schema/aop/spring-aop-3.0.xsd
                        http://www.springframework.org/schema/tx
                        http://www.springframework.org/schema/tx/spring-tx-3.0.xsd">
<mvc:annotation-driven />

<context:component-scan base-package="com.baobaotao.web"/>

<bean class="org.springframework.web.servlet.view.InternalResourceViewResolver">
        <property name="prefix" value="/WEB-INF/jsp/" />
        <property name="suffix" value=".jsp" />
</bean>
</beans>

我直接用了<mvc:annotation-driven /> 就用默认的数据转换器了，因为默认的里面有对Json串进行数据绑定的转换器

这样mvc的环境已经搭建好了，下面我们写页面

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html ng-app="">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../angular.js"></script>
<title>AngularJSTest</title>
</head>
<body ng-controller="MyController">
    <p>User</p>
    <p>ID</p>
    <input id="id" name="id" ng-model="saveUser.id">
    <br>
    <p>Name</p>
    <input id="id" name="name" ng-model="saveUser.name">
    <br>
    <p>age</p>
    <input id="id" name="age" ng-model="saveUser.age">
    <br>
    <button ng-click="getUser()">提交</button>
    <script>
        function MyController($scope, $http){
            $scope.saveUser = {
                id:1,
                name:"John",
                age:"16"
            };

            $scope.getUser = function(){
                $http({
                    method: "POST",
                    url: "http://localhost:8080/SpringMVC/AngularJS/getUser.do",
                    data: $scope.saveUser
                }).success(function (data, status){
                    // handle success
                })
            };
        }
    </script>
</body>
</html>

页面很简单，有三个输入参数，id，name，age绑定了控制器里面的saveUser对象的属性，这个也对应了我后台需要绑定的数据的属性名称。对于AngularJs,在body标签处声明了一个控制器MyController，之后在script中对这个控制器里面的saveUser 对象属性进行了初始化并且定义了一个方法getUser，它是传递参数的关键。之后制定了当点击提交按钮以后会把数据传递出去。

看一下getUser方法，看上去很像ajax的提交数据方式，指定了请求的方法是Post，请求的地址url以及请求中要发送的数据data，这里我将MyController控制器中的对象属性作为数据进行传递，这个对象在传输的时候会自动的将其结构转换成Json格式进行传递

下面贴上后台Controller的代码

package com.baobaotao.web;

import com.baobaoto.domain.AngularUser;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.servlet.ModelAndView;

@Controller
@RequestMapping(value="/AngularJS")
public class TestAngularJS {

    @RequestMapping("/intro.do")
    public ModelAndView intro(){
        ModelAndView mav = new ModelAndView();
        mav.setViewName("AngularJsTest");
        return mav;
    }
    @RequestMapping(value="/getUser.do", method=RequestMethod.POST)
    public String getUser(@RequestBody AngularUser angularUser){
        System.out.println("ID" + angularUser.getId());
        System.out.println("name" + angularUser.getName());
        System.out.println("age" + angularUser.getAge());
        return null;
    }
}

页面上的请求映射到了这里的getUser方法，因为页面上提出的请求方法是post，所以我们这里也设定RequestMapping的method为post，最为关键的就是@RequestBody这个注释，其可以将传来的Json格式的数据与Bean中的属性值进行直接绑定，也就是说这里的AngularUser 对象内的属性已经成功的被赋值了，这里贴上AngularUser Bean定义

package com.baobaoto.domain;

public class AngularUser {

    Long id;

    String name;

    String age;

    public Long getId() {
        return id;
    }

    public void setId(Long id) {
        this.id = id;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public String getAge() {
        return age;
    }

    public void setAge(String age) {
        this.age = age;
    }

}

部署到服务器上运行，直接点击提交按钮以后后台控制台结果

ID1
nameJohn
age16

之后我们将input中的数值改变为2、David、17，点击提交按钮控制台结果

ID2
nameDavid
age17

测试成功

从后台获取数据

这个要容易些，对原有的内容适当修改就可以了

页面

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html ng-app="">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../angular.js"></script>
<title>AngularJSTest</title>
</head>
<body ng-controller="MyController">
    <p>User</p>
    <p>ID</p>
    <input id="id" name="id" ng-model="saveUser.id">
    <br>
    <p>Name</p>
    <input id="id" name="name" ng-model="saveUser.name">
    <br>
    <p>age</p>
    <input id="id" name="age" ng-model="saveUser.age">
    <br>
    <ul>
        <li ng-repeat="x in infos">
            {{ x.ID + x.name + x.age }}
    </li>
    </ul>
    <button ng-click="getUser()">提交</button>
    <script>
        function MyController($scope, $http){
            $scope.saveUser = {
                id:1,
                name:"John",
                age:"16"

            };

            $scope.getUser = function(){
                $http({
                    method: "POST",
                    url: "http://localhost:8080/SpringMVC/AngularJS/getUser.do",
                    data: $scope.saveUser
                }).success(function (data){
                    $scope.infos = data;
                })
            };

        }
    </script>
</body>
</html>

这里增加了一个ul标签用来接收从后台传过来的数据，里面存储的是一个Json数组，这个数组在当我们点击按钮之后触发的回调函数中进行赋值，而回调的这个函数的参数data就是我们从后台获取到的数据，具体data是怎样的要看后台Controller中返回的数值是怎样的。这里我们返回的是一个Json数组

package com.baobaotao.web;

import com.baobaoto.domain.AngularUser;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.servlet.ModelAndView;

import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

@Controller
@RequestMapping(value="/AngularJS")
public class TestAngularJS {

    @RequestMapping("/intro.do")
    public ModelAndView intro(){
        ModelAndView mav = new ModelAndView();
        mav.setViewName("AngularJsTest");
        return mav;
    }
    @RequestMapping(value="/getUser.do", method=RequestMethod.POST)
    @ResponseBody
    public List<Map<String, String>> getUser(@RequestBody AngularUser angularUser){
        System.out.println("ID" + angularUser.getId());
        System.out.println("name" + angularUser.getName());
        System.out.println("age" + angularUser.getAge());
        List<Map<String, String>> list = new ArrayList<Map<String, String>>();
        for(int i = 0; i < 5; i++){
            Map<String, String> map = new HashMap<String, String>();
            map.put("ID", String.valueOf(i));
            map.put("name", String.valueOf(i));
            map.put("age", String.valueOf(i));
            list.add(map);
        }
        return list;
    }

}

上面是修改过的Controller，我将返回值改为了一个list，里面的数据是Map这样就刚好符合Json数组的数据模式了，当然最重要的是这里在方法前需要添加一个@ResponseBody 注释，它可以把返回的值转化为Json格式的数据

好了，运行一下程序试试，点击提交按钮，出现了结果

这里写图片描述

测试成功

上面这两种是最简单的方式实现了AngularJs和springmvc的结合使用，基本的功能算是实现了，后面若学到还有其他方法会在这里补充

angular与SpringMVC项目 跨域请求
jiana227的专栏
03-04 2773
一、springMVC后台操作： 1.注解： @Target(ElementType.METHOD) @Retention(RetentionPolicy.RUNTIME) public @interface SetCORNResponseHeader { }2.springMVC  point public class ResponseHeaderAdvice implements A
springmvc+angularjs springmvc 整合angularjs demo
12-28
springmvc+angularjs springmvc 整合angularjs json demo
angularjs + springMVC实现删除
jiuweideqixu的博客
06-12 564
定义interface：//删除，选中多个单选框 public void delete(Long[] ids); 定义service： @Override public void delete(Long[] ids) { for(Long id:ids){// 循环遍历数组进行删除 brandMapper.deleteByPrimaryKey(id); } }定义Controller：@R...
一天之内学AngularJS--权威指南(未完)
世界在变，而我心不变。
07-08 2844
英文原文：Ultimate guide to learning AngularJS in one day一天之内学AngularJS–权威指南AngularJs 是什么？Angular是基于javaScript语言构建的一个MVC/MVVM框架，对创建现代化单WEB应用（甚至是整个网站）至关重要。这篇文章是基于我的经验，建议及最佳实践而编写的一个非常全面的速成课程。术语Angular有一个较短的学习
Spring mvc+Ajax用户登录增删改查功能
09-24
用户登录增删改查的小项目，但包括前台界面设计，js，jQuery,ajax调后台，获取返回结果在前台界面用JS代码中处理，轻量实用适合新手入门项目开发。
详解AngularJs与SpringMVC简单结合使用
10-19
AngularJS与SpringMVC的简单结合使用是目前流行的前后端分离开发模式。AngularJS是一种前端JavaScript框架，它通过模型-视图-控制器（MVC）的模式来管理Web页面的内容。SpringMVC是一个构建Web应用程序的模型-视图-...
AngularJS+springmvc的demo
08-01
在“AngularJS+springmvc的demo”中，我们可以学习到如何将这两个框架结合，创建一个完整的Web应用。尽管这个示例没有涉及数据库连接，但仍然能让我们理解它们的基本交互和工作原理。 ### AngularJS 知识点 1. **...
AngularJS与SpringMVC结合的小项目开发详解
- 在使用AngularJS与SpringMVC结合时，开发者需要确保两者的配置能够对应上，例如处理路径、参数类型等。 ### 知识点三：项目构建和部署 在开发一个AngularJS和SpringMVC结合的小项目时，开发者通常需要使用构建...
AngularJS与SpringMVC入门示例教程
对于这个“AngularJS+springmvc的demo”来说，它是一个入门级别的演示项目，用于展示如何将这两者结合在一起工作，构建一个简单的Web应用。这个项目并没有涉及到数据库的操作，这意味着它更倾向于展示前端和后端的...
AngularJS与Springmvc、Spring、Mybatis集成教程
在现代Web开发中，AngularJS作为一款强大的前端框架，常与后端技术如Spring MVC、Spring和Mybatis结合使用，以构建高效、可维护的单页应用（SPA）。下面将逐步解析如何配置这个开发环境。 首先，我们需要创建一个...
AngularJS+SpringMVC小项目
01-12
一个AngularJS+SpringMVC的小项目，很详细的前台调用angularjs调用后台springMVC的过程，能够运行。
【js类库AngularJs】解决angular+springmvc的post提交问题
Carl_Zhang
01-01 1168
AngularJS诞生于2009年，由Misko Hevery 等人创建，后为Google所收购。是一款优秀的前端JS框架，已经被用于Google的多款产品当中。AngularJS有着诸多特性，最为核心的 是：MVVM、模块化、自动化双向数据绑定、语义化标签、依赖注入、等等。参考资料：angularjs中文网：http://www.apjs.net/angularjs官网：http://angula
AngularJS 五大特性(为克服HTML在构建应用上的不足而设计)
一个人的人生
03-07 1009
AngularJS 是谷歌的一个 JavaScript 框架，旨在简化前端应用程序的开发。如果你在开发单页的应用程序，我敢肯定你已经听说过它。我是 AngularJS 的忠实粉丝，在这篇文章中我将概述五条我为什么这么喜欢它的原因。     #1 良好的应用程序结构 　　通常情况下，我们编写 JavaScript 没有明确的结构。虽然在编写小应用程序的时候没有问题
SpringMVC + Angularjs
u010381707的专栏
11-09 6582
本博客将展示使用AngularJS和Spring MVC4，我们将创建一个增删查改的应用。前端使用AngularJS，后端使用Spring REST API。AngularJS使用$http服务和后端进行异步通信，同时使用AngularJS进行表单验证。
angularjs java mysql,AngularJS整合Springmvc、Spring、Mybatis搭建开发环境
weixin_33835368的博客
03-29 174
最近想学习AngularJS的使用，网上搜了一圈后，折腾了半天解决bug后，成功使用AngularJS整合Springmvc、Spring、Mybatis搭建了一个开发环境。(这里Spring使用的版本是4.0.6，Mybatis版本是3.2.5，AngularJS的版本是1.0.3)第一步：创建一Maven项目，在pom.xml下添加需要的包4.0.0test.AngularSpringmvcM...
java与angularjs_angularjs与springmvc的整合（restful）
weixin_26712065的博客
02-22 381
REST 指的是一组架构约束条件和原则。满足这些约束条件和原则的应用程序或设计就是RESTful。最近尝试了一下springmvc框架和google的angularjs进行整合，发现了很多的问题，并且有很多问题无法在网络上找到。幸运的是最后成功把问题都调通了。那么下面我来把自己遇到的问题总结一下。首先我们要搭建我们的springmvc框架，最初遇到的这个框架感觉很高端，但其实项目的搭建是非常简单的...
spring+springmvc+mybatis+angularjs java web项目
yangshaojun1992的博客
11-05 5837
1.springmvc框架 1.1 什么是springmvc springmvc是spring框架的一个模块，springmvc和spring无需通过中间整合层进行整合。 springmvc是一个基于mvc(软件设计模式)的web框架。 第一步：发起请求到前端控制器(DispatcherServlet) 第二步：前端
SpringMvc+Tomcat+Angular4 部署运行
松门一枝花
08-09 8245
这次的团队开发是，前端开发人员和后台开发人员完全分开开发的。 前端开发采用了Angular4，webstorm 后端开发采用了：spring+springmvc+mybatis，eclipse --------------------------------------- 最后要整合了。 1、angular项目编译 会生成 dist 文件夹。 2、拷贝
【AngularJS】AngularJS整合Springmvc、Mybatis环境搭建
LZGS_4的专栏
06-29 9645
使用maven创建基于AngularJS整合Springmvc、Mybatis的开发环境
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值