已使用SpringCloud+React重構，歡迎訪問重構后的項目，技術上比較新。
地址： myblog2.0

原項目地址：myblog1.0
項目總體設計：
1.用戶登錄、注冊
目前使用bootstrapt模態框簡單實現。
（1）個人信息欄默認不加載；
（2）登錄時會根據用戶名、密碼，經過md5加密算法處理后去數據庫驗證，成功則將用戶信息保存到cookie中，并加載個人信息欄；
（3）注冊時會先判斷輸入的用戶名是否存在，如存在則提示“該用戶名已存在，請重新輸入”，注冊成功則將用戶信息保存到cookie中，并加載個人信息欄

2.動態發布
（1）在發布動態時可以選擇標簽，用了bootstrapt4的按鈕組，點擊某個按鈕時該按鈕會改變顏色，同時清除按鈕組中其它按鈕之前賦上的顏色，不同標簽對應不同顏色


（2）在發布動態時會獲取選中的標簽值，保存到數據庫，在回顯時會顯示相應標簽樣式（使用bootstrapt4的徽章樣式）

3.動態加載
（1）在回顯動態列表時會對發布時間進行處理，如果是一分鐘以內則顯示“剛剛”，如果是三天以內則顯示“X天前 X時:X秒”，如果是今年內則不顯示年份

（2）邏輯代碼如下：

public static String DateHandel(String date) {String nowDate = null;//當前時間try {nowDate = getCurrentDateStr();} catch (Exception e) {e.printStackTrace();}if (date != null && date.length() >= 16) {int dateYear = Integer.parseInt(date.substring(0, 4));//年int nowYear = Integer.parseInt(nowDate.substring(0, 4));//當前年int dateMonth = Integer.parseInt(date.substring(5, 7));//月int nowMonth = Integer.parseInt(nowDate.substring(5, 7));//當前月int dateDay = Integer.parseInt(date.substring(8, 10));//日int nowDay = Integer.parseInt(nowDate.substring(8, 10));//當前日int dateHour = Integer.parseInt(date.substring(11, 13));//小時int nowHour = Integer.parseInt(nowDate.substring(11, 13));//當前小時int dateMinute = Integer.parseInt(date.substring(14, 16));//分int nowMinute = Integer.parseInt(nowDate.substring(14, 16));//當前分if (nowYear - dateYear < 1) {if (nowMonth - dateMonth == 0) {if (nowDay == dateDay) {if ((nowHour - dateHour) < 1 && (nowMinute - dateMinute) < 1) {return "剛剛";} else if (nowHour - dateHour < 1) {return (nowMinute - dateMinute) + "分鐘前";} else if (nowHour - dateHour <= 6) {return (nowHour - dateHour) + "小時前";}return "今天 " + date.substring(11,16);} else if (nowDay - dateDay == 1) {return "昨天 " + date.substring(11, 16);} else if (nowDay - dateDay == 2) {return "前天 " + date.substring(11, 16);}}return date.substring(5, 16);}return date.substring(0, 16);}return date.substring(0, 16);} }

4.分頁功能
加載文章列表時如果查詢出的文章數大于10，則顯示頁碼欄；
如果不是第一頁，則顯示“上一頁”按鈕；
如果有下一頁，則顯示“下一頁”按鈕；如果當前頁大于5則只顯示當前頁前三頁~當前頁后三頁，如果首頁和尾頁不在此范圍內，則顯示首頁和尾頁；
如果首頁和尾頁與當前頁-3和當前頁+3不連續時，則顯示“…”。


具體代碼如下：
var pageTotal = data[0].pageTotal;
var pageNum = data[0].pageNum;
var pageSize = data[0].pageSize;
var str = “”;
if (pageTotal >= pageSize) {//文章條數大于10條才顯示頁碼欄
str += “

”;
if (curPage > 1) {//如果不是第一頁，則顯示"上一頁"按鈕
str += “上一頁”;
}

//任何情況，只要顯示頁碼欄，就一定顯示第一頁 if (curPage == 1) {str += "&nbsp;&nbsp;<a class='curPage'>1</a>"; } else {str += "&nbsp;&nbsp;<a onclick='page(" + 1 + ")'>1</a>"; }if (curPage > 5) {//當前頁大于5時則只顯示當前頁前3頁～當前頁后3頁，以及首頁str += "&nbsp;&nbsp;..."for (var i = curPage - 3; i <= (curPage + 3) && i <= pageNum; i++) {if (i == curPage) {str += "&nbsp;&nbsp;<a href='#' class='curPage'>" + i + "</a>";} else {str += "&nbsp;&nbsp;<a href='#' onclick='page(" + i + ")'>" + i + "</a>";}} } else {for (var i = 2; i <= pageNum && i <= (curPage + 3); i++) {if (i == curPage) {str += "&nbsp;&nbsp;<a href='#' class='curPage'>" + i + "</a>";} else {str += "&nbsp;&nbsp;<a href='#' onclick='page(" + i + ")'>" + i + "</a>";}} }if (pageNum - curPage > 3) {//總頁數大于當前頁+3時，顯示尾頁if (pageNum - curPage > 4) {//總頁數大于當前頁+3且不連續時，才顯示“...”str += "&nbsp;&nbsp;...";}str += "&nbsp;&nbsp;<a href='#' onclick='page(" + pageNum + ")'>" + pageNum + "</a>"; }if (curPage < pageNum) {//當前頁不是最后一頁，則顯示下一頁按鈕str += "&nbsp;&nbsp;<a href='#' onclick='page(" + (curPage + 1) + ")'>下一頁</a>"; } str += "</div>"; $("#main").append(str);

總結

以上是生活随笔為你收集整理的个人博客系统开发记录的全部內容，希望文章能夠幫你解決所遇到的問題。

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