從數據庫到前端，使用 enum 代替 constant number

在我經歷過的幾個以node爲主的後端項目中，都有一個文件 constant.js。顧名思義，裏邊保存着各類常量，而大可能是字符串與數字的對應關係。

可是在實際工做中，根據數字來調試至關費勁，先不說後端代碼中 where (status === 1) 這種可避免的神奇操做。(PS: 雖然我在吐槽它，可是有時我也會犯，給後來不熟悉業務者一臉懵逼...)。在數據庫中查詢也會遇到一些問題。

記得在咱們數據庫中，有一個用戶表，其中一個字段 user_type 中 1和2表明學生和老師，剛開始還能夠輕易分清，後來文檔對列的註釋給搞反了，自此每次查詢以前我都須要先查一遍數據庫的註釋，試想一下若是此時它是一個 enum('STUDENT', 'TEACHER') 的值，則能夠輕易分清了，不須要再記各類數字了

如下以一個 TODO 的三種狀態 TODO，DONE 以及 DOING 來描述下數據庫，後端和前端如何傳輸以及展現

本文地址 shanyue.tech/post/consta…

使用數字

在數據庫中使用數字來表示狀態，有多是 Base 1 的 123，也有多是 Base 0 的 012。不過最重要的是要記得在數據庫中對列添加註釋

-- mysql 能夠直接註釋
create table todo (
  status smallint default 1 comment "1: TODO, 2: DOING, 3: DONE";
)

-- postgres 在 comment 中進行註釋
create table todo (
  status smallint default 1;
)
comment on column todo.status is '1: TODO, 2: DOING, 3: DONE';
複製代碼

在後端爲了篩選條件下避免如下狀況的出現，須要維護一個 constant 的變量

const where = {
  // 爲了不直接出現 1
  Status: 1
}
複製代碼

使用 Status 來維護一個常量，response 表明返給前端的數據

const Status = {
  TODO: 1,
  DOING: 2,
  DONE: 3
}

const where = {
  Status: Status.TODO
}

const response = [{
  status: Status.TODO
}]
複製代碼

在前端維護一個數字至中文展現的映射

const status_show = {
  1: '待辦',
  2: '進行中',
  3: '已完成'
}

const url = '/api/todos?status=1'
複製代碼

但在這種狀況下，在進行接口聯調時仍會是 1/2/3，不便於調試

使用 enum

在 postgres 中添加 todos_status 的 type

create type todo_status as enum ('UNDO', 'DOING', 'DONE');

create table todo (
  status todo_status default 'UNDO',
);
複製代碼

在後端能夠直接在篩選條件中使用字符串

const where = {
  Status: 'TODO'
}
複製代碼

若是爲了不使用字符串打錯了字符，可使用 typescript 的 const enum 在編譯器發現問題

const enum Status {
    TODO = 'TODO',
    DOING = 'DOING',
    DONE = 'DONE'
}

const where = {
  Status: Status.TODO
}
複製代碼

編譯以後的 javascript 代碼以下

var where = {
    Status: "TODO" /* TODO */
};
複製代碼

在前端維護一個常量至中文展現的映射，能夠看出請求的 url 對於調試與可讀性已經很友好了

const status_show = {
  TODO: '待辦',
  DOING: '進行中',
  DONE: '已完成'
}

const url = '/api/todos?status=TODO'
複製代碼

使用 graphql

數據庫依然使用 enum 來表示 TODO 的狀態

在 graphql 中，使用如下 Schema 表示 TODO，TodoStatus 以及查詢列表的 query。TodoStatus 可使用 enum 來表示

enum TodoStatus {
  DONE 
  DOING
  UNDO
}

type Todo {
  id: ID!
  status: TodoStatus!
}

type Query {
  todos (
    status: TodoStatus
  ): [Poem!]
}
複製代碼

使用如下 query 篩選 todos

query TODOS ($status: TodoStatus) {
  todos (status: $status) {
    id
    status
  }
}
複製代碼