Spring and Vue（前后端分离）

一. 创建一个Vue项目（可以使用webpack创建，也可以使用Vue-cli创建），修改src/components/HelloWorld.vue

<template>
  <div class="hello">
    <h1>Welcome {{ title }}</h1>
    <p>Id: <span>{{greeting.id}}</span></p>
    <p>Message: <span>{{greeting.content}}!</span></p>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      title: 'Hello world',
      greeting: {
        id: 'XXX',
        content: 'Hello World'
      }
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1 {
  font-weight: normal;
}
</style>

在CMD中进入该项目目录，执行npm run dev，运行之后，在浏览器访问http://localhost:8080/

二. 新建一个Spring项目，添加web依赖(spring-boot-starter-web)。新建HelloController.java

import java.util.HashMap;
import java.util.Map;
import java.util.UUID;

import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

@RestController
@CrossOrigin(origins="*")    //允许跨域请求
public class HelloController {
	
	@GetMapping("/resource")
	public Map<String,Object> home() {
		Map<String,Object> model = new HashMap<String,Object>();
		model.put("id", UUID.randomUUID().toString());
		model.put("content", "Hello World");
		return model;
	}	
}

运行Spring项目，在CMD中执行$ curl localhost:8080/resource

 三. 在Vue项目中，使用 axios 访问 API

1. 安装axios和vue-axios(npm install --save-dev axios vue-axios)。

2. 修改src/main.js。

//main.js

import axios from 'axios'
import VueAxios from 'vue-axios'

Vue.use(VueAxios, axios);

3. 修改src/components/HelloWorld.vue，使用axios请求数据。

// components/HelloWorld.vue
  mounted(){
    this.axios.get('resource')
      .then(response => {
        console.log(response.data)
        this.greeting = response.data;
      })
      .catch(error => {
        console.log(error)
      })
  }

 4. 修改config/index.js，设置代理服务器，解决跨域问题。

    proxyTable: {
      '/': {   //1.对所有以"/"开头的url做处理
        target: 'http://localhost:8080',  //2.转发到localhost:8080上
        changeOrigin: true,
      }
    }

以上代理服务器内容只能在“开发模式”下才能使用。在生产模式下，只能靠服务器的nginx特性来解决js跨域问题。

或者第3， 4步也可以直接使用这种方式：

// components/HelloWorld.vue
  mounted(){
    this.axios.get('http://localhost:8080/resource')
      .then(response => {
        console.log(response.data)
        this.greeting = response.data;
      })
      .catch(error => {
        console.log(error)
      })
  }

5. 运行Vue项目

Spring项目和Vue项目都没有配置端口的话，先运行Spring项目，Spring项目将运行在8080端口。再运行Vue项目（npm run dev），Vue项目将运行在8081端口。

6. 浏览器中访问http://localhost:8081/

参考：

https://spring.io/guides/tutorials/spring-security-and-angular-js/

https://www.jianshu.com/p/4a872643f5ea

使用 Nginx 部署前后端分离项目，解决跨域问题