部落格開發總結之頁面編寫
前面是一堆廢話，正文下拉！！！
學習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 值也發生改變。
部落格首頁：
後臺管理：
