SpringBoot初心者で分からないことも多く、かなり遠回りしてしまいましたが、夜が明けるまでに忘れてしまうのではないかと思い、徹夜でブログの記録を書きました…。
フロントエンド: Vue (2 または 3)、IDE はVS コード
バックエンド: Spring Boot、IDE はIDEA
データベース: MySQL
現在実装されている機能：フロントエンドコードとバックエンドコードの分離、データベーステーブルのデータ表示
ステップ
1.【vueプロジェクトの作成】
端子入力
vue uiグラフィカル インターフェイスを開き、Vue プロジェクトを作成します。具体的な手順は次のとおりです。
辛抱強く待ちます。。。
作成後、コンパイルして実行し、プロジェクトが正常に実行できるかどうかを確認できます。 
ターミナルを閉じて、次のステップに進みます。
2.【vueコードを書く】
vs code は、作成したばかりの vue プロジェクトを開きます (vue 開発関連のプラグインは自分でダウンロードする必要があります)
上に示したように、package.json 内の現在の vue バージョン番号を確認して、現在のプロジェクトが vue2 か 3 かを判断します。これはとても重要です！
次に、cmd+shift+Y でターミナルを開き、axios プラグインをダウンロードします。
vue3の場合は入力してください
npm install axiosvue2だと負ける
vue add axios注: 私が遭遇した落とし穴は、vue3 の場合、vue add axios を使用してインストールすると、バージョンの不一致が発生し、次のようなバグが表示されることです:「export 'default' (imported as 'Vue') was not found 」 「vue」で 
私のプロジェクトはvue3なので、
実行が完了したら、viewに新しいBookView.vueビューを作成します。ここでコードを急ぐ必要はありません。
ルーターで新しいルートを構成し、index.jsコードを次のように変更します。
import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'
import Book from '../views/BookView.vue'
const routes = [
{
path: '/',
name: 'home',
component: HomeView
},
{
path: '/about',
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/AboutView.vue')
},
{
path:'/book',
component:Book
}
]
const router = createRouter({
history: createWebHistory(process.env.BASE_URL),
routes
})
export default router
(注: 上記のコードは、私と同じように vue2 であっても vue3 であっても使用できます)
3.【データベースの作成】
データベース名は sbdb 、テーブル名は book です。
CREATE TABLE `book` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`name` varchar(45) NOT NULL,
`author` varchar(45) DEFAULT NULL,
PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=11 DEFAULT CHARSET=utf8
4.【スプリングブートプロジェクトの作成】
次のステップは直接終了することです
このパスに沿って application.properties を見つけて削除します。
同じ場所に、データベースに接続するための情報が含まれる application.ymlという名前の新しいファイルを作成します。データベース名とパスワードを変更するには、次のコードを変更する必要があります。
spring:
datasource:
url: jdbc:mysql://127.0.0.1:3306/sbdb?serverTimezone=UTC&characterEncoding=utf-8
username: root
password: 你的数据库密码
driver-class-name: com.mysql.cj.jdbc.Driver
jpa:
show-sql: true
properties:
hibernate:
format_sql: true
server:
port: 8181
src->main->java->com.example.sbtest の下に、entity という名前の新しいパッケージを作成し、その中に Book という名前の新しいクラスを作成します。このソング Book は任意ではないことに注意してください。Book はデータベース内のブック テーブルにマッピングされます (クラス名の最初の文字が対応するテーブル名です)。
package com.example.sbtest.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;
}
src->main->java->com.example.sbtest の下に repository という名前の新しいパッケージを作成し、BookRepository という名前のエクスキュームを作成します。
package com.example.sbtest.repository;
import com.example.sbtest.entity.Book;
import org.springframework.data.jpa.repository.JpaRepository;
public interface BookRepository extends JpaRepository<Book,Integer> {
}単体テストを実施して、上記のクラスが正常に使用できるかどうかを確認します。
以下に示すように、インターフェースを右クリックし、「テスト」を選択します。
testフォルダー内にテストクラスが自動生成されていることがわかります。
コードを変更してテストします。
package com.example.sbtest.repository;
import static org.junit.jupiter.api.Assertions.*;
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;
@Test
void findAll(){
System.out.println(bookRepository.findAll());
}
}
最初の実行には時間がかかります。。。
結果の表示: 
リポジトリをテストして問題がなければ、Vue がバックエンド データを呼び出せるようにコントローラー クラスを作成できます。
src->main->java->com.example.sbtest の下に、controller という名前の新しいパッケージを作成し、BookHandler という名前のインターフェイスを作成します。
package com.example.sbtest.controller;
import com.example.sbtest.entity.Book;
import com.example.sbtest.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")
public List<Book> findAll(){
return bookRepository.findAll();
}
}
src->main->java->com.example.sbtest の下に config という名前の新しいパッケージを作成し、CrosConfig という名前のインターフェイスを作成します。このステップは、クロスドメインの問題を解決することです。アクセスするためのエンド ポート番号 バックエンド ポート番号:
package com.example.sbtest.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) {
/*
TODO bug: .allowedOrigins("*")改成 allowedOriginPatterns("*")
*/
registry.addMapping("/**")
.allowedOriginPatterns("*")
.allowedMethods("GET","HEAD","POST","PUT","DELETE","OPTIONS")
.allowCredentials(true)
.maxAge(3600)
.allowedHeaders("*");
}
}
5. Springboot プロジェクトを開始します
図のように、しばらく待ち、操作が完了したら、ブラウザを開いてhttp://localhost:8181/book/findAllと入力します。
ちなみに、このアドレスをコピーして、プロジェクトは閉じずに次のステップに進んでください。
6.【ビューに戻る】
ビュー内の BookView.vueビューにコードを追加します 。
次のコードの axios.get() の URL を、前の手順でコピーしたアドレスに置き換えます。設定が私の設定と同じ場合は、この手順をスキップできます。
<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>
<script>
import axios from 'axios'
export default {
name:"Book",
data(){
return {
books:[]
}
},
created(){
const _this = this
axios.get( 'http://localhost:8181/book/findAll').then(function(resp){
///console.log(resp.data)
_this.books = resp.data
})
}
}
</script>
<style scoped>
</style>この時点で、コード部分は完全に完成しました。最後に、プロジェクトを vs code で実行します。
http://localhost:8080/book はバックエンド データを表示できます (IDEA もプロジェクトを実行し続ける必要があることに注意してください)。
