資訊專欄INFORMATION COLUMN
摘要：后端主要使用的框架，數(shù)據(jù)庫采用。后臺管理登錄采用與后端進(jìn)行登陸狀態(tài)的確認(rèn)。本文首發(fā)于小站，這是一個積累和分享知識的個人博客
這篇文章擱置了很長時間，最終決定還是把它寫出來，給剛開始學(xué)習(xí)vue并且想用vue寫個人博客的同學(xué)一個參考。因為當(dāng)初我也是參考了其他人分享的知識，從一個vue小白變成了一個入門級選手，并最終完成了這個個人博客的搭建工作，代碼已托管在Github-justJokee。線上訪問請戳mapblog小站，所以現(xiàn)在有必要分享一下這個博客所用到的相關(guān)技術(shù)及實現(xiàn)的功能，希望能幫助有需要的同學(xué)^_^。
博客前臺采用vue-ssr進(jìn)行服務(wù)端渲染（解決vue前端渲染的seo問題），后臺管理采用vue進(jìn)行傳統(tǒng)前端渲染。服務(wù)端渲染可參考博客前臺代碼front，前臺渲染可參考博客的后臺管理代碼admin。后端主要使用nodejs的框架express，數(shù)據(jù)庫采用mongodb。后臺管理登錄采用jsonwebtoken與后端進(jìn)行登陸狀態(tài)的確認(rèn)。空間買的騰訊云，1M網(wǎng)速，學(xué)生套餐雖然便宜點，龜速也是夠傷的。整站主要采用的技術(shù)棧如下所示：
前端：
vue、vue-ssr
vue-router
vuex
vue-meta
axios
webpack
后端：
nodejs
express
mongodb
mongoose
jsonwebtoken
pm2
webpack
項目的主目錄：
│ .gitignore │ README.md │ ├─admin 后臺管理（前臺渲染） └─front 前臺頁面（vue-ssr服務(wù)端渲染）
主目錄說明：
front 下所起的express服務(wù)是整個站點的服務(wù)器，負(fù)責(zé)前后臺的數(shù)據(jù)交互、前臺頁面直出等。當(dāng)然它也負(fù)責(zé)前臺的開發(fā)模式熱更新，通過NODE_ENV控制
admin 下所起的服務(wù)僅供開發(fā)時的熱更新和http請求轉(zhuǎn)發(fā),數(shù)據(jù)交互依靠上面所說的的front下所起的express服務(wù)器
博客前臺主要實現(xiàn)功能：
全局響應(yīng)式
文章
按標(biāo)簽分類展示（大于10篇分頁）
按時間歸檔（大于10篇分頁）
第三方分享
評論
站內(nèi)搜索（大于10篇分頁）
留言（大于10條分頁）
所有標(biāo)簽展示
推薦閱讀瀏覽量前五的文章
支持QQ、Github第三方登錄
博客的后臺管理主要實現(xiàn)功能：
全局響應(yīng)式
站內(nèi)文章搜索
關(guān)鍵字搜索
時間范圍搜索
已發(fā)表文章管理
顯示所有文章
按標(biāo)簽分類展示
實現(xiàn)刪除、修改、預(yù)覽功能
草稿箱
實現(xiàn)刪除、修改、預(yù)覽功能
留言管理
實現(xiàn)預(yù)覽、刪除留言功能
管理員回復(fù)
評論管理
實現(xiàn)預(yù)覽、刪除評論功能
管理員回復(fù)
新消息
對訪客的評論、留言、贊的文章以及訪問的哪一篇文章進(jìn)行收集分類展示
文本編輯器 ---Ueditor
文章發(fā)表、修改
賬戶設(shè)置
密碼修改
數(shù)據(jù)庫備份及下載備份文件到本地
退出管理系統(tǒng)
文章、評論、留言的數(shù)量大于10時分頁顯示
后臺管理界面相關(guān)截圖：
相關(guān)參考：
vue-ssr官方文檔
基于vue-ssr服務(wù)端渲染入門詳解
Vue2 SSR 的優(yōu)化之旅
emoji
nodejs-ueditor插件
...
特此向以上作者們的無私分享精神致謝。
本文首發(fā)于mapblog小站，這是一個積累和分享web知識的個人博客
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/19264.html
摘要：但在前幾天偶然看到一篇講解圣杯布局的博客中，有同學(xué)對左側(cè)定寬盒子設(shè)置存在疑惑，大致是不清楚為什么這樣設(shè)置就會使盒子爬升到盒子的左側(cè)，想了一下，還是把自己的理解記錄下來，希望能幫到在此處有疑惑的同學(xué)，文中如有謬誤，歡迎指出。 圣杯布局算是一個古老的話題了，關(guān)于其來源網(wǎng)上資料眾多，在此不多做表述。但在前幾天偶然看到一篇講解圣杯布局的博客中，有同學(xué)對左側(cè)定寬盒子設(shè)置 margin-left:...
摘要：但在前幾天偶然看到一篇講解圣杯布局的博客中，有同學(xué)對左側(cè)定寬盒子設(shè)置存在疑惑，大致是不清楚為什么這樣設(shè)置就會使盒子爬升到盒子的左側(cè)，想了一下，還是把自己的理解記錄下來，希望能幫到在此處有疑惑的同學(xué)，文中如有謬誤，歡迎指出。 圣杯布局算是一個古老的話題了，關(guān)于其來源網(wǎng)上資料眾多，在此不多做表述。但在前幾天偶然看到一篇講解圣杯布局的博客中，有同學(xué)對左側(cè)定寬盒子設(shè)置 margin-left:...
摘要：那個月就是對著和的文檔寫出來了網(wǎng)站的前后端，也是第一次買服務(wù)器備案網(wǎng)站做反向代理讀文檔學(xué)做，懷念那些時光，讓現(xiàn)在的網(wǎng)站有了基礎(chǔ)。因此，管理系統(tǒng)聽歌臺被抽離成了單獨的應(yīng)用，后臺利用做反向代理，用二級域名記性訪問。 不知道你是否也有想過完全用自己的代碼實現(xiàn)自己的個人博客？定制專屬 UI、定制專屬邏輯、在信息爆炸的時代真正地沉淀下屬于自己的東西。我也曾經(jīng)歷了同樣的糾結(jié)，最終下定決心做了自己的...
摘要：既然學(xué)習(xí)了怎么能沒有自己的一個小站呢沒有自己精心打造的一個小站怎么敢說自己學(xué)習(xí)過呢說的再多不如直接干，我的個人網(wǎng)站也已經(jīng)部署上線。 既然學(xué)習(xí)了Python Web怎么能沒有自己的一個小站呢？沒有自己精心打造的一個小站怎么敢說自己學(xué)習(xí)過 Python Web呢？說的再多不如直接干，我的個人網(wǎng)站也已經(jīng)部署上線。Django后臺 + Wordpress主題，只要自己看上的主題都可以讓它變成自...
閱讀 3183·2021-11-23 09:51
閱讀 695·2021-10-14 09:43
閱讀 3222·2021-09-06 15:00
閱讀 2416·2019-08-30 15:54
閱讀 2572·2019-08-30 13:58
閱讀 1861·2019-08-29 13:18
閱讀 1390·2019-08-27 10:58
閱讀 526·2019-08-27 10:53
