前后端分类-vue和Spring boot

在学习Java后端的时候，如果自己写页面感觉很麻烦，不写页面又感觉测试起来很不方便，而且写完都是JSON数据，也没什么成就感。所以想自己实现一个简单的前端。

学技术一定要学最新的，现在很流行vue前后端分类，所以就搜了一些vue的资料，主要是看官网教程。

但是真正要将前后端结合在一起，搜的资料特别特别少，一般视频也是做后端前端页面直接拷过来，做前端直接拿着设计好的文档照着文档写，还是没有办法理解前后端到底是怎么交互的。

经过不断摸索，最终终于明白前后端交互的思路。

其实可以想象成是两个服务器上或者两个不同的地址在交互，然后就是通过RESTful接口交互的，后端在controller层有URL访问接口，连同参数可以写成一个完整的路径，前端通过访问这个路径来获取后端的数据。

比如后端访问路径为：

http://localhost:8081/emp/1#/

得到的数据为：

然后前端如何拿到数据并展示呢？

我这里有个简单的demo，主要是methods里面的Axios来获取数据，具体可以看GitHub上的Axios教程，主要明白的就是Axios.get()里面的路径就是后端访问数据的路径，只不过现在是通过前端访问的。也就是我标出来的这两个路径要一样。

<!-- 展示模板 -->
<template>
  <div id="app">
    <img src="./assets/logo.png">
    <input v-model="iid"/>
    <button v-on:click="haData">点击</button>
    <h1>{{this.msg.lastName}}</h1>

    <hello></hello>
  </div>
</template>

<script>
// 导入组件
import Hello from './components/manager/BlogLogin.vue'
import Axios from 'axios'
// import { error } from 'util';
// import { truncate } from 'fs';

export default {
  name: 'app',
  data () {
    return {
      msg: [],
      iid: 2,
      flag: true
    }
  },
  methods: {
    haData () {
      Axios.get('http://localhost:8081/emp/' + this.iid).then((response) => {
        console.log(response.data)
        this.msg = response.data
      }).catch((error) => {
        console.log(error)
      })
    }
  },
  components: {
    Hello
  }
}

</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>