springboot+vue前后端连接（基于idea+vscode）

注：本文前提是您已分别顺利跑通springboot和vue框架

Vue框架中处理（vscode）：

App.vue部分代码如下：

<template>
  <img alt="Vue logo" src="./assets/logo.png">
  <Test></Test>
  <div>
    <ul>
      <li v-for="user in users" :key="user.id">
        ID: {{ user.id }}，用户名: {{ user.user }}，密码: {{ user.password }}
      </li>
    </ul>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'
import Test from './components/test/Test.vue'
import axios from 'axios'

export default {
  name: 'App',
  components: {
    HelloWorld,
    Test
  },
  data() {
    return {
      users: [] // 用于保存用户信息
    };
  },
  created() {    //参考vue生命周期，此处是创建过程
    axios.get('http://localhost:8080/findAllUser')
      .then(response => {
        this.users = response.data;
      })
      .catch(error => {
        console.log(error);
      });
  }
}
</script>

关于axios的相关知识，可以参考其他文章（也可用ajax）

后端跨域配置处理（idea）：

关于跨域：注意application.yml配置文件中

server:
  port: 8080

如采用上述设置，启动springboot时url为localhost:8080，但不同于传统的springweb项目，此时若启动vue，其服务端口不为8080（默认情况下8080已被占用则会顺延至8081），此时就需要进行跨域配置。

跨域配置方法如下：

1.全局配置跨域请求

创建一个config类，代码如下

@Configuration
public class WebMvcConfig implements WebMvcConfigurer {

    @Override
    public void addCorsMappings(CorsRegistry registry) {//cors跨域配置
        registry.addMapping("/**")
                .allowedOriginPatterns("*")
                .allowedHeaders("*")
                .allowedMethods("*")
                .allowCredentials(true);
    }
}

2.采用过滤器（filter）的方式

@Component
public class CORSFilter implements Filter {
 
    @Override
    public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain)
            throws IOException, ServletException {
        HttpServletResponse res = (HttpServletResponse) response;
        res.addHeader("Access-Control-Allow-Credentials", "true");
        res.addHeader("Access-Control-Allow-Origin", "*");
        res.addHeader("Access-Control-Allow-Methods", "GET, POST, DELETE, PUT");
        res.addHeader("Access-Control-Allow-Headers", "Content-Type,X-CAF-Authorization-Token,sessionToken,X-TOKEN");
        if (((HttpServletRequest) request).getMethod().equals("OPTIONS")) {
            response.getWriter().println("ok");
            return;
        }
        chain.doFilter(request, response);
    }
    @Override
    public void destroy() {
    }
    @Override
    public void init(FilterConfig filterConfig) throws ServletException {
    }
}

3.配置文件配置（?）

注：此方法配置后可能报错未返回Access-Control-Allow-Origin，截止发布日期本人依然没跑通这个报错，仅供参考

spring:
  mvc:
    cors:
      allowed-origins: http://example.com
      allowed-methods: GET,POST,PUT,DELETE
      allowed-headers: *
      allow-credentials: true
      max-age: 3600

配置结束后同时启动springboot和vue，即可实现前后端连接