Vue+SpringMVC简单交互实践入门

• 前言
• Vue前端编写
• 后台基于SpringMVC搭建过程

前言

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

Vue前端编写

• vue目录结构

  

• App.vue的编写

<template>
  <div id="app">
    <h1>服务端数据：{{data}}</h1>
    <img src="./assets/logo.png">
    <router-view/>
  </div>
</template>

<script>
export default {
  name: 'App',
  data () {
    return {
      data: 'data from the server'
    }
  },
  mounted: function () {
    this.getData()
  },

  methods: {
    getData () {
      console.log('-------getData')
      this.$http.get('http://localhost:8080/web/hello')
        .then(response => {
          console.log(response)
          console.log(this)
          this.data = response.data
        }, response => {
          console.log('错误...')
        })
    }
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

           

• 修改config/index.js

  

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

  

后台基于SpringMVC搭建过程

• pom.xml必要依赖

<dependencies>
    <dependency>
      <groupId>junit</groupId>
      <artifactId>junit</artifactId>
      <version>4.11</version>
      <scope>test</scope>
    </dependency>
    <dependency>
      <groupId>org.springframework</groupId>
      <artifactId>spring-webmvc</artifactId>
      <version>4.3.10.RELEASE</version>
    </dependency>

    <!-- JSON处理依赖包 -->
    <dependency>
      <groupId>com.fasterxml.jackson.core</groupId>
      <artifactId>jackson-databind</artifactId>
      <version>2.7.9.1</version>
    </dependency>
  </dependencies>
           

• web.xml配置

<web-app>
  <display-name>Archetype Created Web Application</display-name>

  <context-param>
    <param-name>contextConfigLocation</param-name>
    <!-- applicationContex.xml未配置，此处备用 -->
    <param-value>/WEB-INF/conf/applicationContext*.xml</param-value>
  </context-param>

  <listener>
    <listener-class>org.springframework.web.context.ContextLoaderListener</listener-class>
  </listener>

  <!-- SpringMVC配置 -->
  <servlet>
    <servlet-name>SpringMVC-dispatcher</servlet-name>
    <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
    <init-param>
      <param-name>contextConfigLocation</param-name>
      <param-value>/WEB-INF/conf/springmvc.xml</param-value>
      <!-- 默认是/WEB-INF/[servlet名字]-servlet.xml -->
    </init-param>
    <load-on-startup>1</load-on-startup>
  </servlet>

  <servlet-mapping>
    <servlet-name>SpringMVC-dispatcher</servlet-name>
    <url-pattern>/</url-pattern>
  </servlet-mapping>

</web-app>
           

• springmvc.xml配置

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
       xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
       xmlns:mvc="http://www.springframework.org/schema/mvc"
       xmlns:context="http://www.springframework.org/schema/context"
       xmlns:aop="http://www.springframework.org/schema/aop"
       xsi:schemaLocation="http://www.springframework.org/schema/beans
                        http://www.springframework.org/schema/beans/spring-beans-4.0.xsd
                        http://www.springframework.org/schema/mvc
                        http://www.springframework.org/schema/mvc/spring-mvc-4.0.xsd
                        http://www.springframework.org/schema/context
                        http://www.springframework.org/schema/context/spring-context-4.0.xsd
                        http://www.springframework.org/schema/aop
                        http://www.springframework.org/schema/aop/spring-aop-4.0.xsd
                        http://www.springframework.org/schema/tx">

    <!-- SpringMVC配置 -->
    <!-- 组件扫描-->
    <context:component-scan base-package="com.cnsuning">
    </context:component-scan>

    <!-- 启动基于注解的HandlerMapping,可以将请求参数绑定到控制器参数 -->
    <mvc:annotation-driven/>

    <!-- 静态资源配置，css, js, imgs -->
    <mvc:resources location="/static/" mapping="/resources/**"/>

    <bean class="org.springframework.web.servlet.view.InternalResourceViewResolver">
        <property name="viewClass" value="org.springframework.web.servlet.view.JstlView"/>
        <property name="prefix" value="/WEB-INF/jsps/"/>
        <property name="suffix" value=".jsp"/>
    </bean>
</beans>
           

• Controller层简单实现

/**
 * 〈一句话功能简述〉<br>
 * 〈功能详细描述〉
 *
 * @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的简单交互。