做個開源部落格學習Vite2 + Vue3 （三）部落格設計和程式碼設計

金色海洋（jyk）發表於2021-04-23
ViteVue

專案搭建好了之後是不是可以編碼了呢？
等等不要著急，我們是不是應該先設計一下？比如部落格的功能等？

部落格設計

先做個簡單的個人部落格，因為是個人版，所以可以省略註冊、登入這些功能，表結構也可以簡單一點。
基礎功能：新增博文、顯示博文、博文列表+查詢+分頁、討論列表和新增討論。
雖然功能弱了一點，但是麻雀雖小五臟俱全，vite2 和 vue3 的基礎用法也可以體現一些。

功能設計

001部落格功能

是不是做成圖更明顯一些？

程式碼設計

002程式碼結構.png

model設計

003model設計.png

model程式碼

先來看看 model 的程式碼。
/src/model/blogModel.js

/**
 * 顯示博文用，建表用
 * @returns 博文的全部的屬性
 */
export const blog = () => {
  return {
    // id: 0,
    title: '', // 這是一個部落格標題
    groupId: 0, // 分組ID
    addTime: new Date(), // 新增時間
    introduction: '', // 這是部落格的簡介
    concent: '', // 這是部落格的詳細內容
    state: 1, // 1：草稿；2：釋出；3：刪除
    viewCount: 0, // 瀏覽量
    agreeCount: 0, // 點贊數量
    discussCount: 0 // 討論數量
  }
}

/**
 * 表單用的博文，繫結表單用。
 * * title：文章標題
 * @returns 新增博文需要的屬性
 */
 export const blogForm = () => {
  return {
    // id: new Date().valueOf(),
    title: '', // 這是一個部落格標題
    addTime: new Date(), // 新增時間
    introduction: '', // 這是部落格的簡介
    concent: '', // 這是部落格的詳細內容
    state: 1 // 1：草稿；2：釋出；3：刪除
  }
}

/**
 * 首頁用的博文列表，按需設定欄位
 * @returns 博文列表
 */
 export const blogList = () => {
  return {
    id: 0,
    title: '', // 這是一個部落格標題
    addTime: '', // 新增時間
    introduction: '', // 這是部落格的簡介
    viewCount: 0, // 瀏覽量
    agreeCount: 0, // 點贊數量
    discussCount: 0 // 討論數量
  }
}

/**
 * 編輯博文用的列表
 * @returns 文章標題列表
 */
 export const articleList = () => {
  return {
    id: 0,
    title: '', // 這是一個部落格標題
    addTime: '', // 新增時間
    viewCount: 0, // 瀏覽量
    agreeCount: 0, // 點贊數量
    discussCount: 0 // 討論數量
  }
}

/**
 * 建表用的討論
 * @returns 討論表
 */
 export const discuss = () => { 
  return {
    // id: 0,
    blogId: 0,
    discusser: '' , // 暱稱
    addTime: new Date(), // 時間
    concent: '', // 內容
    agreeCount: 0
  }
}

/**
 * @returns 討論的model
 */
export const discussList = () => { 
  return {
    id: 0,
    discusser: '' , // 暱稱
    addTime: '', // 時間
    concent: '', // 內容
    agreeCount: 0
  }
}

原生js是不需要先定義物件的，只是我感覺把需要的物件放在一起集中管理一下，還是比較方便的，雖然這麼做用處不大，因為不是ts，沒有任何強制性也沒有檢查機制，但是還是想集中管理一下。

狀態設計

004狀態設計.png

狀態嘛，簡單地說就是多個元件共享的資料，當然這麼說不夠嚴謹。

/src/model/blogState.js

import { inject } from "vue"

export const blogState = {
  currentGroupId: 0, // 選擇的分組ID。0：沒選擇
  currentArticleId: 0, // 選擇的文章ID。
  editArticleId: 0, // 當前修改的文章ID
  findQuery: { }, // 查詢條件
  page: { // 分頁引數
    pageTotal: 100,
    pageSize: 2,
    pageIndex: 1,
    orderBy: { id: false }
  }, 
  isReloadDiussList: false
}

/**
* 狀態的管理
* * 獲取狀態
* * 設定當前選擇的分組
* * 設定當前選擇的文章
* * 設定當前編輯的文章
*/
export default function blogStateManage() {
  // 先把狀態取出來，否則在 function 裡面無法讀取。
  const state = inject('blogState')

  // 子元件裡面獲取狀態
  const getBlogState = (id) => {
    return state 
  }

  // 設定當前選擇的分組   
  const setCurrentGroupId = (id) => {
    state.currentGroupId = id
  }

  // 設定當前編輯的文章  
  const setEditArticleId = (id) => {
    state.editArticleId = id
  }

  // 設定更新討論列表
  const setReloadDiussList = () => {
    state.isReloadDiussList = !state.isReloadDiussList
  }

  return {
    setReloadDiussList, // 設定更新討論列表
    getBlogState, // 獲取狀態
    setEditArticleId, // 設定當前編輯的文章
    setCurrentGroupId // 設定當前選擇的分組
  }
}

算是一個簡易的狀態管理吧，先定義一下需要的狀態，在main裡面注入狀態，然後用 inject 提取狀態，再寫幾個設定狀態的函式，基本就可以搞定了。

後續想寫成外掛的形式，當然會完善一些功能，不會這麼單薄。

感覺 Vuex 有點太厚重了，這裡也不需要那麼強大的功能，所以就自己實現了一個簡單的。

未完待續，後面更精彩。

原始碼

https://gitee.com/naturefw/vue3-blog

線上演示

https://naturefw.gitee.io/vue3-blog

相關文章