上一篇中已經(jīng)把所有思路都理順了，這邊我們就開始具體編碼吧。(如果您有更好的辦法，歡迎留言討論！互相學(xué)習(xí)！)

我們先來看一下最終完成的效果：

一：完整項(xiàng)目目錄結(jié)構(gòu)如圖所示：

二：更換模板引擎為? hbs

2.1? 安裝 express-hbs

npm i express-hbs

2.2 在app.js中更換模板引擎，并指定母版頁位置? 如圖：

至此，我們的模板引擎更換完畢，你會(huì)發(fā)現(xiàn)，在Views文件加下的所有文件，都是以*.hbs結(jié)尾的，如果新加文件，請保持后綴一致。

2.3 剛才已經(jīng)配置好了母版頁的位置，就是? “/views/layout”? ,現(xiàn)在我們?nèi)タ纯催@個(gè)母版頁里面的內(nèi)容吧；如下圖

2.4 現(xiàn)在來介紹下母版頁，這個(gè)母版頁是AdminLTE中的精簡版，我把多余的部分全部刪除。

從圖中可以看出，模板分為四個(gè)部分：header(頭部)、 aside(側(cè)邊欄)、 content(中間內(nèi)容)? 和? footer(底部)

其中我們注意到，在中間內(nèi)容部分，有一個(gè)? {{{body}}}這種寫法的意思就是：每次訪問具體頁面時(shí)，會(huì)將具體頁面替換掉{{{body}}}部分的內(nèi)容；

例如：我們想訪問主頁，主頁是? views/index.hbs,我們來看看其中的內(nèi)容：

是的，主頁里就只有這些代碼，當(dāng)進(jìn)行訪問主頁路由的時(shí)候，也就是? localhost:3000時(shí)，hbs會(huì)將整個(gè)div自動(dòng)替換{{{body}}}

我們所看到的就會(huì)如下：這極大的方便了我們對模板的應(yīng)用。

到目前，我們所有的視圖都具備模板了，而且母版頁是單獨(dú)存放的；下面我們來解決無刷新問題；

三：使用ajax實(shí)現(xiàn)無刷新頁面

首先，我們編寫一個(gè)公共的js方法，放在? Base.js中，這個(gè)方法有兩個(gè)作用

1：將側(cè)邊欄所有的頁面切換請求，通過Ajax發(fā)送出去，并得到一個(gè)html 頁面，將中間部分進(jìn)行填充；

2：成功填充頁面后，將當(dāng)期請求的url更新到地址欄，以便于用戶刷新操作；

看一下這個(gè)方法：

var ChangePage = function (url) {

$.ajax({

type: 'GET',

url: url,

data: { c_type: 'page' },

success: function (res) {

$("#main_container").html(res);

var stateObject = {};

var title = "Wow Title";

var newUrl = url;

history.pushState(stateObject, title, newUrl);

}

});

}

細(xì)心的朋友會(huì)發(fā)現(xiàn)一個(gè)問題，我在ajax請求的時(shí)候，給了一個(gè)參數(shù)：c_type

別忘記了，這里還有一個(gè)非常嚴(yán)重的問題沒有解決，那就是? 通過頁面?zhèn)冗厵诎l(fā)起的頁面跳轉(zhuǎn)，我們希望返回的是不帶模板頁的分布視圖！

這里的參數(shù)?c_type就是為了便于后續(xù)的區(qū)分處理

四：路由中渲染頁面的區(qū)分處理

4.1 來看一下路由渲染頁面是如何進(jìn)行操作的(為了方便，我把所有頁面的跳轉(zhuǎn)都寫到了index.js路由中，不要像我學(xué)習(xí)啊，我實(shí)在是太懶了)

router.get('/', function(req, res, next) {

var pageData = {};

if(req.query.c_type=='page')

{

pageData.layout='';

}

res.render('index', pageData);

});

首先我們定義了一個(gè)對象：pageData,他用來向頁面?zhèn)鬟f數(shù)據(jù)；

這里當(dāng)我們發(fā)現(xiàn)前端請求的參數(shù)里包含一個(gè)叫 c_type 的參數(shù)，并且值為? page 那么我們就認(rèn)為他是從頁面?zhèn)冗厵诎l(fā)起的請求

這個(gè)時(shí)候，我們關(guān)鍵性的一句來了：pageData.layout='';這一句的意思就是不使用模板，返回局部視圖，從而實(shí)現(xiàn)了無刷新；

4.2 但是這樣的操作太過繁瑣，我們豈不是每個(gè)路由都需要添加一個(gè)類似的判斷？太麻煩了吧？于是我們想到了?中間件 ，它可以把每個(gè)請求都過濾一下；

我們來看一下中間件的寫法：

//攔截器，必須放在靜態(tài)資源聲明之后、路由導(dǎo)航之前

app.use(function (req, res, next) {

var url = req.query.c_type;

global.pageData = {

data:{}

}

if (url == "page") {

global.pageData.layout='';

}

console.log(global.pageData)

next();

});

這里我們把每個(gè)請求都就進(jìn)行攔截，如果發(fā)現(xiàn)請求中帶有? c_type參數(shù)，那么我們就定義一個(gè)全局對象:global.pageData

并給? pageData.layout 賦值為空；

在每個(gè)路由中，我們只需要引用下這個(gè)全局變量，就可以實(shí)現(xiàn)模板的自由控制：改良后的路由如下：

router.get('/', function(req, res, next) {

res.render('index', global.pageData);

});

是不是瞬間少了好多代碼！

如果你有一些自定義的數(shù)據(jù)，就可以放到global.pageData中，這里不作過多解釋；

到目前，你已經(jīng)完成了大部分的操作，頁面實(shí)現(xiàn)了無刷新加載！

五：關(guān)于頁面?zhèn)冗厵谂渲?#xff0c;以及樣式保留問題

側(cè)邊欄的樣式完全是AdminLTE中的原始樣式，這里你需要稍微觀察一下，如果需要添加更多的側(cè)邊欄，只需要按照其規(guī)則就可以

關(guān)于樣式保留，這里我們不過多的介紹，下面是完整方法：在? Base.js中

$(".treeview a").click(function () {

var item = $(this).parent().parent().parent('.treeview');

var idStr = $(item).attr('id');

if (idStr != undefined) {

localStorage.setItem("c_slider", idStr);

}else

{

localStorage.setItem("c_slider", '');

}

})

$(function () {

var c_slider = localStorage.c_slider

if (c_slider != undefined) {

$("#" + c_slider).addClass("menu-open");

$("#" + c_slider + ' ul').css('display', 'block');

}

})

六：完整Demo下載：

https://download.csdn.net/download/tomato2313/10937611(可能還在審核中)

總結(jié)

以上是生活随笔為你收集整理的ajax实现局部删除,Express+AdminLTE+hbs+Ajax实现局部刷新终极版（第二部分）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。