ネットワーク上にスプリングブートとVUEを組み合わせるための2つの主要なソリューションがあります。
1。[推奨されない]スクリプトタグを直接使用して、VUEとHTMLで一般的に使用されるコンポーネントをいくつか紹介します。この方法は、以前の従来の開発と同じですが、Vueの双方向データは非常に喜んで使用できます。この方法は、通常のフルスタック開発にのみ適しています。
2。[推奨] VUE公式の足場を使用して、バックエンドから完全な独立した開発と展開を達成し、バックエンドとは別に純粋なRestfulサービスを展開し、フロントエンドはNginxを展開に直接使用します。これは完全なフロントエンドおよびバックエンド分離アーキテクチャ開発モデルと呼ばれますが、NGINXで設定するルールを書き換える必要があるVueルータールーティングの展開など、分離で解決する必要があるAPIアクセスには多くの問題があります。フロントエンドとバックエンドから完全に分離されたこの種のアーキテクチャは、現在インターネット企業でも採用されています。バックエンドサーバーは、静的リソースを処理する必要がなくなり、バックエンドサーバーへの圧力も軽減できます。
1.なぜフロントエンドとバックエンドの分離を行い、マージします
従来の業界では、多くは製品ではなくプロジェクトのアイデアに支配されています。プロジェクトは多くの顧客に販売され、顧客のローカルコンピュータールームに展開されます。一部の従来の産業では、インターネット企業の運用チームと展開および実装の技術を展開および実装する技術は、さまざまな不確実な環境のために、自動的に構築することはできません。したがって、この場合、展開中のサービスソフトウェア要件を最小限に抑え、可能な限り少数のパッケージを生産しようとします。この状況に応じて、フロントエンドの独立した開発が開発に実装されています。開発方法全体は、上記の2番目の方法と同じです。ただし、バックエンドスプリングブートがパッケージ化されてリリースされると、フロントエンドの構造出力が一緒に入力されます。最後に、Springbootプロジェクトを展開するだけで、Nginxサーバーをインストールする必要はありません。
2。スプリングブートとVUEの統合の重要な操作
実際、この記事では、フロントエンド開発のフロントエンド分離、フロントエンド開発が完了した後、ビルド内に組み込まれた静的のファイルがスプリングブートのリソースの静的にコピーされ、index.htmlはスプリングブートのリソースの静的に直接コピーされます。これが図の例です。
VUEフロントエンドプロジェクト
スプリングブートプロジェクト：
上記はマージする最も簡単な方法ですが、エンジニアリングレベルのプロジェクト開発の場合、手動マージは推奨されず、フロントエンドコードを作成してスプリングブートリソースに送信することをお勧めします。良い方法は、フロントエンドとバックエンドを完全に独立した開発コードを維持することであり、プロジェクトコードは互いに影響を与えません。 Jenkinsのような構造ツールの助けを借りて、フロントエンド構造がトリガーされ、スプリングブートの構築時に自動化スクリプトが記述されます。フロントエンドWebパックによって構築されたリソースをコピーしてスプリングブートにコピーしてからJARにパッケージ化します。最後に、フロントエンドとバックエンドを完全に含むスプリングブートプロジェクトを取得します。
3。統合の中核的な問題
上記の統合の後、2つの比較的大きな問題が発生します。
1.静的リソースに正常にアクセスすることはできません。
2。Vueルータールートの経路は正常に解決できません。
最初の問題を解決するには、Springbootの静的リソース処理プレフィックス、コードを再指定する必要があります。
@configurationPublic Class SpringWebMVCCONFIG拡張webmvcconfigureradapter {@override public void addResourceHandlers（resource handlerregistry registry）{registry.addresourcehandler（ "/static/**"）。 super.addresourcehandlers（レジストリ）; }}2番目の問題を解決する方法は、Vueルートのパスを書き換えて、スプリングブート自体を処理するのではなく、処理のためにルーターに任せることです。書き換えるときは、ルートパスを均一に追加することを検討し、スプリングブートで特定のサフィックスをフィルタリングしてインターセプトして、リクエストの転送のルート処理を行い、それをVUEに渡すことができます。のように：
const router = new vuerouter（{mode： 'history'、base：__dirname、routes：[{path： '/ui/first.vhtml'、component：first}、{path： '/ui/second.vhtml'、component}]}}））VHTMLを使用したバックエンドインターセプトは、処理のためにルーターに任されています。この方法は、バックエンドをインターセプトするためにフィルターを作成した後にパッケージ化することができますが、フロントエンドによって開発されたサフィックスを使用してパスへの直接アクセスに問題があります。
別の方法は、 /UIなどのプレフィックスをフロントエンドルーティングパスに追加することです。この時点で、バックエンド書き込みフィルターはプレフィックスと一致しますが、これはフロントエンド開発のルーティング分析の問題に個別に影響しません。フィルターの参照は次のとおりです。
/** * 2017-11-22 19:47:23にvue router * * @author yuを書き直すために使用されます。 */public class rewriteFilterはフィルター{/***書き換えが必要な宛先アドレス*/public static final string rewrite_to = "rewriteurl"; / ***インターセプトされたURLとURLワイルドカードは、英語のセミコロンで区切られています*/ public static final string rewrite_patterns = "urlpatterns"; private set <string> urlpatterns = null; // url wildcard private string rewriteto = nullを設定します。 @Override public void init（filterconfig cfg）servletexception {// Interpect intercept configuration rewriteto = cfg.getinitparameter（rewrite_to）; stringを除くsurrstring = cfg.getInitParameter（rewrite_patterns）; if（stringutil.isnotempty（を除く））{urlpatterns = collections.unmodifiableset（new hashset <>（arrays.aslist（を除く（ ";"、 "、0））））; } else {urlpatterns = collections.emptyset（）; }} @Override public void dofilter（servletrequest req、servletresponse resp、filterchainチェーン）IoException、servletexception {httpservletrequest request =（httpservletrequest）req;文字列servletpath = request.getServletPath（）;文字列context = request.getContextPath（）; //一致したパスはif（ismatches（urlpatterns、servletpath））{req.getRequestDispatcher（context+"/"+rewriteto）.forward（req、rep）; } else {chain.dofilter（req、resp）; }} @Override public void Destroy（）{} / ** * Match Returns true、Mismatchはfalse * @param Patterns relult expressionまたはwildcard * @param url要求url * @return * / private boolean ismatches（set <string> patterns、string url）{（null == patternss）{return false; } for（string str：patterns）{if（str.endswith（ "/*"））{string name = str.substring（0、str.length（）-2）; if（url.contains（name））{return true; }} else {pattern pattern = pattern.compile（str）; if（pattern.matcher（url）.matches（））{return true; }} falseを返します。 }}フィルター登録：
@SpringBootApplicationPublic Class SpringBootMainApplication {public static void main（string [] args）{springApplication.run（springbootmainApplication.class、args）; } @bean public embeddedservletcontainercustomizer contarecustomizer（）{return（container-> {errorpage error401page = new errorpage（httpstatus.uthorized、 "/errors/401.html"）; errorpage errer404page = new errorpage（httptus_found_found dnot.not.not.not.not.not.not. "/errors/404.html"）;エラーページ= new errorpage（httpstatus.internal_server_error、 "/errors/500.html"）; } @bean public filterregistrationbean testfilterregistration（）{filterregistrationbean登録= new FilterRegistrationBean（）;登録.setfilter（new rewriteFilter（））; // register regripe regrite filter registration.addurlpatterns（ "/*"）;登録.addinitparameter（rewritefilter.rewrite_to、 "/index.html"）;登録.addinitparameter（rewritefilter.rewrite_patterns、 "/ui/*"）;登録.setname（ "rewritefilter"）;登録.setorder（1）;登録を返します。 }}この時点で、スプリングブートは、フロントエンドのルーティングリソースを処理のためにルートに引き渡すことができます。この時点で、フロントエンドとバックエンドの分離とマージソリューション全体が完了します。この方法は、後の段階で条件が利用可能な場合、フロントエンドとバックエンドから簡単に分離することもできます。
要約します
上記は、編集者が紹介したSpring Boot+Vueのフロントエンド分離とマージプランです。それがあなたに役立つことを願っています。ご質問がある場合は、メッセージを残してください。編集者は時間内に返信します。 wulin.comのウェブサイトへのご支援ありがとうございます！