1. 程式人生 > >如何只用5分鐘完成資料 列表、建立頁面

如何只用5分鐘完成資料 列表、建立頁面

# 前言 我們當然希望能夠更快的完成我們的工作,這樣我們才能有更多的時間做其他的事情,比如說測試、學習、放鬆。 # 背景 軟體一般也就這麼幾個方面的工作要做,增、刪、改、查。如果歸結到頁面上來說,那麼無非也就這麼幾個頁面Form頁面(增)、列表頁面(查、刪)、編輯頁面(改)。很大程度上,你的專案就是由不同的實體的這麼幾個頁面組裝起來的。既然他們都是這麼幾個頁面,那麼,我們是不是可以考慮針對這幾個頁面進行抽象呢?然後使用資料描述這幾個頁面的行為。 # 效果 經典倒敘,先上效果圖 ## 列表頁面 ![](https://user-gold-cdn.xitu.io/2020/6/18/172c8095099259ca?w=837&h=1079&f=png&s=51171) ## 建立頁面 ![](https://user-gold-cdn.xitu.io/2020/6/18/172c809aa268db38?w=837&h=1079&f=png&s=49705) 目前就簡單實現了列表頁面和建立頁面。編輯頁面,跟建立頁面太像了。暫時還沒有實現相關內容,不過,這個不是很重要了。 # 實現過程 ## 需求分析 其實,每個頁面都是存在固定的路數的。 比如說: **列表頁面**裡邊主要存在這麼幾個引數:列表名、列表頭上的按鈕、列表的表頭、列表內容、列表每一行中的操作、分頁控制元件。 **表單頁面**列表主要存在這麼幾個引數:表單名、表單內容項。 主要的引數出現的位置都是固定的。但是什麼地方出現什麼內容則是可以變化的,一般情況下,我們都是通過程式碼,一遍一遍的重寫這些頁面,然後來達到不同的應用之間的變化的目的。其實我們是可以通過資料來描述他們的。比如說向下面這樣。 ![](https://user-gold-cdn.xitu.io/2020/6/18/172c815e4ab1c036?w=965&h=376&f=png&s=22372) ### 列表頁面的定義 ![](https://user-gold-cdn.xitu.io/2020/6/18/172c810b3043370b?w=641&h=674&f=png&s=53034) ### Form表單頁面的定義 ![](https://user-gold-cdn.xitu.io/2020/6/18/172c8125777c2370?w=615&h=514&f=png&s=39583) ### 原始資料的定義 ![](https://user-gold-cdn.xitu.io/2020/6/18/172c812c8939a8d0?w=611&h=500&f=png&s=31136) 然後將這些定義好的屬性通過後端渲染到頁面上。 ![](https://user-gold-cdn.xitu.io/2020/6/18/172c8142b2b8731d?w=1549&h=1000&f=png&s=124090) ![](https://user-gold-cdn.xitu.io/2020/6/18/172c81467c7f390b?w=1574&h=779&f=png&s=105091) 就可以達到,前邊展示的這種效果了。 ### 資料儲存 因為資料型別是自定義的,所以資料儲存的欄位也是可以自己隨便預設的。然後系統就可以直接支援這一資料型別。在這個Demo裡邊,我是簡單粗暴的使用了檔案儲存Json檔案的方式來進行儲存的資料。 ![](https://user-gold-cdn.xitu.io/2020/6/18/172c819a46214611?w=988&h=338&f=png&s=15960) 其實應該連結資料庫的。不過我在Demo專案裡邊留下了相關的介面,只要再實現一個數據庫版本的例項就可以無縫對接了。 ![](https://user-gold-cdn.xitu.io/2020/6/18/172c81a946b91e01?w=406&h=459&f=png&s=23967) ### 其實 當然了這只是他的最初級的形態,因為現在寫的配置檔案都是通過手寫來實現,將來可以做一個編輯器。並且可以實時看到調整過的效果。 其實這個做法,是來源於PaaS專案中的一個很小很小的功能塊。真正的PaaS專案這一整套東西都是在線上直接編輯看效果的。 # 最後 ## 系列 這個專案將來會融入到我寫的PaaS Demo中作為前端展示部分。 系列的目錄在 https://juejin.im/post/5eca2a186fb9a047e96b2884 這個部分會一點點完善。 ## 開源 雖然東西不大,但是還是希望能給你一點點啟發。 專案地址 https://gitee.com/anxin1225/Dov.GenericWeb ## 簡單的體驗 部署到雲端了,可以簡單體驗一下。 http://gw.ash50p.com/Generic/Meeting.Record/List 轉載莫忘原文地址:https://juejin.im/post/5eeb85b8e51d4574