使用nginx和vue.js怎么實(shí)現(xiàn)前后端分離

使用nginx和vue.js怎么實(shí)現(xiàn)前后端分離？很多新手對(duì)此不是很清楚，為了幫助大家解決這個(gè)難題，下面小編將為大家詳細(xì)講解，有這方面需求的人可以來學(xué)習(xí)下，希望你能有所收獲。

1.nginx 是一個(gè)高性能的HTTP和反向代理服務(wù)器，常用于分布式服務(wù)器管理.

它常用于做負(fù)載均衡(通過調(diào)用多臺(tái)服務(wù)器達(dá)到此目的)

靜態(tài)資源輸出更快，可以對(duì)資源實(shí)現(xiàn)gzip壓縮后輸出(這也是本文為什么用它做靜態(tài)資源訪問的一個(gè)重要原因)

適合解決跨域問題和反向代理(因?yàn)檎l也不想看到在本域名下看到訪問其他域名的情況發(fā)生,跨域可導(dǎo)致csrf攻擊,這是本文用它的第二個(gè)原因)

占用內(nèi)存少,秒啟,能快速切換結(jié)點(diǎn),防止宕機(jī)

2.es6 是ECMAScript的第六個(gè)版本,如果想要學(xué)好vue.js等js框架,這是必須要學(xué)會(huì)的一門語言,推薦學(xué)習(xí)地址如下:http://es6.ruanyifeng.com/

3.vue.js是一款前端模板渲染引擎,類似于后端的jsp,beetl等模板引擎.當(dāng)然結(jié)合node環(huán)境也可作為后端渲染用.(官網(wǎng)已支持)

說了上述幾點(diǎn),讓我們來回答幾個(gè)為什么?
1.實(shí)現(xiàn)前后端分離的好處是什么?主要應(yīng)用場(chǎng)景在哪?
2.為什么有了后端模板引擎,為什么還要用前端的模板引擎?他們的優(yōu)勢(shì)和劣勢(shì)?
3.實(shí)現(xiàn)前后端分離需要怎么改？

長(zhǎng)長(zhǎng)的分割線思考后……………………………

1.首先是發(fā)展的眼光看問題，以前的項(xiàng)目大多呈現(xiàn)的是PC端項(xiàng)目,且場(chǎng)景簡(jiǎn)單,固定.請(qǐng)求大多是有狀態(tài)的.而現(xiàn)在我們常常是移動(dòng)端項(xiàng)目較多,同一款app大多是原生和內(nèi)嵌頁面相結(jié)合的方式.并且現(xiàn)在的項(xiàng)目場(chǎng)景更多元化,這導(dǎo)致一個(gè)功能模塊很可能是好幾個(gè)項(xiàng)目的請(qǐng)求共同作用的結(jié)果.

2.如果還按照以前的做法,第一個(gè)問題是我只能用jsonp去解決調(diào)多個(gè)跨域請(qǐng)求的問題,實(shí)現(xiàn)起來代碼太過冗余。對(duì)于同一功能,很有可能app端和PC端就有兩套不同的寫法。并且?guī)捠莻€(gè)很貴的東西,客戶端總是去服務(wù)器端一起靜態(tài)資源的請(qǐng)求,會(huì)導(dǎo)致速度慢。動(dòng)靜分離可以實(shí)現(xiàn)靜態(tài)資源和動(dòng)態(tài)資源分開獲取,并且服務(wù)器也能動(dòng)靜分離,有效解決帶寬問題。

3.后端開發(fā)人員對(duì)于css,js的掌握可能不如前端熟練,比如利用jsp填充數(shù)據(jù)時(shí),往往需要后端開發(fā)人員去調(diào)樣式和寫js,這樣會(huì)造成開發(fā)效率低下。

4.采用前端模板渲染可以釋放服務(wù)器端的一部分壓力,并且前端模板引擎支持的功能比后端豐富.比如用vue可以自定義組件,校驗(yàn)方式,深入式漸變等,這比后端模板引擎功能要更加豐富.

4.我們的解決方案如下

1.傳統(tǒng)的交互方式:

客戶端發(fā)起請(qǐng)求,服務(wù)器端響應(yīng),經(jīng)過一系列操作生成動(dòng)態(tài)數(shù)據(jù),將動(dòng)態(tài)數(shù)據(jù)交由后端模板引擎,經(jīng)過渲染后,傳遞給前端.

