1. 程式人生 > 其它 >Vue + SpringBoot實現的部落格系統

Vue + SpringBoot實現的部落格系統

效果圖

首頁

登入頁

註冊頁

文章分類-標籤、詳情

文章歸檔

寫文章

文章詳情

評論

技術

前端 blog-app

  • Vue
  • Vue-router
  • Vuex
  • ElementUI
  • mavon-editor
  • lodash
  • axios
  • Webpack

後端 blog-api

  • SpringBoot
  • Shiro
  • Jpa
  • Redis
  • Fastjson
  • Druid
  • MySQL
  • Maven

實現功能

整體

  • 使用者:登入 註冊 退出
  • 首頁:文章列表、最熱標籤、最新文章、最熱文章
  • 文章分類-標籤:列表、詳情
  • 文章歸檔
  • 文章:寫文章、文章詳情
  • 評論:文章新增評論 對評論回覆
  • 文章列表滑動分頁

後端

  • 使用者、文章、文章分類、標籤和評論 增刪改查api介面
  • 基於token許可權控制
  • Redis儲存Session
  • 全域性異常處理
  • 操作日誌記錄

待實現功能

  • 評論的分頁 點贊
  • 留言板
  • 第三方登入
  • ......

執行

將專案clone到本地

方式一 直接執行SpringBoot專案(已將打包的靜態檔案放到了 resources/static下)

  1. 將blog-api匯入到IDE工具中
  2. resources/sql/blog-schema.sql、blog-data.sql匯入MySQL資料庫
  3. 開啟Redis資料庫
  4. resources/application.properties 修改MySQL、Redis連線
  5. Runas執行,訪問:http://localhost:8888

方式二 前後分離(開發方式)

  1. 按方式一執行blog-api,提供api資料介面

  2. 開啟命令列

    cd blog-app

    npm install

    npm run dev

  3. 訪問:http://localhost:8080

  4. 修改blog-app/src 下的檔案進行開發

  5. npm run build 生成最終靜態檔案

獲取方式: 關注公眾號:知識追尋者: 回覆 blog98