SpringBoot の学習メモ - プロジェクトの初期化

モバイル 2023-12-17 16:29:58 訪問数: null

このメモは、AcWing の SpringBoot Framework コースの配布資料 (コース リンク:AcWing SpringBoot Framework コース) から転載されています。

コンテンツ

1. コンセプトとプロジェクトの紹介

今回開発したプロジェクトの名前はKing of BotsですIDEAを使用してローカルで開発されていますプロジェクトのフロントエンドとバックエンドが分離されており、別のサーバーにデプロイ可能ですフロントエンドはVueを使用して開発され、バックエンドはSpringBootを使用して開発されました。

ユーザーはクライアント経由でサーバーに URL リクエストを送信し、リクエストを受信した後、サーバーは Web ページをクライアントに返します (基本的に HTML 文字列を返し、ブラウザはその文字列を Web ページに解析します)。

フロントエンドとバックエンドの分離は、クライアントが初めてプロジェクトにアクセスするときに、Web サーバーからすべての静的ファイルを取得し、その後、バックエンドはリクエストをサーバーに送信するたびにデータのみを返すことを意味します。バックエンドに続いて、フロントエンドがデータ (動的に結合する文字列) ページに従ってレンダリングします。

MVC (Model-View-Controller (Model-View-Controller) の正式名) は、ソフトウェア アーキテクチャ パターンであり、その目標は、ソフトウェアのユーザー インターフェイス (つまり、フロント ページ) をビジネス ロジックから分離することです。コードの信頼性が高く、拡張性、再利用性、保守性、柔軟性が高くなります。 MVC のさまざまな部分の詳細な説明は次のとおりです。

  • モデル: モデルは、アプリケーション データのロジックを処理するアプリケーションの一部です。通常、モデル オブジェクトはデータベース内のデータへのアクセスを担当します。モデルは、ビジネス プロセス/状態の処理とビジネス ルールの策定です。
  • ビュー: ビューは、データ表示を処理するアプリケーションの一部です。通常、ビューはモデル データから作成されます。ビューはユーザー インタラクション インターフェイスを表し、Web アプリケーションの場合は HTML インターフェイスとして要約できますが、XHTML、XML、アプレットなどの場合もあります。
  • コントローラー: コントローラーは、ユーザー操作を処理するアプリケーションの一部です。通常、コントローラーはビューからのデータの読み取り、ユーザー入力の制御、モデルへのデータの送信を担当します。制御は、ユーザーからのリクエストを受け取り、モデルとビューを一緒に照合し、ユーザーのリクエストを共同で完了することとして理解できます。

2. SpringBoot プロジェクト バックエンドを作成する

まずプロジェクトのメイン ディレクトリを作成しますking_of_bots。次に、Git を初期化します。

次に、IDEA を使用して、king_of_bots ディレクトリにプロジェクトのバックエンドを作成します。新しいプロジェクト インターフェースでは、左側に Spring Initializr が表示されます。公式 Web サイト Spring Initializr を作成しましたが、この Web サイトが不安定で接続できない場合があります。接続できない場合は、 < a i=5> に変更してください。ただし、バージョンは少し古い可能性があります。 https://start.aliyun.com

プロジェクト構成コンテンツのグループ名は com.kob に設定され、アーティファクト名は backend に設定されます。これは、プロジェクトの背景がプロジェクト クライアント側では、JDK 1.8 バージョンを使用し、タイプ (Type) で Maven を選択してプロジェクトを管理します。 [次へ] をクリックし、SpringBoot バージョン 2.7 の書き方) を選択します。最後に「作成」をクリックします。

初めてプロジェクトを作成した後、関連する環境をインストールするのに時間がかかります。src/main/java/com.kob.backend バックエンド プロジェクトのエントリ ファイルを確認できますBackendApplication を実行すると、サービスがローカル ポート 8080 に対して開始されたことを示す出力が表示されます。この時点で、http://localhost:8080/ にアクセスし、Whitelabel Error Page 起動が成功したことを示すページ。

3. フロントエンドとバックエンドを分離しない開発手法

