Vue 笔记：Spring Boot + Vue 前后端分离的基本开发流程

https://www.bilibili.com/video/av85793766?p=1

---

文章结构概述

• Vue项目
  • • 初始化
    • 导入页面&设置路径
    • Book.vue

  • Spring项目

  • • 初始化
    • 设置配置文件
    • 数据库表结构设计
    • Book
    • BookRepository
    • BookRepository测试
    • BookHandler
    • 测试

  • 系统对接

  • 总结

---

Vue工程

创建

通过vue ui工具进行项目初始化，并将生成的代码导入至Idea开发环境进行后续开发（若JavaScript版本过低，可能导致语法错误，建议在配置中将版本调整为6）。

项目运行命令为：npm run serve
项目终止命令为：按下ctrl+C

引入页面&配置路径

在router/index.js文件中导入.vue组件，并在App.vue文件中进行路由配置

Book.vue

在前端开发中，template对应的是HTML结构，script部分则用于编写JavaScript代码，而style则用于定义CSS样式。在template中，必须确保仅包含一个根元