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

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

一：完整項目目錄結構如圖所示：

二：更換模板引擎為? hbs

2.1? 安裝 express-hbs

npm i express-hbs

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

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

2.3 剛才已經配置好了母版頁的位置，就是? “/views/layout”? ,現在我們去看看這個母版頁里面的內容吧；如下圖

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

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

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

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

是的，主頁里就只有這些代碼，當進行訪問主頁路由的時候，也就是? localhost:3000時，hbs會將整個div自動替換{{{body}}}

我們所看到的就會如下：這極大的方便了我們對模板的應用。

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

三：使用ajax實現無刷新頁面

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

1：將側邊欄所有的頁面切換請求，通過Ajax發送出去，并得到一個html 頁面，將中間部分進行填充；

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

看一下這個方法：

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

}

});

}

細心的朋友會發現一個問題，我在ajax請求的時候，給了一個參數：c_type

別忘記了，這里還有一個非常嚴重的問題沒有解決，那就是? 通過頁面側邊欄發起的頁面跳轉，我們希望返回的是不帶模板頁的分布視圖！

這里的參數?c_type就是為了便于后續的區分處理

四：路由中渲染頁面的區分處理

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

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

var pageData = {};

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

{

pageData.layout='';

}

res.render('index', pageData);

});

首先我們定義了一個對象：pageData,他用來向頁面傳遞數據；

這里當我們發現前端請求的參數里包含一個叫 c_type 的參數，并且值為? page 那么我們就認為他是從頁面側邊欄發起的請求

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

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

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

//攔截器，必須放在靜態資源聲明之后、路由導航之前

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

});

這里我們把每個請求都就進行攔截，如果發現請求中帶有? c_type參數，那么我們就定義一個全局對象:global.pageData

并給? pageData.layout 賦值為空；

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

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

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

});

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

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

到目前，你已經完成了大部分的操作，頁面實現了無刷新加載！

五：關于頁面側邊欄配置，以及樣式保留問題

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

關于樣式保留，這里我們不過多的介紹，下面是完整方法：在? 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(可能還在審核中)

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。