クライアントからの URL リクエストは通常​​、バックエンドに対応する関数呼び出しであると前に述べました。 パッケージを作成します。 > パッケージ化し、すべてのバックエンド関数を保存するために使用します。 com.kob.backendcontroller

ここでバトル ページを作成するとします。引き続き controller パッケージ内に pk パッケージを作成し、その下に作成します。パッケージ a>IndexController.java ファイル。関数を URL に変換する必要がある場合は、対応する関数に @Controller の注釈を付ける必要があります。コントローラのすべての関数は http://localhost:8080/pk/ リンクの下にある必要があります。 @RequestMapping アノテーション セットの親ディレクトリを追加できます:

package com.kob.backend.controller.pk;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;

@Controller
@RequestMapping("/pk/")
public class IndexController {
    
    
}

関数がページを返す場合は、/src/main/resources/templates ディレクトリにページを作成する必要があります。まず、このディレクトリに pk ディレクトリを作成します。次に、index.html: を作成します。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <h1>Hello World!</h1>
</body>
</html>

各関数は HTML ファイルのパスを返すことができます。このパスは templates ディレクトリから開始して書き込まれます。関数ごとに は、 にアクセスするとこの関数が呼び出されることを意味します。サブディレクトリを追加せずにリンクを実装し、 @RequestMapping@RequestMapping("index/")http://localhost:8080/pk/index/index.html

package com.kob.backend.controller.pk;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;

@Controller
@RequestMapping("/pk/")
public class IndexController {
    
    
    @RequestMapping("")
    public String index() {
    
    
        return "pk/index.html";
    }
}

ここでプロジェクトを再開し、http://localhost:8080/pk/ にアクセスしてページを確認します。

