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 [e-mail]: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頁