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

基于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

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配置如下


    
        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}按实际情况设置

    
{{message}}
    查询用户

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

user
查询用户

点击“查询用户”按钮，页面显示如下
{ "id": null, "userName": "1", "sex": "男" }
查询用户

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