画像logo.pngが resources ディレクトリの下の static/image ディレクトリに保存されているとします。< Used /span> ディレクトリの後に始まることに注意してください): index.html 内 (パスは static

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div style="text-align: center">
        <img src="/image/logo.png" alt="">
    </div>
</body>
</html>

4. フロントエンドとバックエンドの開発方法を分離する

フロントエンドとバックエンドを分離する開発方法の場合、バックエンドは HTML ページを返さず、一部のデータを返します。

ボット情報を返すには、pk パッケージの下に BotInfoController クラスを作成します。このとき、@RestController 注:

package com.kob.backend.controller.pk;

import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

@RestController
@RequestMapping("/pk/")
public class BotInfoController {
    
    
    @RequestMapping("getbotinfo/")
    public String getBotInfo() {
    
    
        return "Bot 1";
    }
}

今すぐリンクにアクセスしてください http://localhost:8080/pk/getbotinfo/ ウェブページに表示される文字列情報を確認してください。

resources ディレクトリに application.properties ファイルがあります。Spring のデフォルト URL を使用してプロジェクトが作成された場合、このファイルの内容は空になります。 Alibaba Cloud の URL を使用してプロジェクトを作成する場合、このファイルにはいくつかのコンテンツが付属します。その内、server.port=8080 はプロジェクト起動用のポート番号を表します。このポート番号を変更して、それを防ぐことができます。 Vue のデフォルト ポートで使用されないようにします。ファイルは空になっているので、 server.port=3000 という行を追加するだけです。

5. Vue プロジェクトのフロントエンドを作成する

私たちのフロントエンドは、Vue を使用して VS Code で開発されています。Vue のインストール構成と基本的なチュートリアルは、次の場所にあります。Web 学習ノート - Vue3 (環境構成、概念、全体的なレイアウト設計)。

Vue UI を使用して、プロジェクト ルート ディレクトリに Vue フロントエンド プロジェクトを作成します。最初に Web クライアント名を作成しますweb。作成後、忘れずにプラグインをインストールしてください。 /span> プラグインをインストールするだけで済みます。 という名前の AcApp クライアントを作成します。AcApp クライアントは 1 つの に依存します。次に、 および であり、vue-router および vuexbootstrapjqueryacappvuex

VS Code を使用して web ディレクトリを開き、まず src/router/index.js の createWebHashHistory を 。次に、不要なコードを削除し、 ディレクトリと ディレクトリ内のファイルを削除し、 を次の内容に変更します。 /span>createWebHistory#src/viewssrc/componentsApp.vue

<template>
  <div>Hello World!</div>
  <router-view/>
</template>

<style>
</style>

次に、src/router/index.js を次のように変更します。

import {
    
     createRouter, createWebHistory } from "vue-router";

const routes = [];

const router = createRouter({
    
    
  history: createWebHistory(),
  routes,
});

export default router;

ここで Web 側のコード (Vue UI の [タスク] タブ) を実行すると、正常に実行されます。

6. フロントエンドとバックエンドの通信

BotInfoController の Map オブジェクトの情報を返します。

package com.kob.backend.controller.pk;

import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import java.util.HashMap;
import java.util.Map;

@RestController
@RequestMapping("/pk/")
public class BotInfoController {
    
    
    @RequestMapping("getbotinfo/")
    public Map<String, String> getBotInfo() {
    
    
        Map<String, String> bot = new HashMap<>();
        bot.put("name", "tiger");
        bot.put("rating", "1500");
        return bot;
    }
}

次に、フロント エンドで Ajax を使用します。App.vueこのリンクへのリクエストを開始し、データを取得した後にデータを表示します。

<template>
  <div>
    <div>Bot 名字：{
   
   { bot_name }}</div>
    <div>Bot 战斗力：{
   
   { bot_rating }}</div>
  </div>
  <router-view />
</template>

<script>
import $ from "jquery";
import {
      
       ref } from "vue";

export default {
      
      
  name: "App",
  setup() {
      
      
    let bot_name = ref("");
    let bot_rating = ref("");

    $.ajax({
      
      
      url: "http://localhost:3000/pk/getbotinfo/",
      type: "GET",
      success: (resp) => {
      
      
        console.log(resp);
      },
    });

    return {
      
      
      bot_name,
      bot_rating,
    };
  },
};
</script>

<style></style>

現時点でブラウザ コンソールを開くと、クロスドメインの問題が表示されます:Access to XMLHttpRequest at 'http://localhost:3000/pk/getbotinfo/' ......。これは、フロントエンドがポート 8080 上にあり、バックエンドがポート 8080 上にあるためです。したがって、2 つのドメイン名が異なるため、クロスドメインの問題が発生します。

バックエンドのルート パッケージの下に パッケージを作成しcom.kob.backend、その中に クラスを作成します。パッケージの内容は次のとおりです。configCorsConfig

package com.kob.backend.config;

import org.springframework.context.annotation.Configuration;

import javax.servlet.*;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;

@Configuration
public class CorsConfig implements Filter {
    
    
    @Override
    public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) throws IOException, ServletException {
    
    
        HttpServletResponse response = (HttpServletResponse) res;
        HttpServletRequest request = (HttpServletRequest) req;

        String origin = request.getHeader("Origin");
        if (origin != null) {
    
    
            response.setHeader("Access-Control-Allow-Origin", origin);
        }

        String headers = request.getHeader("Access-Control-Request-Headers");
        if (headers != null) {
    
    
            response.setHeader("Access-Control-Allow-Headers", headers);
            response.setHeader("Access-Control-Expose-Headers", headers);
        }

        response.setHeader("Access-Control-Allow-Methods", "*");
        response.setHeader("Access-Control-Max-Age", "3600");
        response.setHeader("Access-Control-Allow-Credentials", "true");

        chain.doFilter(request, response);
    }

    @Override
    public void init(FilterConfig filterConfig) {
    
    
    }

    @Override
    public void destroy() {
    
    
    }
}

この時点で、バックエンドを再起動し、Web ページのコンソールをチェックして、返された resp コンテンツを確認します。

上記のコードを追加してもクロスドメインの問題を解決できない場合は、次のコードに変更してみてください。

package com.kob.backend.config;

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
import org.springframework.web.filter.CorsFilter;