2.改良的交互方式

客戶端發(fā)起請(qǐng)求,nginx攔截,若是靜態(tài)資源,則交由文件服務(wù)器直接壓縮后發(fā)送至前端.若是動(dòng)態(tài)資源請(qǐng)求,則經(jīng)過動(dòng)態(tài)資源服務(wù)器生成動(dòng)態(tài)數(shù)據(jù),以json格式返回至前端,交由vue.js渲染處理后進(jìn)行展示.

5.vue.js 2.x版的重點(diǎn)功能講解

1.怎樣和html結(jié)構(gòu)進(jìn)行綁定,怎樣和樣式進(jìn)行動(dòng)態(tài)綁定,常用的監(jiān)聽事件有哪些

1.基本的渲染

//html結(jié)構(gòu)
    <div id="app">
     {{ message }}
    </div>

    //js模塊
    var app = new Vue({
    //會(huì)檢索綁定的id 如果是class 則是.class即可綁定
       el: '#app',
       data: {
        message: 'Hello Vue!'
       }
    })

2.class與style綁定

<div class="static"
  v-bind:class="{ active: isActive, 'text-danger': hasError }">
</div>

 data: {
     isActive: true,
     hasError: false
    }

渲染結(jié)果為:<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.和服務(wù)器怎樣進(jìn)行通訊

在這里推薦大家使用axios進(jìn)行和服務(wù)端的請(qǐng)求,然后將請(qǐng)求后的數(shù)據(jù)交由vue.js處理.

關(guān)于axios的使用例子鏈接地址

3.常見的流程控制語句 數(shù)據(jù)校驗(yàn) 自定義指令

 //if 語句
 <h2 v-if="ok">Yes</h2>

 //for 循環(huán)語句
 <ul id="example-1">
 <li v-for="item in items">
  {{ item.message }}
 </li>
 </ul>

數(shù)據(jù)校驗(yàn)及其表單控件綁定鏈接地址(https://cn.vuejs.org/v2/guide/forms.html)

以下四點(diǎn)參考官網(wǎng)api,不再做介紹了

4.深入響應(yīng)式怎樣實(shí)現(xiàn)(在第一次頁面初始化填值后，如果發(fā)生改變要修改怎么做)?

5.自定義組件應(yīng)用及其使用Render創(chuàng)建Html結(jié)構(gòu)

6.路由的使用

7.常見的修飾符

6.實(shí)戰(zhàn)舉例

1.nginx 配置靜態(tài)資源

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

    //這邊可使用正則表達(dá)式,攔截動(dòng)態(tài)數(shù)據(jù)的請(qǐng)求,從而解決跨域問題
    location = /sellingJson.html {
      proxy_pass http://192.168.100.17:8090/vueHelpSellingcar.html;
    }

    #配置Nginx動(dòng)靜分離，定義的靜態(tài)頁面直接從static讀取。
    location ~ .*\.(html|htm|gif|jpg|jpeg|bmp|png|ico|txt|js|css)$ 
    { 
    root /static/;
    #expires定義用戶瀏覽器緩存的時(shí)間為7天，如果靜態(tài)頁面不常更新，可以設(shè)置更長(zhǎng)，這樣可以   節(jié)省帶寬和緩解服務(wù)器的壓力
    expires   7d; 
    }  
  }

2.后端請(qǐng)求返回json數(shù)據(jù)（以java為例）

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

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

    //進(jìn)行序列化,返回值前端
    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.前端調(diào)用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模塊 頁面加載后,自動(dòng)去獲取動(dòng)態(tài)資源
  let v={};
  $(function() {
    axios.get('http://test.csx365.com:4000/sellingJson.html')
      .then(function(data){
        //定義一個(gè)vue對(duì)象,方便模板渲染
        v =Object.assign(v, new Vue({
        el : '.char_contain', //綁定事件名
        data : {
           carbrandList : data.data.carbrandList, //數(shù)據(jù)流
         }
        })); 
       })
       .catch(function(err){
         console.log(err);
       });
    });

看完上述內(nèi)容是否對(duì)您有幫助呢？如果還想對(duì)相關(guān)知識(shí)有進(jìn)一步的了解或閱讀更多相關(guān)文章，請(qǐng)關(guān)注億速云行業(yè)資訊頻道，感謝您對(duì)億速云的支持。