nginx+vue.js でフロントエンドとバックエンドの分離を実現する方法

この記事では主に、フロントエンドとバックエンドの分離を実現するためのnginx+vue.jsのサンプルコードを紹介し、参考として提供します。

1.nginx は、分散サーバー管理によく使用される高性能 HTTP およびリバース プロキシ サーバーです。

負荷分散によく使用されます (これは、複数のサーバーを呼び出すことで実現されます)

静的リソースの出力が高速になります。 gzip 圧縮して出力できます (これは、この記事で静的リソース アクセスに使用する重要な理由でもあります)

クロスドメインの問題やリバース プロキシの解決に適しています (このドメイン名での他のリソースへのアクセスを誰も見たくないため) ) ドメイン名が発生すると、クロスドメインは CSRF 攻撃につながる可能性があります。これが、この記事でクロスドメインを使用する 2 番目の理由です)

メモリ消費量が少なく、数秒で起動し、ダウンタイムを防ぐためにノードを素早く切り替えることができます

2 .es6 は ECMAScript Six バージョンの 3 番目のバージョンであり、vue.js などの JS フレームワークをしっかり学習したい場合は、必ず学習する必要がある言語です。 http://es6.ruanyifeng です。 com/

3.vue.js は、フロントエンド テンプレート レンダリング エンジンは、jsp や beetl などのバックエンド テンプレート エンジンと同様です。もちろん、これと組み合わせることでバックエンド レンダリングとしても使用できます。 (公式 Web サイトがサポートしています)

上記の点を踏まえて、いくつかの理由に答えましょう
1. フロントエンドとバックエンドの分離を実現する利点は何ですか?シナリオ
2. バックエンド テンプレート エンジンがある理由、およびフロントエンド テンプレート エンジンを使用する理由は何ですか?
3. フロントエンドとバックエンドの分離を実現する必要があります。変わるのか？

長い分割線について考えた結果…………

1. まず、開発の観点から問題を見てみましょう。これまでのプロジェクトのほとんどは PC 側のプロジェクトであり、シナリオは単純で固定的でした。それらのほとんどはステートフルであることが多く、同じアプリのほとんどがネイティブ ページと埋め込みページの組み合わせになっているため、機能モジュールが多様化しています。複数のプロジェクトからのリクエストの共同アクションの結果です

2. 以前のアプローチに従う場合、最初の問題は、複数のクロスドメインリクエストとコードを調整するために jsonp しか使用できないことです。実装するには冗長すぎます。同じ機能でもアプリ側とPC側で書き方が異なる可能性が高いです。また、帯域幅は非常に高価なものであり、クライアントは常にサーバーにアクセスして静的リソースを要求するため、速度が低下します。動的と静的な分離により、静的リソースと動的リソースの個別の取得が実現でき、サーバーも動的リソースと静的リソースを分離して、帯域幅の問題を効果的に解決できます。

3. バックエンド開発者は、フロントエンドほど CSS と JS に習熟していない可能性があります。たとえば、JSP を使用してデータを入力する場合、バックエンド開発者はスタイルを調整し、JS を記述する必要があることがよくあります。開発効率が低い。

4. フロントエンド テンプレート レンダリングを使用すると、サーバー側の負荷を一部解放でき、フロントエンド テンプレート エンジンは、たとえば、vue を使用してコンポーネントや検証方法をカスタマイズできます。 、詳細なグラデーションなど、バックエンドのテンプレート エンジンよりも優れた機能が必要です。

4. 私たちのソリューションは次のとおりです

1. クライアントが開始します。リクエストにサーバーが応答し、一連の操作の後、動的データが生成され、その動的データがバックエンドに渡されます。エンド テンプレート エンジンは、レンダリング後にフロント エンドに渡されます。

2. インタラクションの改善メソッド

クライアントがリクエストを開始し、nginx がそれをインターセプトします。それが静的リソースの場合は、ファイル サーバーによって直接圧縮され、動的リソース リクエストの場合は、動的データが生成されます。動的リソースサーバーは、json 形式でフロントエンドに返され、表示のために vue.js によってレンダリングされます。