@Configuration
public class CorsConfig{
    
    
    @Bean
    public CorsFilter corsFilter() {
    
    
        final UrlBasedCorsConfigurationSource urlBasedCorsConfigurationSource = new UrlBasedCorsConfigurationSource();
        final CorsConfiguration corsConfiguration = new CorsConfiguration();

        corsConfiguration.setAllowCredentials(true);  // 是否允许请求带有验证信息
        corsConfiguration.addAllowedOriginPattern("*");  // 允许访问的客户端域名
        corsConfiguration.addAllowedHeader("*");  // 允许服务端访问的客户端请求头
        corsConfiguration.addAllowedMethod("*");  // 允许访问的方法名，如GET、POST等

        urlBasedCorsConfigurationSource.registerCorsConfiguration("/**", corsConfiguration);
        return new CorsFilter(urlBasedCorsConfigurationSource);
    }
}

これで、フロントエンドでデータを受信し、Web ページに表示できるようになりました。

<template>
  <div>
    <div>Bot 名字：{
   
   { bot_name }}</div>
    <div>Bot 战斗力：{
   
   { bot_rating }}</div>
  </div>
  <router-view />
</template>

<script>
import $ from "jquery";
import {
      
       ref } from "vue";

export default {
      
      
  name: "App",
  setup() {
      
      
    let bot_name = ref("");
    let bot_rating = ref("");

    $.ajax({
      
      
      url: "http://localhost:3000/pk/getbotinfo/",
      type: "GET",
      success: (resp) => {
      
      
        bot_name.value = resp.name;
        bot_rating.value = resp.rating;
      },
    });

    return {
      
      
      bot_name,
      bot_rating,
    };
  },
};
</script>

<style></style>

最後に、実行中のプロセスを見てみましょう。まず、ユーザーはhttp://localhost:8080/にアクセスしてフロントエンド Web ページに入ります。このとき、ブラウザはすべてのフロントエンド Web ページをキャッシュします。 -end Vue の静的ファイル、次にブラウザー Ajax リクエスト コードが実行され、リクエストがバックエンドに送信されます。バックエンドは、リクエストされたアドレスに基づいて、コントローラーによって一致するパスを検索します。http://localhost:3000/pk/getbotinfo/ を実行し、 getBotInfo() メソッドを見つけます。その後、 Map オブジェクトがフロント エンドに返されます。このオブジェクトには name とrating データ。ブラウザはデータを受信すると、フロントエンド ページの bot_name と bot_rating を渡されたデータに更新します。価値観。

web/src/assets ディレクトリの下に images ディレクトリを作成し、その中に背景画像を配置して、App.vue 背景:

<template>
  ...
</template>

<script>
  ...
</script>

<style>
body {
      
      
  background-image: url("@/assets/images/background.png");
  background-size: cover;
}
</style>

おすすめ

転載: blog.csdn.net/m0_51755720/article/details/134333676
おすすめ
ライナスは「ドッグフードを食べる」ことに最も積極的！
Open Source Daily | Winamp プレーヤーがオープンソースになりつつある; 生成 AI の戦いは第 2 ラウンドにエスカレート; AI はバブルの初期段階に入った; Yongming を Alibaba Cloud に導入しますか?
ランキング
C言語プログラミングの最新の方法（第2回）第12章回答（自分で書いた回答、継続的に更新）
フレームワークの蜂のアップロードファイルに移動します
タイトルバーシリーズ：タイトルバーで遭遇したピットを非表示にする
Unityはゲームオブジェクトの様々な状況を取得します
N個の異なるボールは、Mどのように多くの種類のプログラムのと同じ袋に入れられますか？
オブジェクト指向のクラス、オブジェクト21
C ++オブジェクト指向プログラミングの研究ノート（8）
P3954 [NOIP2017 普及组] 成绩
分業のプロセス間通信 - ロック
ハッカーは通常、DOSコマンドウィンドウを使用します
アーカイブ
もっと
2024-05-20(5)
2024-05-19(0)
2024-05-18(30)
2024-05-17(6)
2024-05-16(24)
2024-05-15(5)
2024-05-14(9)
2024-05-13(8)
2024-05-12(27)
2024-05-11(31)

コードワールド

© 2018 codetd.com