nginx+vue.js實現(xiàn)前后端分離的示例代碼
1.nginx 是一個高性能的HTTP和反向代理服務(wù)器，常用于分布式服務(wù)器管理.
它常用于做負(fù)載均衡(通過調(diào)用多臺服務(wù)器達(dá)到此目的)
靜態(tài)資源輸出更快，可以對資源實現(xiàn)gzip壓縮后輸出(這也是本文為什么用它做靜態(tài)資源訪問的一個重要原因)
適合解決跨域問題和反向代理(因為誰也不想看到在本域名下看到訪問其他域名的情況發(fā)生,跨域可導(dǎo)致csrf攻擊,這是本文用它的第二個原因)
占用內(nèi)存少,秒啟,能快速切換結(jié)點,防止宕機
2.es6 是ECMAScript的第六個版本,如果想要學(xué)好vue.js等js框架,這是必須要學(xué)會的一門語言,推薦學(xué)習(xí)地址如下:http://es6.ruanyifeng.com/
3.vue.js是一款前端模板渲染引擎,類似于后端的jsp,beetl等模板引擎.當(dāng)然結(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)在的項目場景更多元化,這導(dǎo)致一個功能模塊很可能是好幾個項目的請求共同作用的結(jié)果.
2.如果還按照以前的做法,第一個問題是我只能用jsonp去解決調(diào)多個跨域請求的問題,實現(xiàn)起來代碼太過冗余。對于同一功能,很有可能app端和PC端就有兩套不同的寫法。并且?guī)捠莻€很貴的東西,客戶端總是去服務(wù)器端一起靜態(tài)資源的請求,會導(dǎo)致速度慢。動靜分離可以實現(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;//配置首頁
//這邊可使用正則表達(dá)式,攔截動態(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)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
Vue3響應(yīng)式方案及ref?reactive的區(qū)別詳解
眾所周知ref和reactive都是用來作響應(yīng)式數(shù)據(jù),下面這篇文章主要給大家介紹了關(guān)于Vue3響應(yīng)式方案及ref?reactive區(qū)別的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-12-12
關(guān)于vue中ref的使用(this.$refs獲取為undefined)
這篇文章主要介紹了關(guān)于vue中ref的使用(this.$refs獲取為undefined)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-03-03
路由傳參主要有兩種方式一種是路徑傳參一種是參數(shù)傳遞,本文結(jié)合示例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友參考下吧2023-11-11
這篇文章主要為大家詳細(xì)介紹了vue實現(xiàn)前端列表多條件篩選，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-10-10
這篇文章主要介紹了vue-router的兩種模式的區(qū)別，本文通過實例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值,需要的朋友可以參考下2019-05-05
這篇文章主要介紹了對 Vue-Router 進行單元測試的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-11-11
這篇文章主要介紹了vue自定義keepalive組件的相關(guān)資料,keep-alive組件是使用?include?exclude這兩個屬性傳入組件名稱來確認(rèn)哪些可以被緩存的，本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友參考下吧2022-07-07
這篇文章主要為大家詳細(xì)介紹了vue3封裝側(cè)導(dǎo)航文字骨架效果組件，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-09-09
今天小編就為大家分享一篇vue項目初始化到登錄login頁面的示例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-10-10
VUE2—defineProperty和VUE3—proxy使用方式
Vue2和Vue3的響應(yīng)式原理不同,Vue2使用Object.defineProperty,Vue3使用Proxy,Object.defineProperty可以監(jiān)聽某個屬性,但不能監(jiān)聽整個對象,且無法監(jiān)聽對象屬性的新增和刪除,Proxy可以監(jiān)聽整個對象,且不會修改原數(shù)據(jù),可以監(jiān)聽數(shù)組的長度變化2025-01-01