在nginx+vue.js中如何實現前後端分離

這篇文章主要介紹了nginx vue.js實作前後端分離的範例程式碼，現在分享給大家，也給大家做個參考。

1.nginx 是一個高效能的HTTP和反向代理伺服器，常用於分散式伺服器管理.

它常用於做負載平衡(透過呼叫多台伺服器達到此目的)

靜態資源輸出更快，可以對資源實現gzip壓縮後輸出(這也是本文為什麼用它做靜態資源存取的一個重要原因)

適合解決跨域問題和反向代理(因為誰也不想看到在本域名下看到訪問其他域名的情況發生,跨域可導致csrf攻擊,這是本文用它的第二個原因)

佔用內存少,秒啟,能快速切換結點,防止宕機

2.es6 是ECMAScript的第六個版本,如果想要學好vue.js等js框架,這是必須要學會的一門語言,推薦學習網址如下:http://es6.ruanyifeng.com/

3.vue.js是一款前端模板渲染引擎,類似於後端的jsp,beetl等模板引擎.當然結合node環境也可作為後端渲染用.(官網已支援)

說了上述幾點,讓我們來回答幾個為什麼?
1.實現前後端分離的好處是什麼?主要應用場景在哪?
2. 為什麼有了後端模板引擎,為什麼還要用前端的模板引擎?他們的優勢和劣勢?
3.實現前後端分離需要怎麼改？

長長的分割線思考後……………………………

1.首先是發展的眼光看問題，以前的項目大多呈現的是PC端項目,且場景簡單,固定.請求大多是有狀態的.而現在我們常常是移動端項目較多,同一款app大多是原生和內嵌頁面相結合的方式.並且現在的項目場景更多元化,這導致一個功能模組很可能是好幾個項目的請求共同作用的結果.

2.如果還按照以前的做法,第一個問題是我只能用jsonp去解決調多個跨域請求的問題,實作起來程式碼太過冗餘。對於同一功能,很有可能app端和PC端就有兩套不同的寫法。並且頻寬是個很貴的東西,客戶端總是去伺服器端一起靜態資源的請求,會導致速度慢。動靜分離可以實現靜態資源和動態資源分開獲取,並且伺服器也能動靜分離,有效解決頻寬問題。

3.後端開發人員對於css,js的掌握可能不如前端熟練,比如利用jsp填充資料時,往往需要後端開發人員去調樣式和寫js,這樣會造成開發效率低下。

4.採用前端範本渲染可以釋放伺服器端的一部分壓力,並且前端範本引擎支援的功能比後端豐富.例如用vue可以自訂元件,校驗方式,深入式漸變等,這比後端模板引擎功能要更加豐富.

4.我們的解決方案如下

1.傳統的互動方式:

客戶端發起請求,伺服器端回應,經過一系列操作產生動態資料,將動態資料交由後端模板引擎,經過渲染後,傳遞給前端.

2.改良的互動方式

#客戶端發起請求,nginx攔截,若是靜態資源,則交由檔案伺服器直接壓縮後發送至前端.若是動態資源請求,則經過動態資源伺服器產生動態資料,以json格式返回至前端,交由vue.js渲染處理後進行展示.

5.vue.js 2.x版的重點功能講解

1.怎樣和html結構進行綁定,怎樣和樣式進行動態綁定,常用的監聽事件有哪些

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

2.class與style綁定

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

 data: {
     isActive: true,
     hasError: false
    }

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

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>

2.和伺服器怎樣進行通訊

在這裡推薦大家使用axios進行和服務端的請求,然後將請求後的資料交由vue.js處理.

關於axios的使用範例連結位址

3.常見的流程控制語句資料校驗自訂指令

 //if 语句
 <h1 id="Yes">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)

以下四點參考官網api,不再做介紹了

4.深入響應式怎樣實現(在第一次頁面初始化填值後，如果發生改變要修改怎麼做)?

5.自訂元件應用程式及其使用Render建立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模块
  <p v-if="carbrandList.length" class="char_contain">
   <p v-for="brand in carbrandList" id="  {{brand.brand_id}}">{{brand.brand_name}}</p>
  </p>

//js模块 页面加载后,自动去获取动态资源
  let v={};
  $(function() {
    axios.get(&#39;http://test.csx365.com:4000/sellingJson.html&#39;)
      .then(function(data){
        //定义一个vue对象,方便模板渲染
        v =Object.assign(v, new Vue({
        el : &#39;.char_contain&#39;, //绑定事件名
        data : {
           carbrandList : data.data.carbrandList, //数据流
         }
        })); 
       })
       .catch(function(err){
         console.log(err);
       });
    });

上面是我整理給大家的，希望今後會對大家有幫助。

相關文章：

透過JS如何實現文字間歇循環滾動效果

#詳細講解React中的refs（詳細教學）

使用tween.js實作緩動補間動畫演算法

以上是在nginx+vue.js中如何實現前後端分離的詳細內容。更多資訊請關注PHP中文網其他相關文章！