基于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}按实际情况设置
8，启动tomcat，然后用浏览器打开vue_hello.html，页面显示如下
user查询用户
点击“查询用户”按钮，页面显示如下
{ "id": null, "userName": "1", "sex": "男" }
查询用户
10，至此，基于vue和springmvc，可实现前后端分离，两者之间通过http+json交互数据。