前后端分离开发是面对企业级项目给出的方案，并非适合所有项目。如果你的项目在工程考量后无需前后端分离，那就没有必要为了前后端分离而前后端分离！

Vue

创建Vue项目

如果你的vue版本是3.0以上，可以在终端使用vue ui指令访问图形化界面。
点击创建-选择目录后创建新项目-输入项目名,并根据需求选择是否初始化git仓库，我这里选择了否
选择手动配置、取消校验工具，选择Router和Vuex
配置环节打开历史记录选项，根据需要选择是否保存设置模板
创建好后选任务-serve-运行，启动后输入-点击两个地址即可看到运行成功

简单介绍

在IDE的终端输入 npm run serve 一样可以运行项目

App.vue文件就是所看到的主页面，router-link是路由，点击主页面的Home和About，来回切换时可以看出并非重新加载页面

      <router-link to="/">Home</router-link>
      <router-link to="/about">About</router-link>

它们是如何做到映射的？

打开router下的index.js

import Vue from 'vue'	
import VueRouter from 'vue-router'	//以上两个为必要引入
import Home from '../views/Home.vue'	//做为组件引入

Vue.use(VueRouter)

  const routes = [
  {
    path: '/',				//注册组件，类似SpringBoot中的映射
    name: 'Home',
    component: Home	
  },
  {
    path: '/about',			//这是vue3.0的新注册方式，效果与上面的相同
    name: 'About',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
  }
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

映射完成后，在App.vue中，<router-view/>决定了组件的显示

创建Book.vue

<template>				//对应html
  <div>
    {{msg}}				//{{}}直接和下方的data中的数据绑定
    <table>
      <tr>
        <td>编号</td>
        <td>图书名称</td>
        <td>作者</td>
      </tr>
      <tr v-for="item in books" :key="item">	//动态绑定数据
        <td>{{item.id}}</td>
        <td>{{item.name}}</td>
        <td>{{item.author}}</td>
      </tr>
    </table>
  </div>
</template>

<script>					//对应js
export default {
  name: "Book",
  data() {
    return {
      msg: "hello vue",				//与上方的msg进行绑定
      books: [					//与上方的books进行绑定
        {
          id: 1,
          name: "java开发实战",
          author: "张三"
        },
        {
          id: 2,
          name: "python开发实战",
          author: "李四"
        }
      ]
    };
  }
};
</script>

<style scoped>					//对应css
</style>

然后将Book.vue在index.js中映射，然后加入app.vue中，访问后应该能看到如下画面

截屏20200410下午3.37.33.png

SpringBoot

构建项目

选择 lombok、mysql驱动、DataJPA等

创建配置文件application.yml，并配置类似如下的数据库连接

spring:
  datasource:
    driver-class-name: com.mysql.cj.jdbc.Driver
    url: jdbc:mysql://localhost:3306/demo?useUnicode=true&characterEncoding=utf-8&serverTimezone=Asia/Shanghai&useSSL=false
    username: root
    password: 123456
    
  jpa:				//这里是让hibernate输入sql,并格式化sql
    show-sql: true
    properties: 
      hibernate:
        format_sql: true
       
server:
  port: 8181

创建实体类Book

@Entity
@Data
public class Book {
    @Id
    private Integer id;
    private String name;
    private String author;
}

创建对应的接口BookRepository

public interface BookRepository extends JpaRepository<Book, Integer> {

}

创建对应的BookController

@RestController
@RequestMapping("/book")
public class BookController {

    @Autowired
    private BookRepository bookRepository;

    @GetMapping("/findAll")
    public List<Book> findAll() {
        return bookRepository.findAll();
    }

}

构建一个测试用的数据库和表

截屏20200410下午10.09.17.png

运行测试

在浏览器中输入 http://localhost:8181/book/findAll

可以访问到如下数据

[{"id":1,"name":"java开发","author":"张三"},{"id":2,"name":"python开发","author":"李四"},{"id":3,"name":"node开发","author":"王五"},{"id":4,"name":"C++成长记","author":"赵六"}]

Springboot和Vue前后端进行结合

后端不用动，前端需要通过Ajax获取数据

首先停掉前端服务，vue add axios来安装axios插件，安装完后可以在plugins文件夹中看到

为使得刷新页面即可出现从后台获取的数据，Book.vue中data()方法同级添加初始化方法created()

<script>
export default {
  name: "Book",
  data() {
    return {
      msg: "hello vue",
      books: [
        {
          id: 1,
          name: "java开发实战",
          author: "张三"
        },
        {
          id: 2,
          name: "python开发实战",
          author: "李四"
        }
      ]
    };
  },
  created(){
    const _this = this;		//由于在下方直接用this指的是回调resp，而不是data，因此需要先将其赋到_this中
    axios.get('http://localhost:8181/book/findAll').then(function(resp){
      _this.books = resp.data;
    })
  }
};
</script>

此时由于前端端口为8080，后端端口为8181，会产生跨域问题，此问题最好在后端解决，创建CrosConfig类

@Configuration
public class CrosConfig implements WebMvcConfigurer {

    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOrigins("*")
                .allowedMethods("GET", "HEAD", "POST", "PUT", "DELETE", "OPTIONS")
                .allowCredentials(true)
                .maxAge(3600)
                .allowedHeaders("*");
    }
}

最终SpringBoot的文件目录如下

截屏20200410下午10.52.36.png