????上節我們說到了一個問題：就是如何讓菜單出現在每個頁面的左側。

比如我們剛研發好的home.html，配上菜單看才會更好看。

????這里有三個方法：

把菜單的html代碼復制粘貼到 其他各個頁面

特點：完全不推薦這個方式。一百個頁面難道要粘一百段菜單代碼么。然后我新改動了菜單，就要手動去改動一百個頁面，這簡直在開玩笑。

把菜單的html代碼做成組件，然后其他各個頁面去調用，在頁面上生成菜單

????????特點：比較不錯。

??? 3. 把菜單作為后臺唯一能返回的html，也就是唯一的render函數內的那個html參數。然后在菜單welcome.html 中 把其他各個頁面都當作一個子頁面 一個來引入。

????????特點：和方法2邏輯相反，而且在很多js等靜態資源導入上更簡潔。比如100個頁面都需要引入jquery.min.js文件，那么你只需要在welcome.html中引入一次，即可在所有頁面中生效。

綜上所述，各有利弊。我這里選用第三種方式了。

進行思考：后臺以后所有的函數，返回的renede函數中的html 都是welcome.html菜單了，那么自己本身的頁面要怎么傳入呢？這里就需要我們再加一個參數，來作為真正要訪問的頁面html了。

所以本節先引入一個知識點:render函數都能往里面加什么東西。

render 我們之前的用法是：?

里面只有倆個參數，一個request是本次請求的http信息。一個是html文件名。那么其實它還可以加第三個參數：字典。這一個字典 其實就等于 可以加無限個參數了。

比如這樣：

那么這些參數 會用在哪呢？也就是說，怎么去調用出來呢？答案就是 這些參數是會作用在 html頁面上！

用法就是。在html的靜態代碼中，加入{{ key1 }} 那么真正用戶看到的 這里就變成來?字典中key1的值 1

我們來做個實驗：

在home.html這個html里加入username參數名：一定用倆個大括號包起來。這樣瀏覽器才會知道這里是個變量 需要去賦值。

我們進入url：http://127.0.0.1:8000/home/ 中看看效果：

暫時并沒有什么顯示，那是因為我們后臺還沒給返回username這個參數。讓我們在后臺函數home中加上username參數：

好，我們修改了后臺views.py ，那么切換回瀏覽器后，django會自動重啟，你需要等待它一下。然后刷新頁面：

可以看到，已經顯示出來了，這就是后臺如何給前端html返回數據的一個途徑。

好了。我們理解了這個概念，那么接下來還要學習新知識點：如何引入，這里大家如果聽不太明白，就照葫蘆畫瓢即可，慢慢的自會了解。

打開welcome.html，在它里面 body標簽內的最后位置加上一個空div,給這個div寫一個屬性。id 為 page1 ,如圖：

然后在下面寫一個script標簽，script標簽就是專門存放我們js代碼的地方。

?在script標簽內寫上一句代碼：

$('#page1').load('/child/'+'{{ whichHTML }}/{{ oid }}/')

大家看到這句話可能問題比較多，這里直接復制就好，先簡單跟大家說說是什么意思，這句話的意思是，一旦打開welcome.html， 那么就運行這句代碼，這句代碼會把id為page1的那個空div，給它的內容加載另一個url返回的頁面。

這個url 我定位：'/child/'+'{{ whichHTML }}/{{ oid }}/' 它會返回我們真正的要訪問的頁面 home.html 其中的/child/一級路由只是我的個人習慣，以便自己知道這個路由是來找孩子(子頁面)的。后面倆個 {{大括號，我們前面說了，瀏覽器會識別成變量，把我們的倆個參數的值都替換進來。這個whichHTML 就是我們真實要拿到的html的名字。后面的oid，也就是我預留出來的一個參數。以后可能用的上。萬一welcome去接兒子home,結果home說你怎么證明你是我爸爸？拿出來證明。證明對了，兒子就跟著回家，證明不對，那么就??♀?同志跟你回家了，雖然我們今天的教程用不上這個證明參數，但是后續是一定用上的相信我。

好現在完成后是這樣：

接下來去urls.py中，寫這個/child/? url的映射關系吧～打開urls.py 加入這樣一句： url(r"^child/(?P.+)/(?P.*)/$", child), # 返回子頁面我們發現，多出來倆個沒見過的東西：

這里解釋一下，這是標準的正則寫法。目的是獲取url中的這倆個變量。

也就是說，這個url后面的倆段，并不是寫死的一成不變的。而是一個變量，對應的是我們welcome.html中的 whichHTML 和? oid

? ? 因為是變量，所以我們這個正則寫法可以完全匹配到并且獲取里面的值。

接下來我們去寫后端child函數。打開views.py，新增child函數

它只做一件事，就是真實的返回?我們目標html,在這里就是home.html，其中的eid，就是獲取url中的?(?P.+) 的值，也就是我們welcome.html中的

{{ whichHTML }} ，也就是我們后臺函數返回的子頁面html的真實名字。

現在讓我們來修改home函數，因為現在除了child函數外，所有的后臺函數都要返回的是welcome.html，而原來的真正目標頁面home.html則變成了區區字典里的一個值，它的key是 whichHTML 。

def home(request): return render(request,'welcome.html',{"whichHTML": "Home.html","oid": ""})

oid 暫時用不上，為空即可。

讓我們切換到瀏覽器，等待django重啟(若中間報錯停止了，就手動點擊運行)，再刷新頁面看看效果：

可以看到，左側的菜單成功顯示了。但是我們發現。home.html的排版出問題了，怎么居中的東西全變成靠左了呢？

這是因為它現在的js/css靜態資源 全被welcome.html給影響了，同一類型的js/css 在welcome.html和home.html中都被引入。而且版本不同，勢必產生沖突。這就需要我們去解決了，這種情況之后會很常見。因為我們總是從網絡上下載，導致資源不統一，我們這里可以采取一些辦法，給它糾正過來。

我們打開home.html，發現我們設置居中的屬性在body中，但是作為一個子頁面加入了welcome.html后，body中的css設置被無視了

既然body不行了，那我弄個div 裝這些東西吧，div的樣式可不會被無視掉目前。

所以我們在body內?寫個div

然后給它中間回車，分的大一點。

然后把下面的內容 剪切到這個div中來

變成如下圖所示：

然后我們把body中的居中樣式 給挪到div上：

然后回去刷新頁面看看吧。

一切正常了～

之后的所有頁面，都會和home.html的出現形勢一樣，都是作為子頁面嵌入到welcome.html這個菜單頁面中去。后面我就不會再詳細關于這里的細節了。

好了今天分享到這里了。老規矩：過百日更，希望大家不要吝嗇技術。勇于分享哦～?

總結

以上是生活随笔為你收集整理的js代码自动排版_接口测试平台代码实现9：菜单常显的全部內容，希望文章能夠幫你解決所遇到的問題。

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