開源element + koa2 + mysql 設計的我的博客

前言

爲了方便記錄、查找文章，鑑於有道雲使用的時候，感受不是很方便，故寫了改博客進行自定義管理、記錄一些平時的成長。和你們一塊兒學習共享html

博客介紹

先後臺分離式開發（包含博客的後臺管理系統），筆者司職主要仍是前端。
具有了代碼高亮、權限管理、第三方 github 登陸、評論與通知、以及郵件通知功能的我的博客...
具有文件導入導出功能，假如你以前用 hexo 博客, 那麼你能夠直接經過導入 md 文件遷移你的文章。

預覽地址: 江品一派的博客
如未能正常訪問，請聯繫我 QQ:2869659022

實現功能

前臺：主頁 + 列表頁 + 搜索頁 + 分類頁 + 標籤頁 + 目錄結構樹
後臺：文章管理 + 用戶管理 + 文章樹結構管理
文章錨點導航、回到頂部、markdown 代碼高亮
用戶：站內用戶、github 第三方受權登陸的用戶（因爲沒有固定IP，第三方未驗證）
用戶能夠評論與回覆、以及郵件通知回覆的狀態
md 文件導入導出功能！能夠直接上傳 md 文件生成文章

技術棧

前端
- Element
- Vue + Vuex
- axios
- marked + higlight.js
後端
- koa2
- sequelize + mysql
- jwt + bcrypt
- nodemailer
- koa-send

項目結構

目錄結構

.
│
├─config                // 構建配置
├─public                // html 入口
├─scripts               // 項目自動構建腳本
└─server                // 後端
    ├─config            // 項目配置 github、email、database、token-secret 等等
    ├─controllers       // 業務控制層
    ├─middlewares       // 中間件
    ├─models            // 數據庫模型
    ├─output            // 導出文件包位置
    ├─router            // 路由
    ├─utils             // 工具包
    ├─app.js            // 後端主入口文件
    ├─initData.js       // 初始化基礎數據腳本
    └─...
│
└─src                   // 前端項目源碼
   ├─assets             // 靜態文件
   ├─components         // 公用組件
   ├─layout             // 頁面佈局組件
   ├─plugins            // 插件庫
   ├─router             // 路由
   ├─store              // vuex
   ├─utils              // 工具包
   ├─views              // 視圖層
   ├─  App.vue          // 掛載主頁面
   ├─  main.js          // 入口文件
   └─...
複製代碼

數據庫模型

使用這個項目

git clone https://github.com/weiriver/vue-blog.git

## 安裝依賴以及開啓開發模式
cd vue-blog
cnpm i 
npm run serve

## 安裝依賴以及開啓開發模式 注意必須先配置好數據庫、我的github帳戶登陸名，配置文件在 server/config/index.js

## 數據庫字符集爲 utf8mb4 排序規則 utf8mb4_general_ci
cd server
cnpm i
npm runn dev

## 打包前端
cd vue-blog
npm run build

## 後端筆者則是採用pm2
cd server
pm2 start app.js

複製代碼

項目地址

github源碼地址前端

表結構

總結

該博客斷斷續續寫了一段時間，參考了網上各位大神的傑做，本着學習代碼的同時，構建起本身的專屬博客，記錄本身的學習過程。其中還有不少細節的地方沒作到位，但整體已經知足使用，歡迎你們指導。感謝郭大大的博客，主要功能參考他的技術方案，在他的基礎上，增長了本身喜歡的東西，如文章的結構目錄，方便直觀分類。vue