前后端分离的交互（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 =[
   {
        path:'/book',
        component: Book
    }
]

• 在Book.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>
    </div>
</template>

• 在vue中请求ajax（使用axios）

vue add axios

插件安装成功后会自动生成plugins文件夹：

• 添加初始化操作用 created（）方法

<script>
export default {
  name: "Book.vue",
  data(){
    return{
      books:[]
    }
  },
  created() {
    //请求数据
      const _this = this//此时this为vue对象，当this写在回调中指的是回调
  axios.get('http://localhost:8181/book/findAll/').then(function(resp){
     // console.log(resp);
     
        _this.books=resp.data
        
    })
  }
}
</script>

5、Spring Boot项目的简单完善

5.1 访问数据库

• 创建实体类连接表

  Book.java

package com.example.stringboottest.entity;
import lombok.Data;
import javax.persistence.Entity;
import javax.persistence.Id;
@Entity
@Data
public class Book {
    @Id
    private Integer id;
    private String name;
    private String author;
     /*@Entity 绑定数据库blog中的book表（通过表名的映射关系）
      @Data 自动生成各种get方法（longbook）
      属性名与字段名绑定
      @Id 绑定表中的主键*/
}

• 创建数据访问（DAO）层 repository
  创建一个接口继承JpaRepository，里面有各种方法

BookRepository.java

package com.example.stringboottest.repository;
import com.example.stringboottest.entity.Book;
import org.springframework.data.jpa.repository.JpaRepository;
public interface BookRepository extends JpaRepository<Book,Integer> {   //<实体类类型，主键类型>
 
}

• 创建单元测试看repository是否能够使用
  
  Create New Test (通过JUnit5测试)
  

BookRepositoryTest.java

package com.example.stringboottest.repository;
import org.junit.jupiter.api.Test;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.boot.test.context.SpringBootTest;
@SpringBootTest
class BookRepositoryTest {
    @Autowired //自动装载
    private BookRepository bookRepository;//自动注入BookRepository
    @Test
 void findAll(){
     System.out.println(bookRepository.findAll()); //直接调方法
 }
}

运行findAll（）即开始测试

• 创建controller供外部调用(基于Spring Boot)

BookHandler.java

package com.example.stringboottest.controller;
import com.example.stringboottest.entity.Book;
import com.example.stringboottest.repository.BookRepository;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import java.util.List;
@RestController
@RequestMapping("/book")
public class BookHandler {
    @Autowired
    private BookRepository bookRepository; //注入
    @GetMapping("/findAll")  //get请求
    public List<Book> findall(){  //返回一个集合（Book需引用自己写的）
         return bookRepository.findAll();
    }
}

• 启动StringboottestApplication

⭐⭐跨域问题的解决（后端）：

⭐方法1

1. 创建一个config包
2. 再创建一个CrosConfig类
3. 添加@Configuration注解
4. 实现WebConfigrrer接口
5. 重写addCorsMappings方法

package com.example.stringboottest.config;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
@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("*");
    }
}

⭐方法2
直接在controller文件夹的BookHandle.java中加@CrossOrigin即可（简单温柔）

@CrossOrigin  //加这个
@RestController
@RequestMapping("/book")
public class BookHandler {
    @Autowired
    private BookRepository bookRepository;
    @GetMapping("/findAll")
    public List<Book> findall(){
         return bookRepository.findAll();
    }

}

数据库表中数据：

前端展示：

学习视频：https://www.bilibili.com/video/BV137411B7vB?p=1