react+express+mongodb搭建我的博客

這是本人用React+Express+mongodb搭建的一個簡易博客系統，包括前端展現和後臺管理界面。查看源碼歡迎訪問個人github

如下是參考個人源碼後的操做

技術架構

前端

• 基礎：HTML+CSS+JS+JQuery（使用的ajax交互，後期會考慮用fetch）
• 框架：React+React-Router
• 語法：ES6
• 構建工具：Webpack

後臺

• Node+Express搭建

數據庫

• MongoDB數據庫

項目運行

安裝

• 安裝好node環境
• 安裝好mongodb
• 可安裝一個mongodb可視化工具（Robo 3T）
• 把倉庫克隆到本地

git clone git@github.com:wlfsmile/myBlog.git

• 安裝配置環境

cd myBlog
    npm i或者(cnpm,下同)

• 全局安裝webpack

npm i -g webpack

• 安裝nodemon，讓node自動重啓

npm install -g nodemon

使用

• 操做mongodb
  • 新建一個database，命名爲blog
  • （可選）新建兩個collection，爲articles和comments，可本身先錄入數據，也能夠直接到後臺管理界面去輸入存入數據
• 運行mongodb

mongod --dbpath d:/mongodb/data(這是你mongodb的安裝路徑，我是裝在d盤根目錄下，因此路徑爲這個)

• webpack編譯打包,使用--watch能夠讓webpack自動從新構建

webpack --watch

• 運行服務器

nodemon app.js

訪問

在瀏覽器的url欄中訪問localhost:8000便可

目錄結構

• client/static: 全部靜態頁資源
  • be(fe): 後臺管理(前端)展現頁面
    • assets：頁面全部的靜態資源（css/images之類）
    • component：react組件
    • views：後臺管理（前端）react入口文件
    • index.html：react的根頁面
  • build：webpack編譯構建生成的文件
  • images：webpack生成的圖片
  • views：error文件
• server：後臺文件夾
  • dbbase：數據文件
  • routes：全部路由
  • .babelrc：es6轉碼使用文件
  • app.js：node入口文件
  • package.json：配置環境文件
  • webpack.config.js：webpack配置文件

項目功能(持續更新)

前端展現

• 首頁
• 博客列表頁
• 文章詳情頁
• 評論
• about頁

後臺管理

• 新建文章頁（實現提交markdown格式）
• 更新/刪除文章
• 編輯about頁