基于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交互数据。
另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。
本文标题：基于vue和springmvc前后端分离，json类接口调用介绍-创新互联
当前链接：http://ybzwz.com/article/cdssgd.html
