前言：寫前台真的是我不擅長的東西...所以學習和寫了很久很久...前台頁面大概開發了兩天半就開發好了，采用的靜態的html和bootstrap來寫，寫后台的時候糾結住了...怎么說呢，寫頁面真的是頭疼...
- 前序文章鏈接：SpringBoot技術棧搭建個人博客【項目准備】：https://www.jianshu.com/p/0293368fe750
- 前序文章鏈接：SpringBoot技術棧搭建個人博客【后台開發】：https://www.jianshu.com/p/91c6c9fc67c4
Bootstrap or Vue？
先吐槽一句..寫頁面是真的不擅長，然后限於時間的問題，我開始考慮換用Bootstrap來完成頁面的編寫，因為時間有限（我得在實習完之前把所有頁面開發完），學習Vue對於我來說還是存在一些學習成本的，雖然之前已經通過文檔博客之類的學得七七八八（emm..三三四四吧...）的樣子，但我還是想盡可能的寫好...還是用自己熟悉的Bootstrap來完成吧...
前台頁面分析
個人博客的前台頁面相對比較簡單，大概也就這么五個頁面搞定，因為有了原型圖，所以實現起來還是挺容易；
頁面展示
首頁
emm...還原度還算蠻高的啦...而且發現這一套模板對於題圖的要求蠻高的...如果不好看或者圖片本身太小就會變得奇怪以及模糊...目前還沒有找到啥好的方法解決這個圖片的問題，不過倒是找到一個有趣的css屬性叫object-fit: cover;，超級方便的圖片居中方法，之前找了很多JS都不是很滿意，大家可以試試...
博客分類頁
這個頁面還有待商榷...因為后面可能會換成沒有題圖而是只是博文信息的版本...
博文頁
Ps：突然很想吐槽一下自己寫的文章都有點長..專門找了篇內容沒那么多的，不然截圖工具截不完頁面...
保存在數據庫中的是md源碼，在前台請求的時候，我直接轉成了html源碼弄出來，然后CSS樣式是自己找的，跟我的公眾微信號是一個，大家需要的話存一下吧，感覺還是挺好看的：
p{font-size:15px; line-height:28px; color:#595959;font-family:微軟雅黑}
pre, code{font-size:14px; font-family: Roboto, 'Courier New', Consolas, Inconsolata, Courier, monospace;}
code{margin:0 3px; padding:0 6px; white-space: pre-wrap; background-color:#F8F8F8; border-radius:2px; display: inline;}
pre{font-size:15px; line-height:20px;}
precode{white-space: pre; overflow:auto; border-radius:3px; padding:5px10px; display: block !important;}
strong, b{color:#BF360C;}
em, i{color:#009688;}
big{font-size:22px; color:#009688; font-weight: bold; vertical-align: middle; border-bottom:1px solid #eee;}
small{font-size:12px; line-height:22px;}
hr{border-bottom:0.05em dotted #eee; margin:10px auto;}
p{margin:15px 5px!important;}
table, pre, dl, blockquote, q, ul, ol{margin:10px 5px;}
ul, ol{padding-left:10px;}
li{margin:5px;}
lip{margin:5px 0!important;}
ulul, ulol, olul, olol{margin:0; padding-left:10px;}
olol, ulol{list-style-type: lower-roman;}
ululol, ulolol, olulol, ololol{list-style-type: lower-alpha;}
dl{padding:0;}
dldt{font-size:1em; font-weight: bold; font-style: italic;}
dldd{margin:0 0 10px; padding:0 10px;}
blockquote, q{border-left:3px solid #009688; padding:0 10px; color:#777; quotes: none;}
blockquote::before, blockquote::after, q::before, q::after{content: none;}
h1, h2, h3, h4, h5, h6{margin:20px 0 10px; padding:0; font-weight: bold; color:#009688;}
h1{font-size:24px;}
h2{font-size:22px;}
h3{font-size:18px;}
h4{font-size:18px;}
h5{font-size:16px;}
h6{font-size:16px; color:#777;}
table{padding:0; border-collapse: collapse; border-spacing:0; font-size:1em; font: inherit; border:0;}
tbody{margin:0; padding:0; border:0;}
tabletr{border:0; border-top:1px solid #CCC; background-color: white; margin:0; padding:0;}
tabletr:nth-child(2n){background-color:#F8F8F8;}
tabletrth, tabletrtd{font-size:16px; border:1px solid #CCC; margin:0; padding:5px10px;}
tabletrth{font-weight: bold; background-color:#F0F0F0;}
img{display:block;text-align:center;margin:0 auto;}
關於/留言頁
emmm...一大堆測試用的留言信息請無視...
簡歷頁
這里簡歷也僅僅是包含了一個頭和一個尾巴，其實已經做好了...做成的PDF文件可以網上搜索工具直接轉成html代碼，但並不是很想粘出來...
后台頁面分析
當時分析的時候是大致分成了這幾個模塊和這么多個頁面，但是后來實現的時候，一個模塊都整成了一個頁面，懶得復制粘貼再改改改，直接一個頁面搞定；
頁面展示
數據統計模塊
看過我之前博文的童鞋應該都會覺得眼熟（什么？這不就是之前寫天貓找的模板嗎？），反正能省事兒就省，而且這一套模板既有滿足自適應的要求，又有增強表格的js插件，為啥不用呢？好了，鏈接在這里：http://www.cssmoban.com/cssthemes/7381.shtml
這一個模塊就是一個數據統計，包括有：訪問量、日志量、留言數還有一些詳細的列表；
emmm..自適應后大概像下面這樣：
分類管理模塊
我把分類相關的功能都寫在了一個頁面上，這樣操作也方便；
博文管理模塊
點擊編輯會彈出一個模態框，跟新增博文差不太多：
評論管理模塊
這個模塊我后來改了一下，只是用來顯示文章的評論信息，通過監聽Select來動態加載數據，刪除之后雖然是置數據庫isEffective字段為0，但仍然不會在后台顯示...（因為我感覺刪除的都是不想看到的，就不顯示了...）
項目總結
上面就是項目的所有頁面了，雖然現在看起來還是挺清晰簡單的，但寫的時候還是頭大，頭大，頭大...不過通過這一次的開發，對寫前台還是有了一定的熟悉，特別是對JS的編寫以及Bootstrap響應式布局，而且在寫前端的時候測出來還是一堆BUG，也犯了一些拼寫錯誤這樣的低級錯誤...而且感覺前端更多的是細節的東西，因為畢竟是直接與用戶進行交互的，還是希望自己多寫多積累吧，下面對項目中出現的一些問題進行一些總結：
HTML公有資源的提取
前端會面臨着和寫后端一樣的問題，就是怎樣抽取出一些中間件，來讓大家共同使用，例如頭部、尾部，我采用的是下面這樣的方法解決：
<script language="javascript" type="text/javascript" src="js/head.js"></script>
先編寫好單獨的html文件，然后轉成JS動態加載進來就好了，參考文章：https://blog.csdn.net/wabiaozia/article/details/75092623
跨域問題
在前后端結合的時候，出現的第一個問題就是跨域，參考文章：https://blog.csdn.net/saytime/article/details/74937204 ，我是使用的Filter方法，下面是代碼：
/**
* 實現跨域
*
* @author:wmyskxz
* @create:2018-06-21-下午 22:48
*/
@Component
public class SimpleCORSFilter implements Filter {
@Override
public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) throws IOException, ServletException {
HttpServletRequest request = (HttpServletRequest) req;
HttpServletResponse response = (HttpServletResponse) res;
response.setHeader("Access-Control-Allow-Origin", request.getHeader("Origin"));
response.setHeader("Access-Control-Allow-Credentials", "true");
response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS ,PUT, DELETE");
response.setHeader("Access-Control-Max-Age", "3600");
response.setHeader("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept, Connection, User-Agent, Cookie");
chain.doFilter(req, res);
}
@Override
public void init(FilterConfig filterConfig) {}
@Override
public void destroy() {}
}
但其實這樣配置了之后，前端發的請求確實的能提交到服務器上來，服務器也能夠做相應的處理，但AJAX中，PUT和POST方法老是進到error方法中而不進入success方法，我也是沒轍...而且之前沒有給Allow-Headers添加上除X-Requested-with之外的東西，POST的時候它會先提交一個頭里面不光有X-Requested-with還有Content-Type的OPTIONS方法...也不知道為啥，最后只能妥協搞成現在這樣；
時間顯示的BUG
從數據庫取出來的數據給到前台顯示的時候就變成了一串時間戳，解決方法就是在實體類的getCreateBy()這樣的取時間的操作前加上一行注解：@JsonFormat(pattern="yyyy-MM-dd HH:mm:ss",timezone = "GMT+8")，就能成功解決了：
font-awesome庫顯示問題
單獨編寫前台的時候都能夠正常的顯示字體，但是給弄到服務器文件夾下的時候就加載不出來了，也不是404找不到一類的，但字體就是請求不到，但是我點擊控制台的信息又能成功下載到字體不知道是為啥，所以只能妥協給換成了CDN上的CSS：
<link href="//cdn.bootcss.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet">
錯誤頁面跳轉的問題
因為不想讓除了我以外的人登錄進后台頁面，我也是想了各種辦法，其中之一就是把login.html頁面給“隱藏”起來了，具體的做法就是把它放進一個奇怪的文件夾，然后使用一個奇怪的地址（以后再改）來綁定它：
所以這樣就會出現一個問題，因為我寫的攔截器的原因，所有不是以/admin開頭的地址如果請求錯誤的話，地址欄不變，會自動跳轉到error.html文件中，因為我把這個頁面放到了static根目錄下，這是SpringBoot默認覆蓋的結果，但是如果我在后台攔截器中使用重定向訪問error.html的話就會出現404圖片請求不到的問題，因為它會默認訪問/admin/img/404.png這個地址（此時我后台的頁面放在/admin/目錄下），所以我不得不把error.html中img標簽中的src改成一個網絡地址；
項目地址 & 后期計划
Github地址：https://github.com/wmyskxz/MyBlog
因為前端（不包括后台頁面）沒有加任何的響應式的東西，就只是用了百分比來顯示，但測試的時候不知道為啥手機端啊，小屏幕啊都還可以，特別是手機端它不會縮放看到的還是頁面本身的樣子..還是挺好的，又可以騙自己節省了一大部分的工作，hhh
馬上面臨着暑假，同時也意味着秋招快要開始了，還是准備復習復習基礎（數據結構和算法），emmm...沖刺沖刺大廠，自己加油吧...
歡迎轉載，轉載請注明出處！
簡書ID：@我沒有三顆心臟
github：wmyskxz
歡迎關注公眾微信號：wmyskxz_javaweb
分享自己的Java Web學習之路以及各種Java學習資料