如何在AngularJs中结合SpringMVC使用

本篇文章给大家分享的是有关如何在AngularJs中结合SpringMVC使用，小编觉得挺实用的，因此分享给大家学习，希望大家阅读完这篇文章后可以有所收获，话不多说，跟着小编一起来看看吧。

创新互联是一家专注于网站设计制作、网站制作与策划设计,市北网站建设哪家好?创新互联做网站,专注于网站建设10年,网设计领域的专业建站公司;建站业务涵盖:市北等地区。市北做网站价格咨询:028-86922220

首先我们把springmvc的环境搭好，先来web.xml

<?xml version="1.0" encoding="UTF-8"?>

 SpringMVC
 
 contextConfigLocation
 /WEB-INF/AngularJSTestApplicationContext.xml
 

 
 
  org.springframework.web.context.ContextLoaderListener
 
 

 
 baobaotao
 org.springframework.web.servlet.DispatcherServlet
 
  contextConfigLocation
  /WEB-INF/AngularJSTestApplicationContext.xml
 
 1
 

 
 baobaotao
 *.do

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

下面是AngularJSTestApplicationContext.xml

<?xml version="1.0" encoding="UTF-8"?>

我直接用了就用默认的数据转换器了，因为默认的里面有对Json串进行数据绑定的转换器

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

<%@ page language="java" contentType="text/html; charset=UTF-8"
 pageEncoding="UTF-8"%>





AngularJSTest


 User
 ID
 
 

 Name
 
 

 age

页面很简单，有三个输入参数，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

测试成功

从后台获取数据

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

页面






AngularJSTest


 User
 ID
 
 

 Name
 
 

 age
 
 

 
  
   {{ x.ID + x.name + x.age }}

这里增加了一个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> getUser(@RequestBody AngularUser angularUser){
  System.out.println("ID" + angularUser.getId());
  System.out.println("name" + angularUser.getName());
  System.out.println("age" + angularUser.getAge());
  List> list = new ArrayList>();
  for(int i = 0; i < 5; i++){
   Map map = new HashMap();
   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使用

测试成功

上面这两种是最简单的方式实现了AngularJs和springmvc的结合使用，基本的功能算是实现了

以上就是如何在AngularJs中结合SpringMVC使用，小编相信有部分知识点可能是我们日常工作会见到或用到的。希望你能通过这篇文章学到更多知识。更多详情敬请关注创新互联行业资讯频道。

网页名称：如何在AngularJs中结合SpringMVC使用
文章来源：http://scjbc.cn/article/gcdjhi.html

如何在AngularJs中结合SpringMVC使用

其他资讯