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渲染處理后進(jìn)行展示.
5.vue.js 2.x版的重點功能講解
1.怎樣和html結(jié)構(gòu)進(jìn)行綁定,怎樣和樣式進(jìn)行動態(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ù)器怎樣進(jìn)行通訊
在這里推薦大家使用axios進(jìn)行和服務(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);
//進(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模塊 頁面加載后,自動去獲取動態(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)文章
Vue?CLI是一個強大的開發(fā)工具,可用于快速搭建Vue.js項目,在Vue?CLI中使用自定義組件是構(gòu)建交互式和模塊化Web應(yīng)用的重要一環(huán),下面我們就來看看vue?cli中如何使用自定義的組件吧2023-11-11
vue實現(xiàn)todolist單頁面應(yīng)用
這篇文章主要為大家詳細(xì)介紹了vue實現(xiàn)todolist單頁面應(yīng)用，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-04-04
閑話少說，我們進(jìn)入今天的小小五分鐘學(xué)習(xí)時間，前面我們了解了vue的組件，我們本文主要是講解vue的動態(tài)組件和內(nèi)置組件，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-08-08
Vue技巧Element Table二次封裝實戰(zhàn)示例
這篇文章主要為大家介紹了Vue技巧Element Table二次封裝實戰(zhàn)示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-11-11
Vue3源碼分析reactivity實現(xiàn)方法示例
這篇文章主要為大家介紹了Vue3源碼分析reactivity實現(xiàn)方法原理示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-01-01
這篇文章主要介紹了vue項目引入Iconfont圖標(biāo)庫的相關(guān)知識，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下2018-10-10
Element+Vue實現(xiàn)動態(tài)表單多個下拉框組件功能
這篇文章主要介紹了Element+Vue實現(xiàn)動態(tài)表單多個下拉框組件功能，本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-07-07
這篇文章主要介紹了vue的nextTick的使用,本文從源碼出發(fā)給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值，需要的朋友可以參考下2018-11-11
解決vue-cli項目webpack打包后iconfont文件路徑的問題
今天小編就為大家分享一篇解決vue-cli項目webpack打包后iconfont文件路徑的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
本篇文章從javascript原型鏈來解釋為什么vue中data必須是一個函數(shù)，解釋一下這部分的原理內(nèi)容，感興趣的朋友跟隨小編一起看看吧2021-11-11