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