已使用SpringCloud+React重構(gòu)，歡迎訪問重構(gòu)后的項(xiàng)目，技術(shù)上比較新。
地址： myblog2.0

原項(xiàng)目地址：myblog1.0
項(xiàng)目總體設(shè)計(jì)：
1.用戶登錄、注冊(cè)
目前使用bootstrapt模態(tài)框簡(jiǎn)單實(shí)現(xiàn)。
（1）個(gè)人信息欄默認(rèn)不加載；
（2）登錄時(shí)會(huì)根據(jù)用戶名、密碼，經(jīng)過md5加密算法處理后去數(shù)據(jù)庫(kù)驗(yàn)證，成功則將用戶信息保存到cookie中，并加載個(gè)人信息欄；
（3）注冊(cè)時(shí)會(huì)先判斷輸入的用戶名是否存在，如存在則提示“該用戶名已存在，請(qǐng)重新輸入”，注冊(cè)成功則將用戶信息保存到cookie中，并加載個(gè)人信息欄

2.動(dòng)態(tài)發(fā)布
（1）在發(fā)布動(dòng)態(tài)時(shí)可以選擇標(biāo)簽，用了bootstrapt4的按鈕組，點(diǎn)擊某個(gè)按鈕時(shí)該按鈕會(huì)改變顏色，同時(shí)清除按鈕組中其它按鈕之前賦上的顏色，不同標(biāo)簽對(duì)應(yīng)不同顏色


（2）在發(fā)布動(dòng)態(tài)時(shí)會(huì)獲取選中的標(biāo)簽值，保存到數(shù)據(jù)庫(kù)，在回顯時(shí)會(huì)顯示相應(yīng)標(biāo)簽樣式（使用bootstrapt4的徽章樣式）

3.動(dòng)態(tài)加載
（1）在回顯動(dòng)態(tài)列表時(shí)會(huì)對(duì)發(fā)布時(shí)間進(jìn)行處理，如果是一分鐘以內(nèi)則顯示“剛剛”，如果是三天以內(nèi)則顯示“X天前 X時(shí):X秒”，如果是今年內(nèi)則不顯示年份

（2）邏輯代碼如下：

public static String DateHandel(String date) {String nowDate = null;//當(dāng)前時(shí)間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));//當(dāng)前年int dateMonth = Integer.parseInt(date.substring(5, 7));//月int nowMonth = Integer.parseInt(nowDate.substring(5, 7));//當(dāng)前月int dateDay = Integer.parseInt(date.substring(8, 10));//日int nowDay = Integer.parseInt(nowDate.substring(8, 10));//當(dāng)前日int dateHour = Integer.parseInt(date.substring(11, 13));//小時(shí)int nowHour = Integer.parseInt(nowDate.substring(11, 13));//當(dāng)前小時(shí)int dateMinute = Integer.parseInt(date.substring(14, 16));//分int nowMinute = Integer.parseInt(nowDate.substring(14, 16));//當(dāng)前分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) + "小時(shí)前";}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.分頁(yè)功能
加載文章列表時(shí)如果查詢出的文章數(shù)大于10，則顯示頁(yè)碼欄；
如果不是第一頁(yè)，則顯示“上一頁(yè)”按鈕；
如果有下一頁(yè)，則顯示“下一頁(yè)”按鈕；如果當(dāng)前頁(yè)大于5則只顯示當(dāng)前頁(yè)前三頁(yè)~當(dāng)前頁(yè)后三頁(yè)，如果首頁(yè)和尾頁(yè)不在此范圍內(nèi)，則顯示首頁(yè)和尾頁(yè)；
如果首頁(yè)和尾頁(yè)與當(dāng)前頁(yè)-3和當(dāng)前頁(yè)+3不連續(xù)時(shí)，則顯示“…”。


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

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

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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。