摘要:前言之前有發(fā)過(guò)這個(gè)項(xiàng)目的文章了,根據(jù)朋友的建議改變了博客的樣式,也增加了一些新功能,下面完整地介紹這個(gè)博客項(xiàng)目。
前言
之前有發(fā)過(guò)這個(gè)項(xiàng)目的文章了,根據(jù)朋友的建議改變了博客的樣式,也增加了一些新功能,下面完整地介紹這個(gè)博客項(xiàng)目。文末附前端實(shí)習(xí)求職簡(jiǎn)歷
項(xiàng)目簡(jiǎn)介簡(jiǎn)要介紹:一個(gè)前后端分離的項(xiàng)目
主要技術(shù)棧:vue全家桶 + node.js + Express + Mongodb
github地址: vue博客內(nèi)容管理系統(tǒng)
項(xiàng)目線上地址: FatDong的博客 --- www.xuhaodong.cn
文章通過(guò)標(biāo)簽分類
存為草稿,草稿和文章可以隨時(shí)切換
文章目錄,與segmentfault生成的目錄效果相似
最近更新,首頁(yè)展示最近更新的三篇文章
搜索文章,輸入標(biāo)題的部分內(nèi)容即可搜索相應(yīng)文章
評(píng)論過(guò)濾評(píng)論,太長(zhǎng)、太短、含QQ群號(hào)的評(píng)論將無(wú)法發(fā)布
郵件通知,如果有人回復(fù)評(píng)論,會(huì)通過(guò)nodemailer來(lái)發(fā)送通知郵件
頭像功能,訪問(wèn)者和站長(zhǎng)分別用不同的頭像來(lái)區(qū)分
點(diǎn)贊功能,點(diǎn)贊情況記錄在瀏覽器的localStorage里,下次訪問(wèn)會(huì)還原點(diǎn)贊情況
防止重名,同一篇文章中不會(huì)出現(xiàn)評(píng)論者重名的情況,當(dāng)然同一個(gè)人可以多次評(píng)論
排序評(píng)論,排序依據(jù):最新、最早、最熱
用localStorage記錄郵箱和昵稱,下次訪問(wèn)不用重新輸入
markdown編輯器(marked)
過(guò)濾標(biāo)簽
去除首尾空格
輸入相同的標(biāo)簽將彈出模態(tài)框警告并自動(dòng)刪除,使用數(shù)據(jù)驅(qū)動(dòng)視圖更新的思想將所有標(biāo)簽放在一個(gè)數(shù)組,添加和刪除標(biāo)簽都是對(duì)數(shù)組進(jìn)行操作
自定義快捷鍵
切換預(yù)覽模式
代碼高亮顯示,使用hightlight.js進(jìn)行代碼高亮顯示
提醒保存,沒(méi)有保存就離開(kāi)頁(yè)面前會(huì)彈出模態(tài)框確認(rèn)
賬戶
權(quán)限驗(yàn)證
前臺(tái)使用vue-router的beforeEach進(jìn)行驗(yàn)證
后臺(tái)使用jwt實(shí)現(xiàn)基于token的身份驗(yàn)證
修改賬號(hào)和密碼
密碼加密,使用sha1加密算法,用csprng生成的隨機(jī)鹽
頁(yè)面特效
canvas粒子效果(移動(dòng)端取消)
鼠標(biāo)追隨粒子效果
單擊取消展示粒子效果,重新點(diǎn)擊隨機(jī)切換粒子效果的顏色
鼠標(biāo)離開(kāi)頁(yè)面后,粒子效果開(kāi)始規(guī)則運(yùn)動(dòng)
平滑回到頂部
點(diǎn)擊文章段落標(biāo)題,平滑滾動(dòng)到錨點(diǎn)
向下滾動(dòng)時(shí),動(dòng)態(tài)展示dom節(jié)點(diǎn)
底部自動(dòng)加載loading
網(wǎng)站頂部圖片改變景深
其他功能適配移動(dòng)端。使用flex布局、rem以及百分比布局去適配移動(dòng)端,實(shí)現(xiàn)響應(yīng)式布局
下面是移動(dòng)端的演示
添加SSL證書,使用更為安全的https協(xié)議
使用nginx進(jìn)行反向代理
服務(wù)器使用linux系統(tǒng),學(xué)習(xí)了一些linux的知識(shí)
收獲更加了解一個(gè)項(xiàng)目從前端到后端的流程,可以更好地和后端人員對(duì)接
可以加深對(duì)webpack、Vue、vuex、vue-router、vue-resource的使用
最后最近在找前端暑假實(shí)習(xí),這是我的在線簡(jiǎn)歷 --- job.xuhaodong.cn,謝謝?
本文已同步到我的博客www.xuhaodong.cn
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://systransis.cn/yun/19002.html
摘要:前言之前有發(fā)過(guò)這個(gè)項(xiàng)目的文章了,根據(jù)朋友的建議改變了博客的樣式,也增加了一些新功能,下面完整地介紹這個(gè)博客項(xiàng)目。 前言 之前有發(fā)過(guò)這個(gè)項(xiàng)目的文章了,根據(jù)朋友的建議改變了博客的樣式,也增加了一些新功能,下面完整地介紹這個(gè)博客項(xiàng)目。文末附前端實(shí)習(xí)求職簡(jiǎn)歷 項(xiàng)目簡(jiǎn)介 簡(jiǎn)要介紹:一個(gè)前后端分離的項(xiàng)目主要技術(shù)棧:vue全家桶 + node.js + Express + Mongodbgithub...
摘要:采用快速掌握核心知識(shí)解決實(shí)際問(wèn)題中補(bǔ)充的方式。讓每一行代碼都能給自己帶來(lái)價(jià)值,才是每個(gè)碼農(nóng)應(yīng)該有的思維,而不是成為一個(gè)職業(yè)碼農(nóng)。不過(guò)做個(gè)人博客有一個(gè)重要的價(jià)值便是在你做成之后可以部署上線讓它成為自己在互聯(lián)網(wǎng)的基地。 勤學(xué)似春起之苗,不見(jiàn)其增,而日有所長(zhǎng) 如果你一直想學(xué)python,但是不知道從何入手,那么就不要猶豫了。這篇文章就是我的python新實(shí)戰(zhàn)計(jì)劃可能適合你。 學(xué)習(xí) Pytho...
摘要:搭建個(gè)人博客很久以來(lái)就特別想搭建一個(gè),但是都是由于技術(shù)原因沒(méi)有搭建起來(lái)。學(xué)習(xí),并對(duì)代碼進(jìn)行重構(gòu)。因?yàn)檎麄€(gè)博客要完整的從項(xiàng)目構(gòu)建到項(xiàng)目上線的確比較繁瑣,這里只是給想要試試與一個(gè)代碼參考。 vue+koa+mongodb 搭建個(gè)人博客 很久以來(lái)就特別想搭建一個(gè)blog,但是都是由于技術(shù)原因沒(méi)有搭建起來(lái)。以前學(xué)習(xí)github的時(shí)候準(zhǔn)備采用github與hexo來(lái)搭建。但是后來(lái)想了一下自己也在...
摘要:最后感謝各位的觀看如果有什么意見(jiàn)或者建議的話還望多多指教感謝如果感覺(jué)我的博客還過(guò)得去的話還請(qǐng)給個(gè)鼓勵(lì)一下作者嘿嘿。 一直以來(lái)都想用自己的技術(shù)做一些個(gè)人項(xiàng)目, 之前的博客是基于 hexo 搭建, 感覺(jué)啥都是別人幫你寫好了, 于是便決定自己搞一個(gè), 斷斷續(xù)續(xù)地弄了一段時(shí)間, 也總算是完成了個(gè)簡(jiǎn)單版本并部署上線. 博客線上地址 博客地址:cykspace 博客后臺(tái):cykspace-node...
閱讀 3031·2021-11-22 12:06
閱讀 612·2021-09-03 10:29
閱讀 6575·2021-09-02 09:52
閱讀 2027·2019-08-30 15:52
閱讀 3423·2019-08-29 16:39
閱讀 1198·2019-08-29 15:35
閱讀 2072·2019-08-29 15:17
閱讀 1433·2019-08-29 11:17