在B端系統(tǒng)中，列表是一個(gè)非常常用的功能。不論是列表頁的設(shè)計(jì)還是單獨(dú)的列表，都會(huì)涉及到列表的邏輯。這篇文章，我們來梳理一下。

本文所講的B端產(chǎn)品集中在后臺(tái)系統(tǒng)領(lǐng)域，一般后臺(tái)系統(tǒng)的頁面分為表單頁，詳情頁、列表頁、表盤頁面。

• 表單頁：主要用于添加、修改數(shù)據(jù)對(duì)象的操作型頁面，會(huì)包含多個(gè)表單控件的處理
• 詳情頁：用于展示某條數(shù)據(jù)對(duì)象的詳細(xì)內(nèi)容、數(shù)據(jù)的頁面
• 列表頁：用于展示大量同類型的數(shù)據(jù)，包括對(duì)該數(shù)據(jù)的排序、篩選、查看、刪除等
• 表盤頁：用于展示數(shù)據(jù)和圖表等頁面，也叫做儀表盤，即數(shù)據(jù)分析

那么如何設(shè)計(jì)好每一個(gè)列表頁面之間的邏輯呢？

首先要明白當(dāng)前列表主要表達(dá)的內(nèi)容是什么，比如在WMS系統(tǒng)中，有庫存列表、入庫列表、出庫列表、庫位管理列表，根據(jù)名字就可以得知這個(gè)列表所要展示給用戶的內(nèi)容是什么；

其次，需要理清楚每一個(gè)列表之間的關(guān)聯(lián)關(guān)系，比如，入庫列表跟庫存列表之間是以商品為載體，庫存列表的主體是商品，以商品為維度進(jìn)行庫存的統(tǒng)計(jì)，而入庫列表則是以每一條入庫記錄為主體，二者的關(guān)系是一對(duì)多，也可以理解為，入庫列表的主鍵為入庫編號(hào)，庫存列表的主鍵為商品編號(hào)，一對(duì)多的關(guān)系怎么設(shè)計(jì)數(shù)據(jù)庫結(jié)構(gòu)呢？

簡(jiǎn)單來講：

1:1關(guān)系一個(gè)表實(shí)現(xiàn)

1:N關(guān)系需要兩個(gè)表實(shí)現(xiàn)，把1的主鍵放在N的表里作為外鍵

N:N關(guān)系需要三個(gè)表實(shí)現(xiàn)，需要將兩個(gè)表的主鍵組成第三個(gè)表格

舉個(gè)例子：

某自學(xué)考試社會(huì)助學(xué)點(diǎn)有教師若干名，招生人員若干名，學(xué)生若干名。

教師和招生人員的基本屬性為：姓名，性別，職稱。

學(xué)生的基本屬性為：姓名，性別，入學(xué)成績(jī)。

招生人員負(fù)責(zé)招收學(xué)生，記錄招生人數(shù)。

教師負(fù)責(zé)輔導(dǎo)學(xué)生學(xué)習(xí)，依據(jù)其職稱和輔導(dǎo)時(shí)間產(chǎn)生輔導(dǎo)費(fèi)用。

根據(jù)上述信息整理出如下E-R圖，可見招生人員與學(xué)生之間是一對(duì)多的關(guān)系，學(xué)生與教師之間是多對(duì)多的關(guān)系，故招生和學(xué)生之間是兩張表，而學(xué)生和教師之間是三張表，兩部分合在一起，減去學(xué)生重復(fù)的表，總共是四張表。

整理出的四張表格如下，加粗部分為該表格的主鍵和外鍵。

• 招生人員（招生人員姓名，性別，招生人員職稱）
• 教師（教師姓名，性別，教師職稱)
• 學(xué)生（學(xué)生姓名，性別，入學(xué)成績(jī)，招收人員姓名）
• 輔導(dǎo)（教師姓名，學(xué)生姓名，教師職稱，輔導(dǎo)時(shí)間）

建表的結(jié)構(gòu)懂了，下面就是列表數(shù)據(jù)的問題了，我們知道一個(gè)列表頁面展示的數(shù)據(jù)是非常多的，產(chǎn)品設(shè)計(jì)原型的時(shí)候其實(shí)不能太過死板，所以學(xué)了數(shù)據(jù)庫的產(chǎn)品剛開始也會(huì)存在一定的弊端，會(huì)把每一個(gè)列表頁當(dāng)作一張表，其實(shí)不然，列表頁是給用戶看的，用戶想看到什么，我們就給他查詢什么展示出來，所以一個(gè)列表頁面并非就是一張數(shù)據(jù)表，而是技術(shù)人員通過聯(lián)表查詢將多張表格的數(shù)據(jù)查詢出來展示在一張列表頁面，也就是用戶看到的一張張的表格。

清楚表的規(guī)則之后，就能夠很好的理清楚每一個(gè)列表頁面的信息、列表之間的關(guān)聯(lián)關(guān)系，從而更好的跟技術(shù)人員進(jìn)行溝通，雖然產(chǎn)品可以不懂技術(shù)，但是知道一些基礎(chǔ)的技術(shù)知識(shí)，總是對(duì)工作有益，當(dāng)時(shí)，學(xué)會(huì)了一定的技術(shù)知識(shí)，也不能跟產(chǎn)品設(shè)計(jì)的思路混淆。