1.構造、スタイルで動的にバインドする方法、一般的に使用される監視イベントとは何ですか

1. 基本的なレンダリング

    //html结构
    <p id="app">
     {{ message }}
    </p>

    //js模块
    var app = new Vue({
    //会检索绑定的id 如果是class 则是.class即可绑定
       el: &#39;#app&#39;,
       data: {
        message: &#39;Hello Vue!&#39;
       }
    })

3. 一般的に使用されるバインディング イベント

<p class="static"
  v-bind:class="{ active: isActive, &#39;text-danger&#39;: hasError }">
</p>

 data: {
     isActive: true,
     hasError: false
    }

渲染结果为:<p class="static active"></p>

2.サーバー

ここでは、axiosを使用してサーバーにリクエストを行い、リクエストされたデータをvue.jsに渡して処理することをお勧めします。

axiosの使用例のリンクアドレスについて

3. 共通プロセス制御文データ検証カスタム手順

 //输出html
<p v-html="rawHtml"></p>
//绑定id或class
<p v-bind:id="dynamicId"></p>
//绑定herf
<a v-bind:href="url" rel="external nofollow" ></a>
//绑定onclick
<a v-on:click="doSomething"></a>

データ検証とそのフォーム コントロール バインディング リンク アドレス (https://cn.vuejs.org/v2/guide/forms.html)

次の 4 つの点は公式 Web サイトの API を参照しており、これ以上の説明はありません

4. 詳細な応答性を実装する方法 (最初のページの初期化後に値を入力した後に変更が発生した場合の対処方法)?

5. カスタム コンポーネント アプリケーションとその Render を使用した Html 構造の作成

6.ルーティングの使用

7. 一般的な修飾子

6. 実践的な例

1.nginx は静的リソースを設定します

 //if 语句
 <h1 v-if="ok">Yes</h1>

 //for 循环语句
 <ul id="example-1">
 <li v-for="item in items">
  {{ item.message }}
 </li>
 </ul>

2. バックエンドリクエストは JSON データを返します (例として Java を使用します)

 server {
    listen    4000;
    server_name www.test.com;
    charset utf-8;
    index /static/index.html;//配置首页

    //这边可使用正则表达式,拦截动态数据的请求,从而解决跨域问题
    location = /sellingJson.html {
      proxy_pass http://192.168.100.17:8090/vueHelpSellingcar.html;
    }

    #配置Nginx动静分离，定义的静态页面直接从static读取。
    location ~ .*\.(html|htm|gif|jpg|jpeg|bmp|png|ico|txt|js|css)$ 
    { 
    root /static/;
    #expires定义用户浏览器缓存的时间为7天，如果静态页面不常更新，可以设置更长，这样可以   节省带宽和缓解服务器的压力
    expires   7d; 
    }  
  }

3 .フロントエンドの例calling vue

  @RequestMapping("/vueHelpSellingcar.html")
  public void vueHelpSellingcar(HttpServletRequest request,HttpServletResponse response) {
    //若干操作后,返回json数据
    JSONObject resultJson = new JSONObject();

    resultJson.put("carbrandList", carbrandList);
    resultJson.put("provinceList", provinceList);

    //进行序列化,返回值前端
    try {
      byte[] json =resultJson.toString().getBytes("utf-8");
      response.setHeader("Content-type", "text/html;charset=UTF-8");
      response.getOutputStream().write(json);
    } catch (Exception e) {
      e.printStackTrace();
    }

  }

以上が皆さんのためにまとめたもので、今後皆さんのお役に立てれば幸いです。

関連記事:

Reactのrefの詳細な説明(詳細なチュートリアル)

tween.jsを使用してイージングトゥイーンアニメーションアルゴリズムを実装する

以上がnginx+vue.js でフロントエンドとバックエンドの分離を実現する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。