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