xzzblog

前言

這個專案主要是為了學習而寫的，剛好學習了node，然後就一直想寫個自己的部落格系統，可以更方便記錄自己的學習知識體系。
本專案的前後端程式碼都是放在這個倉庫裡的，後台管理admin，服務端serve，PC 前台web，行動端和小程式前台uniapp。
部署在騰訊學生雲端服務上，大學自學的時候買好幾年了學生雲端伺服器和域名，平時隨便折騰，學習Linux、跑跑腳本、建站、搭博客，特別爽，能自己部署網站對於學習前端興致也更高了。

主要技術堆疊

• 後台管理系統：vue + elementui + vuex + vue-router + mavon-editor
• 服務端：koa + mysql + sequelize + jsonwebtoken
• PC 前台：vue + elementui + vuex + vue-router
• 行動端與小程式：uniapp

影片示範

• b 站影片詳細示範： https://www.bilibili.com/video/BV1Ur4y1v7ko/

專案預覽

• PC 前台： http://blog.jzzz66.cn
• 移動H5：http://mblog.jzzz66.cn
• 微信小程式： 豬豬博客
  

運行環境配置修改

• 建立資料庫myblog 並匯入專案根目錄下的xzzblog.sql
  建議使用軟體Navicat 建立和管理資料庫. 後台初始帳號：admin 後台初始密碼：123456

注意資料庫字元編碼為：utf8mb4 排序規則為：utf8mb4_unicode_ci

• 更改配置xzzblog-serve/config/index.js

 // 发送邮件配置
  NODEMAILER: {
    email: "[email protected]",
    pass: "",
    IMAP: "", // qq邮箱授权码
    POP3: "", // qq邮箱授权码
  },
  // 数据库配置
  MYSQL: {
    HOST: "127.0.0.1", // 数据库地址
    DATABASE: "myblog", // 数据库名
    USER: "root",  // 数据库用户名
    PASSWORD: "123456", // 数据库 密码
  },
  // 阿里云上传图片配置
  oss: {
    region: "oss-cn-guangzhou",
    accessKeyId: "",
    accessKeySecret: "",
    bucket: "",
  },
  // github登录授权配置
  client_secret: "f81479d7b37785afec4072e9783d1337a89e5c79",
  client_id: "280ef327e24a011a6f05",

github OAuth 登入流程

1. 註冊OAuth APP 的應用
2. 儲存client_id client_secret
3. 造訪GET: https://github.com/login/oauth/authorize?client_id=280ef327e24a011a6f05=user
4. 跳到http://localhost:3000/auth?code=8b309c4c403f95 儲存code 字段
5. https://github.com/login/oauth/access_token POST 請求body:{client_id,client_secret,code} 取得token
6. https://api/github.com/user POST 要求： body:{client_id,client_secret} header: {Authorization: token token}

最後說明

• 本專案會持續更新和維護，有問題可隨時聯絡我，喜歡別忘了Star 一下哦，謝謝您的關注。