1. 程式人生 > >使用Vue、React和Koa開發個人部落格

使用Vue、React和Koa開發個人部落格

前言

實習了大半年,又臨近畢業,一直想做一個屬於自己的部落格。於是就用Vue、React和Koa開發了一個服務端渲染的部落格系統。其中:
- 後端管理使用Vue開發
- 前端頁面使用React服務端渲染框架nextjs
- 介面服務使用Koa2 + mongodb + mongoose(使用nodemailer當介面發生500時向我傳送郵件通知)

專案地址是點我訪問專案地址,(不要臉地求star)。為了方便體驗(小弟不才,大佬們輕虐),可以點選訪問後端管理系統,在註冊使用者後,即可登入體驗,同時也可以釋出文章,然後在前端頁面就可以看到釋出的文章。(目前(2018-02-28)未備案,就簡單通過ip訪問即可)

效果預覽

1 後端管理頁面

後端管理頁面使用了vue、vuex、sass以及axios,其中模仿ElementUI的樣式開發了dialogloadingconfirmnotoficationmessgae等等元件,(感覺自己對vue元件的開發姿勢又稍微深入了一點點,畢竟學無止境)。以下為部分頁面截圖:

  • 登入
     登入預覽

  • 個人中心
     個人中心

  • 文章管理
     文章管理

  • 新建文章
     新建文章

  • ECharts結合
     Echart

2 前端頁面渲染

藉此機會想學習一下React,於是前端頁面使用了React服務端渲染框架nextjs,並使用了Reduxaxios以及koa(自定義服務所用)。前端頁面目前比較簡單,主要就是文章的讀取和渲染。以下為截圖:

  • 首頁
     前端首頁

  • 文章詳情
     文章詳情

結束語

這一次開發個人部落格,學習了很多,像是Vue元件開發檔案上傳上傳到七牛雲以及reactredux的使用,再到使用koa2mongodb寫介面,然後再到pm2守護程序和配置nginx等等。總之,學習到了很多,接下來我會整理思路,把這些總結總結分享出來,歡迎指正批評。
Github地址是這個elpase,求start,嘻嘻…