前端工程

用VUE-Cli工具创建VUE工程，然后在idea中打开

前端写个假数据并测试
注意，这里是vue风格

<template>
  <div>
    <table>
      <tr>
        <td>编号</td>
        <td>图书名称</td>
        <td>作者</td>
      </tr>
      <tr v-for="item in books">
        <td>{{item.id}}</td>
        <td>{{item.name}}</td>
        <td>{{item.author}}</td>
      </tr>
    </table>
    {{msg}}
  </div>
</template>
<script>
export default {
  name: "Book",
  data(){
    return{
      msg:'Hello Vue',
      books:[
        {
          id:1,
          name:'Java0 基础实战',
          author:'楠'
        },
        {
          id:2,
          name:'Spring Boot0基础实战',
          author:'楠'
        },
        {
          id:3,
          name:'Vue 0基础实战',
          author:'楠'
        }
      ]
    }
  }
}
</script>
<style scoped>
</style>

看看效果

前端用axios接受数据
见vuetest3 book.vue

后端工程

用idea创建springboot项目
四个组件：Lombok，web，SpringBoot Data JPA，MySQL

前台假数据没问题了，后台就可以开始
entity-mapper-service-controller流程了
记得跨域的时候的配置 —->SpringBoot 优雅解决跨域问题。

element ui