フロントエンドの分離を実現するためのnginx + vue.jsのコード例

1 Star2 Stars3 Stars4 Stars5 Stars (まだ評価されていません)
Loading...

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

ロードバランシング(この目的のために複数のサーバーを呼び出すことによって)

静的リソースの出力が高速で、リソースをgzip圧縮して出力することもできます(静的リソースへのアクセスにこの技術を使用する重要な理由です)

クロスドメインの問題とリバースプロキシに適しています(誰もこのドメイン名で他のドメインへのアクセスを見たくないため、クロスドメインはcsrf攻撃につながる可能性があります。

メモリ占有量が少なく、秒単位でノードを素早く切り替えることができ、ダウンタイムを防ぐことができます

2.es6はECMAScriptの6番目のバージョンです。vue.jsなどのjsフレームワークを学びたい場合は、これは学習する必要のある言語です。http://es6.ruanyifeng.com/

3.vue.jsはフロントエンドのテンプレートレンダリングエンジンで、バックエンドJSP、Beetlなどのテンプレートエンジンに似ています。もちろん、ノード環境と組み合わせてバックエンドレンダリングとして使用することもできます(公式サイトはサポートされています)

上記の点を述べて、私たちはいくつかの理由で答えてみましょう?
1.フロントエンド分離を達成するメリットは何ですか?アプリケーションの主なシナリオはどこですか?
2.バックエンドテンプレートエンジンを使用する理由、フロントエンドテンプレートエンジンを使用する理由、その長所と短所はありますか?
3.フロントエンドとリヤエンドの交換方法は?

思考した後に長い分割線……………………………

1.最初は問題を見るための問題の開発であり、以前のプロジェクトのほとんどはPC側のプロジェクトであり、場面は単純で固定されています。要求は主にステートフルです。ネイティブページとインラインページの組み合わせ現在のプロジェクトシナリオはより多様で、いくつかのプロジェクト要求の結果である可能性の高い機能モジュールにつながります。

2.以前の習慣に従えば、最初の問題は、複数のクロスドメイン要求を調整する問題を解決するためにjsonpしか使用できず、コードが冗長すぎるということです。 同じ機能のために、アプリ側とPC側の2種類の書き込みがある可能性が非常に高いです。 帯域幅は非常に高価ですが、クライアントは静的リソースの要求によって常にサーバー側に移動し、低速になります。 動的および静的分離は、静的リソースおよび動的リソースの別々の取得を達成することができ、サーバは、帯域幅の問題を効果的に解決するために、互いに分離することもできます。

3. css、js masterのバックエンド開発者は、jspを使用してデータを埋め込むなど、フロントエンドの能力に劣るかもしれません。バックエンドの開発者がスタイルを調整し、jsを書く必要があり、開発効率が低くなります。

4.フロントエンドテンプレートレンダリングを使用すると、サーバー側のプレッシャーの一部が解放され、フロントエンドテンプレートエンジンはバックエンド以外の機能をサポートします。たとえば、バックエンドテンプレートエンジン機能以上のvueを使用してコンポーネント、チェックサム、詳細なグラデーションなどをカスタマイズできます。より豊富。

4.私たちのソリューションは以下の通りです

1.従来の対話方法:

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

2.インタラクションの改善

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

説明する主な機能の5.vue.js 2.xのバージョン

1.どのようにhtml構造体にバインドするか、スタイルに動的にバインドする方法、共通のリスニングイベントは何ですか?

基本レンダリング


//html结构
<div id="app">
{{ message }}
</div>
//js模块
var app = new Vue({
//会检索绑定的id 如果是class 则是.class即可绑定
el: '#app',
data: {
message: 'Hello Vue!'
}
})

2.classとスタイルバインディング


<div class="static"
v-bind:class="{ active: isActive, 'text-danger': hasError }">
</div>
data: {
isActive: true,
hasError: false
}
渲染结果为:<div class="static active"></div>

3.共通の結合事象


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

2.サーバーとの通信方法

ここでは、Axiosを使用してサーバーで要求を行い、要求されたデータをvue.jsに渡すことを推奨します。

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

3.一般的なフロー制御文のデータ検証のカスタム命令


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

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

次の4つのポイントは、公式サイトのAPIを参照して、もはや

4.どのように詳細な応答性を実装する(ページの初期初期化後、変更したい場合、どのように行うのか)?

5.カスタムコンポーネントアプリケーションとレンダリングを使用してHTML構造を作成する

6.ルーティングの使用

7.共通修飾語

6.具体例

1.nginx静的リソースを構成する


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; 
}  
}

2.バックエンド要求はjsonデータを返します(例としてjavaを使用します)


@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();
}
}

3.フロントエンドがvueの例を呼び出します。


//html模块
<div v-if="carbrandList.length" class="char_contain">
<p v-for="brand in carbrandList" id="  {{brand.brand_id}}">{{brand.brand_name}}</p>
</div>
//js模块 页面加载后,自动去获取动态资源
let v={};
$(function() {
axios.get('http://test.csx365.com:4000/sellingJson.html')
.then(function(data){
//定义一个vue对象,方便模板渲染
v =Object.assign(v, new Vue({
el : '.char_contain', //绑定事件名
data : {
carbrandList : data.data.carbrandList, //数据流
}
})); 
})
.catch(function(err){
console.log(err);
});
});

1 Star2 Stars3 Stars4 Stars5 Stars (まだ評価されていません)
Loading...
      この投稿は審査処理中  | 元のサイトへ