前后端分离的交互（Vue+Spring Boot）

前后端分离就是将一个单体应用拆分成两个独立的应用，前端应用和后端应用以JSON格式进行数据交互

一、创建vue项目

学习视频中用到的vue ui直接创建了vue项目，看起来超级酷炫，但是好像只有vue-cli3.x以上才支持这么玩，于是我卸载掉了我的vue-cli 2.9.6 下载了vue-cli 4.5.11

1、vue-cli的安装

（以下命令在cmd中进行）
vue-cli版本的查看

vue -V

旧版本的卸载：

npm uninstall vue-cli -g

新版本的安装

npm install -g @vue/cli

不能急不能躁。。。

检验

vue --version

参考博客：
https://blog.csdn.net/Enenen_en/article/details/109900818

2、vue项目的创建

（在VScode中创建vue项目）
建立项目文件夹后在终端输入 ：

vue ui

弹出窗口选择一些配置后就创建成功啦

（在IEDA中开发）
安装vue插件
参考博客：https://blog.csdn.net/qq_35854212/article/details/81324577
——————————————————————————————
⭐更简单的创建方式：
①在webstorm中打开控制台输入vue ui
⭐路由动态加载页面
①创建新页面
②在index.js文件中映射新页面（import）
③const routers 中配置路由（path、name、component）
④在el-main标签中添加router-view标签
⑤在index.js文件的const routers 中将二级菜单放入children数组中
⑥在el-submenu标签中通过v-for ="(item,index) in $router.options.routes"循环遍历配置的导航栏 ，通过:index="index+’ ’ "绑定下标 //inde为遍历时的下标值
⑦在el-submenu标签中加template标签和el-menu-item标签分别放导航栏和子导航栏
⑧el-menu-item标签中通过v-for="item2 in item.children"遍历子导航栏，通过:index="index+’-’+index2"绑定下标
⭐menu与router的绑定
①el-menu标签添加router属性
②在页面中添加router-view标签（一个容器，动态渲染选择的router）
③el-menu-item标签的index值就是要跳转的router

ps:如果element_ui插件没安装成功则需要通过命令行cnpm inatall --save element-ui 手动安装

二、Spring Boot项目的创建

在IDEA中直接创建Spring Boot项目

在这里直接默认Choose starter service URL为Defaut时，创建失败
报错：Initialization failed for ‘https://start.spring.io’ Please check URL, network and proxy settings. E
然后就选的阿里地址：

Custom ：https://start.aliyun.com/

参考博客：https://blog.csdn.net/qq_41648048/article/details/112734326

• Spring Boot项目创建成功后，将默认创建的application.properties文件换成application.yml文件

两个文件的区别：
①.properties文件通过 . 连接，通过 = 赋值，结构上没有分层的感觉
②.yml文件通过 ：分层，结构上有明显的层次感，最后Key赋值的 ： 后需要留一个空格
③如果工程中同时存在这两个文件，.yml文件会先加载，而后加载的.properties文件会覆盖.yml文件

application.yml（连接数据库的信息）

spring:
  datasource:
    url: jdbc:mysql://localhost:3306/blog?&useSUnicode=true&characterEncoding=utf-8&useSSL=false&serverTimezone = GMT
    username: root
    password: *****
    driver-class-name: com.mysql.cj.jdbc.Driver
  jpa:
    show-sql: true  
    database-platform: org.hibernate.dialect.H2Dialect
    properties:
      hibernate:
        format_sql: true
server:
  port: 8181

/**
*show-sql:打印sql
*format-sql:格式化sql（自动换行）
*port：端口
*/
参考博客：https://www.jianshu.com/p/941aee2a99cf

三、前后端应用的完善

4、Vue项目的简单完善

• 通过在src > router > index.js 文件中设置路由进行页面映射

import Book from "../views/Book";  //Book为新建的vue文件
const routes =