1.nginx 是一個高性能的HTTP和反向代理服務(wù)器，常用于分布式服務(wù)器管理.
它常用于做負載均衡(通過調(diào)用多臺服務(wù)器達到此目的)
靜態(tài)資源輸出更快，可以對資源實現(xiàn)gzip壓縮后輸出(這也是本文為什么用它做靜態(tài)資源訪問的一個重要原因)
適合解決跨域問題和反向代理(因為誰也不想看到在本域名下看到訪問其他域名的情況發(fā)生,跨域可導致csrf攻擊,這是本文用它的第二個原因)
占用內(nèi)存少,秒啟,能快速切換結(jié)點,防止宕機
2.es6 是ECMAScript的第六個版本,如果想要學好vue.js等js框架,這是必須要學會的一門語言,推薦學習地址如下:http://es6.ruanyifeng.com/
3.vue.js是一款前端模板渲染引擎,類似于后端的jsp,beetl等模板引擎.當然結(jié)合node環(huán)境也可作為后端渲染用.(官網(wǎng)已支持)
說了上述幾點,讓我們來回答幾個為什么?
1.實現(xiàn)前后端分離的好處是什么?主要應(yīng)用場景在哪?
2.為什么有了后端模板引擎,為什么還要用前端的模板引擎?他們的優(yōu)勢和劣勢?
3.實現(xiàn)前后端分離需要怎么改？
長長的分割線思考后……………………………
1.首先是發(fā)展的眼光看問題，以前的項目大多呈現(xiàn)的是PC端項目,且場景簡單,固定.請求大多是有狀態(tài)的.而現(xiàn)在我們常常是移動端項目較多,同一款app大多是原生和內(nèi)嵌頁面相結(jié)合的方式.并且現(xiàn)在的項目場景更多元化,這導致一個功能模塊很可能是好幾個項目的請求共同作用的結(jié)果.
2.如果還按照以前的做法,第一個問題是我只能用jsonp去解決調(diào)多個跨域請求的問題,實現(xiàn)起來代碼太過冗余。對于同一功能,很有可能app端和PC端就有兩套不同的寫法。并且?guī)捠莻€很貴的東西,客戶端總是去服務(wù)器端一起靜態(tài)資源的請求,會導致速度慢。動靜分離可以實現(xiàn)靜態(tài)資源和動態(tài)資源分開獲取,并且服務(wù)器也能動靜分離,有效解決帶寬問題。
3.后端開發(fā)人員對于css,js的掌握可能不如前端熟練,比如利用jsp填充數(shù)據(jù)時,往往需要后端開發(fā)人員去調(diào)樣式和寫js,這樣會造成開發(fā)效率低下。
4.采用前端模板渲染可以釋放服務(wù)器端的一部分壓力,并且前端模板引擎支持的功能比后端豐富.比如用vue可以自定義組件,校驗方式,深入式漸變等,這比后端模板引擎功能要更加豐富.
4.我們的解決方案如下
1.傳統(tǒng)的交互方式:
客戶端發(fā)起請求,服務(wù)器端響應(yīng),經(jīng)過一系列操作生成動態(tài)數(shù)據(jù),將動態(tài)數(shù)據(jù)交由后端模板引擎,經(jīng)過渲染后,傳遞給前端.
2.改良的交互方式
客戶端發(fā)起請求,nginx攔截,若是靜態(tài)資源,則交由文件服務(wù)器直接壓縮后發(fā)送至前端.若是動態(tài)資源請求,則經(jīng)過動態(tài)資源服務(wù)器生成動態(tài)數(shù)據(jù),以json格式返回至前端,交由vue.js渲染處理后進行展示.
5.vue.js 2.x版的重點功能講解
1.怎樣和html結(jié)構(gòu)進行綁定,怎樣和樣式進行動態(tài)綁定,常用的監(jiān)聽事件有哪些
1.基本的渲染
//html結(jié)構(gòu) <div id="app"> {{ message }} </div> //js模塊 var app = new Vue({ //會檢索綁定的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ù)器怎樣進行通訊
在這里推薦大家使用axios進行和服務(wù)端的請求,然后將請求后的數(shù)據(jù)交由vue.js處理.
3.常見的流程控制語句 數(shù)據(jù)校驗 自定義指令
//if 語句 <h1 v-if="ok">Yes</h1> //for 循環(huán)語句 <ul id="example-1"> <li v-for="item in items"> {{ item.message }} </li> </ul>數(shù)據(jù)校驗及其表單控件綁定鏈接地址(https://cn.vuejs.org/v2/guide/forms.html)
以下四點參考官網(wǎng)api,不再做介紹了
4.深入響應(yīng)式怎樣實現(xiàn)(在第一次頁面初始化填值后，如果發(fā)生改變要修改怎么做)?
5.自定義組件應(yīng)用及其使用Render創(chuàng)建Html結(jié)構(gòu)
6.路由的使用
7.常見的修飾符
6.實戰(zhàn)舉例
1.nginx 配置靜態(tài)資源
server { listen 4000; server_name www.test.com; charset utf-8; index /static/index.html;//配置首頁 //這邊可使用正則表達式,攔截動態(tài)數(shù)據(jù)的請求,從而解決跨域問題 location = /sellingJson.html { proxy_pass http://192.168.100.17:8090/vueHelpSellingcar.html; } #配置Nginx動靜分離，定義的靜態(tài)頁面直接從static讀取。 location ~ .*/.(html|htm|gif|jpg|jpeg|bmp|png|ico|txt|js|css)$ { root /static/; #expires定義用戶瀏覽器緩存的時間為7天，如果靜態(tài)頁面不常更新，可以設(shè)置更長，這樣可以 節(jié)省帶寬和緩解服務(wù)器的壓力 expires 7d; } }2.后端請求返回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); //進行序列化,返回值前端 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模塊 頁面加載后,自動去獲取動態(tài)資源 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, //數(shù)據(jù)流 } })); }) .catch(function(err){ console.log(err); }); });以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持武林網(wǎng)。
新聞熱點
疑難解答
