基于vue和springmvc前后端分离，json类接口调用介绍

版本要求：spring-3.2.9.RELEASE、vue-2.9.2、axios-0.17.1，其中axios作为http client供vue访问springmvc的接口。

1，maven配置

org.springframework

spring-aop

3.2.9.RELEASE

org.springframework

spring-beans

3.2.9.RELEASE

org.springframework

spring-context

3.2.9.RELEASE

org.springframework

spring-core

3.2.9.RELEASE

org.springframework

spring-expression

3.2.9.RELEASE

org.springframework

spring-web

3.2.9.RELEASE

org.springframework

spring-webmvc

3.2.9.RELEASE

org.springframework

spring-tx

3.2.9.RELEASE

org.springframework

spring-jdbc

3.2.9.RELEASE

javax.servlet

servlet-api

2.5

commons-lang

commons-lang

2.5

log4j

log4j

1.2.16

com.fasterxml.jackson.core

jackson-databind

2.9.0

com.fasterxml.jackson.core

jackson-core

2.9.0

2，spring配置，spring-app.xml

xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:context="http://www.springframework.org/schema/context"

xmlns:aop="http://www.springframework.org/schema/aop" xmlns:tx="http://www.springframework.org/schema/tx"

xmlns:mvc="http://www.springframework.org/schema/mvc"

xsi:schemaLocation="http://www.springframework.org/schema/beans

http://www.springframework.org/schema/beans/spring-beans-3.2.xsd

http://www.springframework.org/schema/tx

http://www.springframework.org/schema/tx/spring-tx-3.2.xsd

http://www.springframework.org/schema/aop

http://www.springframework.org/schema/aop/spring-aop-3.2.xsd

http://www.springframework.org/schema/context

http://www.springframework.org/schema/context/spring-context-3.2.xsd

http://www.springframework.org/schema/mvc

http://www.springframework.org/schema/mvc/spring-mvc-3.2.xsd">

3.编写控制类

package spring.mvc.controler;

import org.springframework.beans.factory.annotation.Autowired;

import org.springframework.context.annotation.Scope;

import org.springframework.stereotype.Controller;

import org.springframework.web.bind.annotation.PathVariable;

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 spring.mvc.model.User;

@Controller

@Scope("prototype")

@RequestMapping(value="/test")

public class HelloWorldController {

@RequestMapping(value="/users/{userName}", method=RequestMethod.GET)

public @ResponseBody User findUser(@PathVariable("userName") String userName) {

User user = new User();

user.setUserName(userName);

user.setSex("男");

return user;

}

@RequestMapping(value="/users/add", method=RequestMethod.POST)

public @ResponseBody Long createUser(@RequestBody User user) {

user.setId(System.currentTimeMillis());

userMapper.insert(user);

return user.getId();

}

}

4.编写实体类

package spring.mvc.model;

public class User {

private Long id;

private String userName;

private String sex;

public User() {

}

public Long getId() {

return id;

}

public void setId(Long id) {

this.id = id;

}

public String getUserName() {

return userName;

}

public void setUserName(String userName) {

this.userName = userName;

}

public String getSex() {

return sex;

}

public void setSex(String sex) {

this.sex = sex;

}

}

5,编写跨域filter，如果vue容器和springmvc服务容器分开部署，则在springmvc返回消息中增加Access-Control-Allow-Origin为*。

package spring.mvc.filter;

import java.io.IOException;

import javax.servlet.Filter;

import javax.servlet.FilterChain;

import javax.servlet.FilterConfig;

import javax.servlet.ServletException;

import javax.servlet.ServletRequest;

import javax.servlet.ServletResponse;

import javax.servlet.http.HttpServletResponse;

public class CorsFilter implements Filter{

@Override

public void destroy() {

// TODO Auto-generated method stub

}

@Override

public void doFilter(ServletRequest arg0, ServletResponse arg1, FilterChain arg2)

throws IOException, ServletException {

// TODO Auto-generated method stub

HttpServletResponse httpServletResponse = (HttpServletResponse) arg1;

httpServletResponse.setHeader("Access-Control-Allow-Origin", "*");

arg2.doFilter(arg0, httpServletResponse);

}

@Override

public void init(FilterConfig arg0) throws ServletException {

// TODO Auto-generated method stub

}

}

6,假设springmvc服务部署在tomcat，应用名称为springmvc

web.xml配置如下

xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"

xsi:schemaLocation="http://java.sun.com/xml/ns/javaee

http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">

index.html

springMVC

org.springframework.web.servlet.DispatcherServlet

contextConfigLocation

classpath*:/spring-app.xml

1

springMVC

/

default

*.html

corsFilter

spring.mvc.filter.CorsFilter

corsFilter

/*

7,vue_hello.html编写，注意{host}和{port}按实际情况设置

var app99 = new Vue({

el: '#app99',

data: {

message: 'user'

},

methods: {

findUser: function() {

axios.get('http://{host}:{port}/springmvc/test1/users/1')

.then(response => {

console.log(response.data);

this.message = response.data;

})

.catch(error => {

console.log(error);

this.message = error;

})

}

}

})

8，启动tomcat，然后用浏览器打开vue_hello.html，页面显示如下

user

查询用户

点击“查询用户”按钮，页面显示如下

{ "id": null, "userName": "1", "sex": "男" }

查询用户

10，至此，基于vue和springmvc，可实现前后端分离，两者之间通过http+json交互数据。