フロントエンドとバックエンドの個別開発
導入
フロントエンドとバックエンドの個別開発とは、プロジェクト開発のプロセスにおいて、専任のフロントエンド開発者がフロントエンド コードの開発を担当し、バックエンド開発者がバックエンド コードを担当することを意味します。フロントエンド コードとバックエンド コードを並行して開発すると、プロジェクト開発の進行をスピードアップできます。
現在、フロントエンドとバックエンドを分離する開発手法は多くの企業で採用されており、現在のプロジェクト開発の主流の開発手法となっています。
フロントエンドとバックエンドが別々に開発された後は、プロジェクトの構造も変わります。つまり、フロントエンドとバックエンドのコードが同じ Maven プロジェクト内に混在するのではなく、フロントエンド プロジェクトに分割されます。およびバックエンド プロジェクト。
開発プロセス
フロントエンド開発とバックエンド開発を分離した後、フロントエンド開発者とバックエンド開発者がどのように協力してプロジェクトを共同開発するかという問題に直面します。
- **インターフェイス (API インターフェイス)** は http リクエスト アドレスで、主にリクエスト パス、リクエスト メソッド、リクエスト パラメータ、レスポンス データなどを定義します。
フロントエンド技術スタック
開発ツール
- Visual Studioコード
- hビルダー
技術的枠組み
- ノードjs
- VUE
- エレメント
- モック
- ウェブパック
構造
導入
YApi は、開発者、製品、テスターに、よりエレガントなインターフェイス管理サービスを提供するように設計された、効率的で使いやすく強力な API 管理プラットフォームです。YApi は、開発者が API を簡単に作成、公開、保守するのに役立ちます。また、ユーザーに優れたインタラクティブなエクスペリエンスを提供します。開発者は、プラットフォームが提供するインターフェース データ書き込みツールと簡単なクリック操作を使用するだけで、インターフェース管理を実現できます。
YApi により、インターフェイス開発がより簡単かつ効率的になり、インターフェイス管理がより読みやすく保守しやすくなり、チームのコラボレーションがより合理的になります。
ソースアドレス: https://github.com/YMFE/yapi
YApi を使用するには、自分でデプロイできます。
闊歩する
導入
Swagger を使用すると、その仕様に従ってインターフェイスとインターフェイス関連情報を定義するだけで済みます。その後、Swagger から派生した一連のプロジェクトとツールを通じて、さまざまな形式のインターフェイス ドキュメントやオンライン インターフェイス デバッグ ページを生成できます。等
公式サイト：https://swagger.io/
Knife4j は、Swagger と統合された Java MVC フレームワーク用の API ドキュメントを生成するための拡張ソリューションです。
<dependency>
<groupId>com.github.xiaoymin</groupId>
<artifactId>knife4j-spring-boot-starter</artifactId>
<version>3.0.2</version>
</dependency>
使い方
手順:
-
ナイフ4jのMaven座標をインポートする
<dependency> <groupId>com.github.xiaoymin</groupId> <artifactId>knife4j-spring-boot-starter</artifactId> <version>3.0.2</version> </dependency> -
Knife4j 関連の構成クラスをインポートする
-
静的リソースを設定します。そうしないと、インターフェイスのドキュメント ページにアクセスできません。
最終的な WebMvcConfig 構成クラス:
package com.jihua.reggie.config;
import com.github.xiaoymin.knife4j.spring.annotations.EnableKnife4j;
import com.jihua.reggie.common.JacksonObjectMapper;
import lombok.extern.slf4j.Slf4j;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.http.converter.HttpMessageConverter;
import org.springframework.http.converter.json.MappingJackson2HttpMessageConverter;
import org.springframework.web.servlet.config.annotation.ResourceHandlerRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurationSupport;
import springfox.documentation.builders.ApiInfoBuilder;
import springfox.documentation.builders.PathSelectors;
import springfox.documentation.builders.RequestHandlerSelectors;
import springfox.documentation.service.ApiInfo;
import springfox.documentation.spi.DocumentationType;
import springfox.documentation.spring.web.plugins.Docket;
import springfox.documentation.swagger2.annotations.EnableSwagger2;
import java.util.List;
@Slf4j
@Configuration
@EnableSwagger2
@EnableKnife4j
public class WebMvcConfig extends WebMvcConfigurationSupport {
/**
* 设置静态资源映射
*
* @param registry
*/
@Override
protected void addResourceHandlers(ResourceHandlerRegistry registry) {
log.info("开始进行静态资源映射...");
registry.addResourceHandler("doc.html").addResourceLocations("classpath:/META-INF/resources/");
registry.addResourceHandler("/webjars/**").addResourceLocations("classpath:/META-INF/resources/webjars/");
registry.addResourceHandler("/backend/**").addResourceLocations("classpath:/backend/");
registry.addResourceHandler("/front/**").addResourceLocations("classpath:/front/");
}
/**
* 扩展mvc的消息转换器
*
* @param converters
*/
@Override
protected void extendMessageConverters(List<HttpMessageConverter<?>> converters) {
log.info("扩展消息转换器");
//创建对象转换器
MappingJackson2HttpMessageConverter messageConverter = new MappingJackson2HttpMessageConverter();
//设置对象转换器，底层使用Jackson将Java对象转为json
messageConverter.setObjectMapper(new JacksonObjectMapper());
//将上面的消息转换器对象追加到mvc框架的转换器集合中（并设置优先级）
converters.add(0, messageConverter);
}
@Bean
public Docket createRestApi() {
// 文档类型
return new Docket(DocumentationType.SWAGGER_2)
.apiInfo(apiInfo())
.select()
.apis(RequestHandlerSelectors.basePackage("com.jihua.reggie.controller"))
.paths(PathSelectors.any())
.build();
}
private ApiInfo apiInfo() {
return new ApiInfoBuilder()
.title("瑞吉外卖")
.version("1.0")
.description("瑞吉外卖接口文档")
.build();
}
}
-
LoginCheckFilterに処理不要なリクエストパスを設定する
//定义不需要处理的请求路径 String[] urls = new String[]{ "/employee/login", "/employee/logout", "/backend/**", "/front/**", "/user/login",//移动端登录 "/user/sendMsg",//移动端发送短信 "/user/login", "/doc.html", "/webjars/**", "/swagger-resources", "/v2/api-docs" };
プロジェクトを開始し、http://localhost:8080/doc.html にアクセスして、生成されたインターフェイス ドキュメントを表示します。
共通の注意事項
| 注釈 | 説明する |
|---|---|
| @アピ | クラスの説明を示すために、コントローラーなどの要求されたクラスで使用されます。 |
| @ApiModel | クラス (通常はエンティティ クラス) で使用され、応答データを返す情報を表します。 |
| @ApiModelProperty | 応答クラスの属性を記述するために属性で使用されます。 |
| @ApiOperation | リクエストされたメソッドで使用され、メソッドの目的と機能を説明します |
| @ApilmplicitParams | リクエストのメソッドで使用され、一連のパラメータの説明を示します。 |
| @ApilmplicitParam | リクエストパラメータの側面を指定するために @ApilmplicitParams アノテーションで使用されます |
プロジェクトの展開
導入アーキテクチャ
導入環境の説明
サーバ：
- 192.168.138.100 (サーバー A)
- Nginx: フロントエンド プロジェクトのデプロイ、リバース プロキシの構成
- Mysql:マスター/スレーブ レプリケーション構造のマスター ライブラリ
- 192.168.138.101 (サーバー B)
- jdk: Java プロジェクトを実行する
- git: バージョン管理ツール
- Maven: プロジェクトビルドツール
- jar: Spring Boot プロジェクトは、組み込みの Tomcat に基づいて実行されるように、jar パッケージにパッケージ化されています。
- Mysql:マスター/スレーブ レプリケーション構造のスレーブ ライブラリ
- 172.17.2.94 (サーバー C)
- Redis: キャッシュミドルウェア
フロントエンドプロジェクトをデプロイする
-
ステップ 1: Nginx をサーバー A にインストールし、フロントエンド コードを Nginx の html ディレクトリに転送します。
-
ステップ 2: Nginx 構成ファイル nginx.conf を変更する (場所とリバース プロキシ)
location / { root html/dist; index index.html; }#反向代理配置 location ^~ /api/ { rewrite ^/api/(.*)$ /$1 break; #url重写 proxy_pass http://192.168.138.101:8080; }
バックエンドプロジェクトをデプロイする
-
ステップ 1: jdk、git、maven、および MySQL をサーバー B にインストールし、git clone コマンドを使用して git リモート ウェアハウスのコードのクローンを作成します。
-
ステップ 2: 起動スクリプト reggieStart.sh ファイルをサーバー B にアップロードし、chmod コマンドを使用して実行権限を設定します。
chmod 777 reggieStart.sh -
ステップ 3: reggieStart.sh スクリプト ファイルを実行して、プロジェクトを自動的にデプロイします