Vue+SpringMVC简单交互实践入门

前言

vue环境搭建与入门，请点击以下链接进入参考：https://blog.csdn.net/srfanqie/article/details/99413233

Vue前端编写

• vue目录结构
  
• App.vue的编写

• 修改config/index.js
  
  现在把Vue项目启动起来，确认项目编译成功，启动成功，等后台项目启动起来后，刷新页面，看是否数据已经取到。现在启动起来是下图这样
  

后台基于SpringMVC搭建过程

• pom.xml必要依赖

    
      junit
      junit
      4.11
      test
    
    
      org.springframework
      spring-webmvc
      4.3.10.RELEASE
    

    
    
      com.fasterxml.jackson.core
      jackson-databind
      2.7.9.1
    
  

• web.xml配置

  Archetype Created Web Application

  
    contextConfigLocation
    
    /WEB-INF/conf/applicationContext*.xml
  

  
    org.springframework.web.context.ContextLoaderListener
  

  
  
    SpringMVC-dispatcher
    org.springframework.web.servlet.DispatcherServlet
    
      contextConfigLocation
      /WEB-INF/conf/springmvc.xml
      
    
    1
  

  
    SpringMVC-dispatcher
    /
  

• springmvc.xml配置

• Controller层简单实现

/**
 * 〈一句话功能简述〉

 * 〈功能详细描述〉
 *
 * @author: 19054863
 * @see: [相关类/方法]（可选）
 * @since: [产品/模块版本] （可选）
 */
@Controller
@RequestMapping("/")
public class ControllerTest {

    //CrossOrigin注解，解决跨域请求问题
    @CrossOrigin(origins = "*", maxAge = 3600)
    @RequestMapping("/hello")
    public @ResponseBody
    Person sayHello() {
        Person person = new Person();
        person.setName("Eric");
        person.setSex("male");
        return person;
    }
}

最后部署到Tomcat服务器将后台项目启动起来，刷新前端页面，此时数据已经过来了

以上就是Vue与SpringMVC的简单交互。