部落格開發總結之頁面編寫
前面是一堆廢話,正文下拉!!!
學習Java斷斷續續也快兩年了(實際應該是一年多),從大學第一次接觸C語言,就發現自己其實是喜歡程式設計的。在高中的時候,聽說了C語言後就想要學習,覺得寫程式碼是一件很酷的事情,於是在網上找了一份教程,試著在命令列介面printf("hello,world"); ,結果根本就不是那一回事,也就放棄了。到大學再次接觸C語言後,才知道原來還要搭建環境變數,或者使用TC20。在老師的帶領下,進入到了另一條道路,我未來的方向也就此改變。
我大學所學的專業是“機電技術教育”,你們一定沒聽說過。全國有這個專業的學校也沒有幾所,並不是這個專業如何厲害,而是這個專業是一個特殊的專業。我是一名對口生,初中高中並沒有好好學習,中招連高中都沒有考上的我,還是被父母花高價送到了高中學習,可是上了一個月的高中發現真是生不如死。因為初中比較貪玩,放縱習慣了,進入高中後發現根本適應不了高中的生活,讓我產生了厭學的情緒。告訴父母我的堅決想法後,父母也沒有辦法,總不能不上學吧,於是我被送到了職業高中,機電專業,在我的家鄉還是很好找工作的。進入職高之後,彷彿來到了一個天堂。用我們的話說,我們上的就是一個高階的託兒所
有了方向卻沒有目標,只知道要充實自己,卻不知道要充實什麼。大一不知道怎麼的,迷戀上了PS,覺得PS好高階,於是瘋狂學習PS,可是學到了瓶頸期,大部分工具都會用,但是不知道該什麼時候用什麼工具,慢慢的也就放棄了(文末附PS作品
後來開始學習C語言,老師教的很少連指標都沒有講,於是在網上找教程在加上看譚浩強的教材,自學了指標和定義結構體。後來看著如鵬網楊中科老師的視訊,一步一步寫出了一個打飛機的小遊戲,雖然連基本的功能都不完善,但也是滿滿的幸福感。再後來就是開始學習C++,C#;但都只學了個皮毛。直到接觸了Java,然後愛上了Java。當時學的一知半解,連可變陣列理解起來都很困難,好在沒有放棄,一步一步走到現在。
當時學完SSH之後,就想著要寫一個部落格,但一直推到現在,才寫開始動手。主要就是以前對Java的底層不瞭解,對框架不熟悉,也沒有信心來寫。又經過幾輪的學習,知道了JVM相關的東西,對API也比較瞭解了,找個閒工夫開工。廢話有點多,不知怎麼的突然想回顧下過去,以下正文。
--------------------------------------------------------------------正文分割線--------------------------------------------------------------------
1、頁面的選取
對一個Java程式設計師來說(雖然我還不是),雖然懂CSS,HTML,但是寫一個漂亮的頁面無疑是一件很痛苦的事情。但是部落格又必須有一個漂亮的頁面,怎麼辦?當然是找一個模板-_-!原諒我真的寫不出來一個漂亮的頁面。
首先選擇的是後臺模板(我也是寫了一半才知道有個叫Tale的東西)
這個模板有後臺管理的意思,而且頁面也不復雜,檢視原始碼,已經對各個區域進行了劃分,寫在DIV塊中
後臺頁面選擇確定後,就開始進行內容的抽取。由於使用的是Spring Boot,而且JSP也慢慢的被大多數人拋棄,也沒有再用的必要了,所以頁面準備用thymeleaf來改造,這也是我第一次接觸和使用thymeleaf,瞭解了之後瞬間就愛上了它。
看了幾個頁面的原始碼,也知道了各DIV所在的區域,於是就開始抽取相同的程式碼。
2、頁面的抽取
經過抽取,原來將近700行的程式碼只剩下了41行,由於頁面的頂部選單,左側選單欄,和頁尾都是相同的內容,所以單獨抽取成HTML,然後再用th:replace引入頁面。遇到的一個比較棘手的問題就是左側的選單欄的開啟、關閉和選中的效果。左側選單欄當點選二級選單的內容後,在新的頁面中,左側選單欄又回到了全部關閉的狀態,檢視原始碼發現問題所在。
index.html部分原始碼
<li class="">
<a href="#" class="dropdown-toggle">
<i class="menu-icon fa fa-desktop"></i>
<span class="menu-text"> UI & 元素 </span>
<b class="arrow fa fa-angle-down"></b>
</a>
<b class="arrow"></b>
<ul class="submenu">
<li class="">
<a href="elements.html">
<i class="menu-icon fa fa-caret-right"></i>
UI元素
</a>
<b class="arrow"></b>
</li>
.......
elements.html(UI & 元素)部分原始碼
<li class="active open">
<a href="#" class="dropdown-toggle">
<i class="menu-icon fa fa-desktop"></i>
<span class="menu-text"> UI & 元素 </span>
<b class="arrow fa fa-angle-down"></b>
</a>
<b class="arrow"></b>
<ul class="submenu">
<li class="active">
<a href="elements.html">
<i class="menu-icon fa fa-caret-right"></i>
UI元素
</a>
<b class="arrow"></b>
</li>
.......
可以看出,當二級選單被選中後,<li>標籤的class屬性發生變化,一級選單由原來的空串變成了active open,二級選單由原來的空串變成了active,發現問題所在後,又經過研究,發現<th:replace>屬性還可以傳值。在提取出的左側選單頁面定義<th:fragment>
<div th:fragment="menu(active,bigactive)" id="sidebar" class="sidebar responsive">
menu將接收兩個引數,bigactive用來接收一級選單名稱,active用來接收二級選單。再各個頁面對這兩個引數進行賦值。
<html lang="en" xmlns:th="http://www.thymeleaf.org" th:with="title='內容管理',active='content_manage',bigactive='content'">
使用表示式來判斷當前頁面的分類
<li th:class="${bigactive}=='content'?'active open':''">
<a href="#" class="dropdown-toggle">
<i class="menu-icon fa fa-list"></i>
<span class="menu-text"> 內容 </span>
<b class="arrow fa fa-angle-down"></b>
</a>
<b class="arrow"></b>
<ul class="submenu">
<li th:class="${active}=='content_manage'?'active':''">
<a th:href="@{/admin/content_manage}">
<i class="menu-icon fa fa-caret-right"></i>
內容管理
</a>
<b class="arrow"></b>
</li>
.......
對傳入的引數進行比較,如果符合所屬分類,就將一級標題的class值設定為active open,將二級標題的的class值設定為active。這樣就完美解決。真的是會者不難,難著不會。
再者就是表單內容的提交,由於提交按鈕用的是<button/>標籤,沒有辦法直接提交,所以寫了個提交函式。
function subContent(status) {
var title = $('#contentForm input[name=title]').val();
if($.trim(title) == "" && title == '') {
alert("標題不能為空");
return;
}
var abstracts = $('#contentForm textarea[name=abstracts]').val();
var tags = $('#contentForm input[name=tags]').val();
if(tags == '') {
alert("標籤不能為空")
return;
}
var category = $('#contentForm select[name=category]').val();
if(category == '') {
alert("請選擇一個分類");
return;
}
var content = $('#contentForm div[id=editor1]')[0].innerHTML;
$.ajax({
url:'/admin/content/add',
async:false,
type:'POST',
dataType:'text',
data:{
title:title,
abstracts:abstracts,
tags:tags,
category:category,
content:content
},
success:function(data) {
if(data=='success') {
window.location.href = "/admin/content_manage"
}else{
alert(data);
}
}
});
}
3、部落格首頁導航欄的欄目選取
檢視原始碼,在不同的頁面,導航欄的程式碼都是相同的,所以排除了是通過頁面新增class屬性的方式
<div id="mnav">
<h2><span class="navicon"></span></h2>
<ul>
<li><a href="index.html">網站首頁</a></li>
<li><a href="about.html">關於我</a></li>
<li><a href="share.html">模板分享</a></li>
<li><a href="list.html">學無止境</a></li>
<li><a href="info.html">慢生活</a></li>
<li><a href="gbook.html">留言</a></li>
</ul>
</div>
<nav class="topnav" id="topnav">
<ul>
<li><a href="index.html">網站首頁</a></li>
<li><a href="about.html">關於我</a></li>
<li><a href="share.html">模板分享</a></li>
<li><a href="list.html">學無止境</a></li>
<li><a href="info.html">慢生活</a></li>
<li><a href="gbook.html">留言</a></li>
</ul>
</nav>
那可能就是通過js程式碼控制導航欄樣式變化的。
在每個頁面都引入了一個 nav.js 的檔案,開啟看下。
var obj=null;
var As=document.getElementById('topnav').getElementsByTagName('a');
obj = As[0];
for(i=1;i<As.length;i++){if(window.location.href.indexOf(As[i].href)>=0)
obj=As[i];}
obj.id='topnav_current'
只有短短的六行程式碼,看了下確實是改變導航欄樣式的程式碼。
首先取到 id 為 topnav 標籤內的所有 a 標籤,然後進行遍歷。檢視當前頁面地址中是否包含 a 標籤所指向的連結,如果是當前頁面,就返回起始位置的索引(大於等於0),然後把該標籤的 id 設定為 topnav_current 。
但是此方法對改造後的頁面並不適用。因為使用了 RESTful 風格,每篇文章的地址為 www.xxxx.com/info/文章id.html 。所以對原始碼進行修改。
var obj=null;
var As=document.getElementById('topnav').getElementsByTagName('a');
obj = As[0];
for(i=1;i<As.length;i++){if(window.location.href.indexOf(As[i].href.substring(0,As[i].href.lastIndexOf(".")))>=0)
obj=As[i];}
obj.id='topnav_current'
As[i].href.lastIndexOf(".") 把 a 標籤連結最後的 .html 去掉,即http://localhost:8080/index http://localhost:8080/info。噹噹前頁面中的連線包含http://localhost:8080/index 或者 http://localhost:8080/info 時,例如 http://localhost:8080/index.html、http://localhost:8080/info/2029.html 時,因為連結包含 a 標籤去掉 .html 的子串,所以索引值大於零時,a 標籤的 id 值也發生改變。
部落格首頁:
後臺管理: