設計簡單的後台管理的資料排序

2022-03-06 01:42:39 字數 1243 閱讀 7787

前端需要展示乙個列表(如:首頁的輪播圖),後台需要能夠控制列表資料的排序。

自動規則 + 運營干預,干預包括:降低排名,提公升排名,設定位置和新增item

在web後台管理系統中,列表形式的資料排序功能是很常見的需求。要實現這類功能,給資料表增加乙個排序字段order,越大排名越靠前,數字相同時按照自動規則(如:id)排序,這樣,就可以實現了:

idname

order

1tom22

jack33

bob1

實際的排序顯示為:

jack

tombob

既然是後台,那麼主要的使用者是公司的運營人員,本著提高使用效率的原則,在草稿紙上畫了個原型讓運營對比,然後來得出哪個更符合他的使用習慣,再做確定,結果溝通下來運營理想中操作是想要在後台直接拖動排序。

現在問題來了,應該怎麼設計這個運營干預的功能:

方案1的技術實現最簡單,對開發來說最方便,但對運營來說卻比較麻煩。

方案2的技術實現其實較複雜,比如上移一位,需要先查詢當前項的前一項的order, 然後讓當前項的order+1並儲存, 對運營來說操作較簡單。

方案3的技術實現比較簡單,比如點選-10,只需更新當前項的order-10並儲存,但有可能在order-10後當前項的順序還沒有變(如:前一項:12,當前項11,後一項:0),對運營來說操作比較簡單。

方案4的技術實現比較複雜,需要使用js實現拖拽資料項的效果等,在拖動結束或點選儲存後判斷當前的所有資料順序並儲存,對運營來說操作簡單。

綜合比較

技術實現複雜度:方案1《方案3《方案2《方案4

操作便捷性:方案4《方案3《方案2《方案1

分析一下大多數的場景,看到列表的資料是有限的,一般都是5條、10條、20條左右,由於我所在的是創業公司,開發資源有限,選擇方案3在當前情況下是合適的實現方式。

經過了一番溝通,在許諾了下午茶後,說服了產品、運營接收這中方案。

圖中就是我用方案3實現的乙個介面,單個箭頭的是+1 -1,倆個箭頭的分別是+10 -10,分別用於微調和較大位置距離的調整,在管理大多數少量資料列表的場景下對於運營人員是夠用了。

dtree 後台管理例子 產品的後台設計整理與總結

做b端產品有三年吧,最近閒來無事,對於產品的後台設計進行了整理與總結。產品後台就是是對前端資訊頁面的對映,也就是說,前端有什麼展示,我後端就顯示什麼。產品後端是適用於產品的前端,主要的作用就是對前端的資訊管理。產品後台大致上分為兩類 產品後台管理系統和商業系統 bi 產品後台管理系統主要分為四類 1...

後台管理使用者許可權資料庫設計

1.建立基本表 建立user role和module三張表,user中每一行對應乙個使用者資訊,role每一行儲存乙個角色資訊,包括角色id及對應的name,module中的每一行儲存乙個模組資訊,包括模組id及對應的name。建立三張表的sql語句 mysql環境 如下 1 建立user表,表結構...

Mock模擬後台介面資料的簡單使用

在專案開發的過程中,有時候會出現後端資料還沒出來,而前端需要資料的情況。這時候,如果等著後端人員開發完再進行測試,聯調則會拖慢開發進度。這時候,mock就顯示出它的魅力。它可以進行生成隨機資料,模擬後端介面資料,從而實現開發時,前後端分離,提高效率。在使用mock之前,應該先和後端人員討論介面文件的...