關(guān)說不練假把式，在上一，二篇中介紹了我心目中的CRUD的樣子

基于之前的理念，我開發(fā)了一個命名為PasteTemplate的項(xiàng)目，這個項(xiàng)目呢后續(xù)會轉(zhuǎn)化成項(xiàng)目模板，轉(zhuǎn)化成項(xiàng)目模板后，后續(xù)需要開發(fā)新的項(xiàng)目就可以基于這個模板創(chuàng)建，這樣就不要copy一個舊的項(xiàng)目，然后刪刪刪，改改改，重命名等操作了
強(qiáng)迫癥，一個項(xiàng)目的名字就得統(tǒng)一，心里才舒服
那么本次作者就帶來了實(shí)物，本次主要介紹管理端的內(nèi)容，我們一起來看看

這個是后臺，目前使用的是HTML原生寫的，如果說使用VUE的話，會更簡單，這個后續(xù)看情況推出！
先用原生的原因呢，一是順手，二是前期是規(guī)劃期，改動比較多，這個項(xiàng)目開發(fā)過程我是錄制了視頻的，后續(xù)會和項(xiàng)目模板一并放出來!

這個管理端有多少代碼?

可能說代碼量不太合適，我就列出下各個文件的大概情況(文件采用松散編輯模式，就是一個花括號就一行的寫法，所以不存在刻意壓縮代碼行的問題哈！)

文件	大小	行數(shù)	說明
login/index.html	8KB	177	登陸頁面，賬號密碼驗(yàn)證碼登陸
login.less	9KB	381	登陸頁面的樣式文件
pasteform/index.html	12KB	212	表格列表頁面的主UI頁面
pasteform/index.js	22KB	682	表格頁面的主邏輯JS頁面
pasteform/index.less	14KB	656	表格頁面的樣式文件
pasteform/view.html	12KB	184	表單新增編輯頁面的UI文件
pasteform/view.js	27KB	820	表單新增編輯頁面的邏輯JS代碼
pasteform/view.less	10KB	499	表單編輯新增頁的樣式文件
index.html	11KB	225	首頁，也就是菜單頁面，上圖的這個主頁面，菜單采用API獲取的動態(tài)方式
index.less	5KB	311	首頁的樣式文件
lib/api.js	18KB	598	ajax請求,一些基礎(chǔ)函數(shù)的轉(zhuǎn)化等,相當(dāng)于幫助類

還有一些其他的三方組件，比如jquery.js,layer.js,daterange.js,pagenum.js,datepicker.js,template.js,wangedit.js等

為啥才這么幾個文件?

看上圖至少有4個表為啥才這么幾個文件？
文件復(fù)用了
比如權(quán)限的列表頁面為pasteform/index.html?path=roleInfo,而用戶的列表頁面為pasteform/index.html?path=userInfo
對應(yīng)的表單頁面為pasteform/view.html?path=roleInfo和pasteform/view.html?path=userInfo

實(shí)現(xiàn)原理

在執(zhí)行UI之前，獲取對應(yīng)的模型的模型內(nèi)容，比如新增的時(shí)候，獲取對應(yīng)的AddDto模型的模型屬性，包括不限于，包含了哪些屬性(是否禁用add,edit,del等)，有哪些字段，字段的特性是哪些，還有就是字段的默認(rèn)值！
同理在編輯的時(shí)候,會把要編輯的主鍵帶入API中，先查詢這個UpdateDto的模型數(shù)據(jù)，然后基于ID獲取這個模型的值，組合后返回給前端
至于表格,請求的時(shí)候要讀取ListDto和對應(yīng)的搜索InputQueryDto的內(nèi)容！

表格頁面功能介紹

從上圖中可以看到大概幾個要點(diǎn)！
1.左側(cè)的菜單是采用動態(tài)模式的，看圖的中間部分的菜單類型可以看到和左側(cè)的一一對應(yīng)！
2.右側(cè)區(qū)域的功能都是動態(tài)的，貌似除了關(guān)鍵字輸入和搜索按鈕是固定的，其他都是動態(tài)控制的
3.搜索區(qū)域的內(nèi)容和類型由后端的InputQueryXXX的模型來控制
4.新增，編輯和刪除按鈕由對應(yīng)模型的ListDto控制
5.列表中支持排序，比如上圖的ID，排序，層級等
6.列表中支持直接顯示外表的對應(yīng)字段，比如父級ID那一列，直接顯示了父級ID對應(yīng)的權(quán)限的名稱
7.支持狀態(tài)快編，也就如上圖的switch,這個是可以交互的！

外表輸入

支持外表輸入，比如要查詢某一個角色有多少用戶，那么用戶列表中，角色I(xiàn)D作為篩選，那角色I(xiàn)D不能自己手動輸入吧
點(diǎn)擊后，會彈出角色列表頁面，選擇要查詢的，然后點(diǎn)擊確定，就會把對應(yīng)的值輸入到輸入框中(顯示的是友好名)

在Model中是這樣配置外表選擇的

時(shí)間區(qū)間

有些時(shí)候需要查詢時(shí)間區(qū)間，比如本月新增的用戶有多少

在Model中，時(shí)間區(qū)間其實(shí)是由2個字段表示的，開始字段和結(jié)束字段，當(dāng)然了結(jié)束字段需要配置隱藏，如下圖

單選

有時(shí)候查詢需要選擇某一個狀態(tài)，比如查詢禁用的用戶有多少，查詢狀態(tài)正常的用戶有多少(也就是一個select的選項(xiàng))

在Model中體現(xiàn)為：

表單頁面功能介紹

表單頁面也就是新增數(shù)據(jù)，或者編輯，如下

基本輸入

一些比如文本，文本域，數(shù)字,開關(guān)等的輸入，和基本的一致,約定輸入框的名稱為Model對應(yīng)字段的注釋部分的前部分，后部分則為placeholder,前后部分使用空格隔開！

頭像圖片

不單單支持單圖，還支持多圖模式！

富文本模式

系統(tǒng)采用的是wangEdit v5的版本

時(shí)間模式

時(shí)間上支持單時(shí)間和時(shí)間區(qū)間模式

單選模式

單選有一個問題，就是選項(xiàng)是固定的，也就是要預(yù)先寫好，如果是動態(tài)的，則使用外表的模式

外表單選

點(diǎn)擊和表格那邊的操作模式是一樣的

要實(shí)現(xiàn)這些功能，只需要在對應(yīng)的Model做屬性的標(biāo)記即可，如下

    ///<summary>///測試表 用于測試CURD的表///</summary>public class TestTableAddDto{///<summary>///姓名 模擬短文本輸入///</summary>[MaxLength(32)][Required]public string Name { get; set; }///<summary>///頭像 模擬圖片上傳///</summary>[MaxLength(128)][ColumnDataType("image","1","head","60*60")]public string Head { get; set; }///<summary>///年齡 模擬輸入number///</summary>[Range(5, 90, ErrorMessage = "年齡必須限定在5~90之間!")]public int Age { get; set; }///<summary>///文本區(qū)域 模擬文本區(qū)域的輸入///</summary>[MaxLength(128)]public string Desc { get; set; }///<summary>///富文本 模擬富文本，前端HTML的是使用wangEditv5///</summary>public string Blog { get; set; }///<summary>///加入日期 模擬必填時(shí)間的輸入///</summary>public DateTime JoinDate { get; set; }///<summary>///單選 一般表示狀態(tài)，內(nèi)定的，有點(diǎn)像Enum,關(guān)于Enum后續(xù)會支持///</summary>[ColumnDataType("select", "[{\"name\":\"日類型\",\"value\":0},{\"name\":\"月類型\",\"value\":1},{\"name\":\"年類型\",\"value\":2}]")]public int DateType { get; set; }///<summary>///角色I(xiàn)D 這里一般用于外表，就是選擇其他表的一個數(shù)據(jù)作為輸入內(nèi)容///</summary>[ColumnDataType("outer", "gradeInfo", "", "id", "name")]public int GradeId { get; set; }///<summary>///成績 模擬前端限定2位小數(shù)///</summary>public double Score { get; set; }/// <summary>/// 會員周期 會員生效區(qū)間/// </summary>[ColumnDataType("daterange","dateStart","dateEnd")]public DateTime DateStart { get; set; }/// <summary>/// 會員周期 會員生效區(qū)間/// </summary>[ColumnDataType("hidden")]public DateTime DateEnd { get; set; }}

至于編輯模式，其實(shí)編輯模式和新增模式的字段屬性標(biāo)記同樣適用！
在編輯模式中有一個特別的，就是外表顯示，比如上面的外表選擇中的選擇父級，則在編輯中是這樣的

補(bǔ)充

對于上面其實(shí)比較糾結(jié)的地方應(yīng)該就是字段的特性ColumnDataType

image

相對于后面的 head 來說，這里是大圖模式,在ListDto中表示使用圖片的模式渲染

字段	類型	示例	說明
args1	數(shù)字	1	圖片數(shù)量
args2	字符	cate	存放在什么位置，上傳圖片的時(shí)候會附帶到參數(shù)type中
args3	字符	60*60	圖片是否需要壓縮，壓縮的寬高，不壓縮的設(shè)置為0,比如60*0
args4	字符	arr或str	默認(rèn)值str對應(yīng)字段的類型，是array類型還是string類型，如果是string類型多個之間用,隔開

head

使用方式同 image 這里表示的是小圖標(biāo)模式

字段	類型	示例	說明
args1	數(shù)字	1	圖片數(shù)量
args2	字符	cate	存放在什么位置，上傳圖片的時(shí)候會附帶到參數(shù)type中
args3	字符	60*60	圖片是否需要壓縮，壓縮的寬高，不壓縮的設(shè)置為0,比如60*0
args4	字符	arr或str	默認(rèn)值str對應(yīng)字段的類型，是array類型還是string類型，如果是string類型多個之間用,隔開

region

小程序中的地區(qū)選擇，可以配置精確度，到區(qū)還是到縣

字段	類型	示例	說明
args1	字符	region	表示地址選擇的層級，可選region和sub-district
args2	字符	str	可用值str或者arr 表示返回的數(shù)據(jù)類型,str的時(shí)候用,隔開

outer

表示一個值需要從外表獲取，編輯的時(shí)候如何顯示? 比如fatherId,extendRole

字段	類型	示例	說明
args1	字符	cateInfo	外表的名稱，對應(yīng)模板的path,或者路徑，路徑一定附帶了/字符示例./abc.html
args2	字符	extendCates	表示顯示的數(shù)據(jù)，需要和下面2個配合，是一個當(dāng)前的擴(kuò)展，目標(biāo)數(shù)組要配置hidden
args3	字符	id	獲取返回對象的屬性，一般為id
args4	字符	name	id的友好名稱顯示,這里指的是外表，比如cateId，需要打開catelist頁面，選擇后，返回cate,則name作為友好顯示,id作為實(shí)際值

outers

outer的復(fù)數(shù)版本，表示可以從外部列表中選擇多個，比如在創(chuàng)建賬號的時(shí)候給他綁定多個角色，就用這個！

字段	類型	示例	說明
args1	字符	cateInfo	外表的名稱，對應(yīng)模板的path,或者路徑，路徑一定附帶了/字符示例./abc.html
args2	字符	extendCates	表示顯示的數(shù)據(jù)，需要和下面2個配合，是一個數(shù)組，目標(biāo)數(shù)組要配置hidden
args3	字符	id	獲取返回對象的屬性，一般為id
args4	字符	name	id的友好名稱顯示,這里指的是外表，比如cateId，需要打開catelist頁面，選擇后，返回cate,則name作為友好顯示,id作為實(shí)際值

outerdisplay

ListDto中用于外表的顯示，比如有字段cateInfoId,對應(yīng)的ExtendCateInfo要標(biāo)記為outerdisplay,args2配置為extendCateInfo?.name || ‘’,否則會顯示為[object object]

字段	類型	示例	說明
args1	字符	cateInfoId	表示這個字段的值，一般不顯示
args2	字符	extendCateInfo?.name || ‘’	表示顯示的名稱，友好名稱，需要后端支持,在前端會處理成.display

navigator

表示這個值需要使用頁面從另外一個列表中獲取，這里表示小程序端的,建議使用outer outerdisplay

字段	類型	示例	說明
args1	字符	cate.name || ‘’	表示顯示cate.name或者空這個一般用于ListDto中
args2	字符	cateInfo	外表的名稱，對應(yīng)模板的path，可以為空
args3	字符	/pages/cate/index/?model=select	如果對應(yīng)的表不用模板，則直接表示路徑

datetime

默認(rèn)的yyyy-MM-dd HH:mm:ss的格式

字段	類型	示例	說明
args1	字符	yyyy-MM-dd HH:mm:ss	表示時(shí)間使用的格式

hidden

表示隱藏這個字段，一般是主鍵ID，或者外表鏈接過來的會這配置，比如需要給cate添加子項(xiàng)，則添加由cate那邊過來
這個也適用于ListDto

字段	類型	示例	說明
args1	字符	bind	如果不填表示隱藏，如果填寫了表示頁面的query中model=xxx的時(shí)候不隱藏,表示非xxx的時(shí)候隱藏，xxx的時(shí)候不隱藏

password

密碼框模式

query

需要和 hidden 配合使用一般,表示在表單的時(shí)候使用哪個參數(shù)作為數(shù)據(jù)

字段	類型	示例	說明
args1	字符	cateid	表示使用url中的哪個參數(shù)讀取值

readyonly

表示這個字段是只讀的，一般是編輯的時(shí)候生效

richtext

如果是字符串，沒有設(shè)置maxlength，默認(rèn)就會變更成richtext，也可以手動強(qiáng)制配置

textarea

如果是字符串，設(shè)置maxlength，且設(shè)置的值大于128，默認(rèn)就會變更成textarea，也可以手動強(qiáng)制配置

select

字段	類型	示例	說明
args1	字符	[{“name”:“大”,“value”:“1”},{“name”:“小”,“value”:“2”}]	表示單選的可選值，name是顯示 value是值
args2	字符		表示值得類型，這里是單個，跟隨主類型走

selects

表示多選，這個表示的是頁面上的多選

字段	類型	示例	說明
args1	字符	[{“name”:“大”,“value”:“1”},{“name”:“小”,“value”:“2”}]	表示單選的可選值，name是顯示 value是值
args2	字符	str	表示值得類型是一個數(shù)組，還是字符串，如果是字符串則使用逗號隔開

sort

表示排序，表示字段的順序,一般表格比較會使用這個

字段	類型	示例	說明
args1	數(shù)字	0	小的排在前面，默認(rèn)為0

link

這個用于表格顯示，一般表示用于顯示外表的數(shù)據(jù),這個將棄用，使用outerdisplay替換

字段	類型	示例	說明
args1	字符	extendCate.name	顯示的外表鏈接，示例extendCate?.name || ''表示顯示cate.name或者空這個一般用于ListDto中

width

表示這個字段在表格得寬度，可以為*或者對應(yīng)得數(shù)字,是表格得列的寬度的權(quán)重,這個適用于ListDto

字段	類型	示例	說明
args1	字符	60	表示這個列的寬度，可以為數(shù)字也可以是*比如3*這樣

orderby

表示基于哪個字段進(jìn)行排序,這個一般是ListDto表示表格中，可以基于哪個字段進(jìn)行排序查詢

字段	類型	示例	說明
args1	字符	id	表示使用id正序排序
args2	字符	id desc	表示使用倒敘排序

datalist

前端表示使用datalist作為選擇數(shù)據(jù)源，前端需要把datalist的id賦值給datalistid，默認(rèn)為字段name,這個規(guī)則適用于表單和QueryDto

字段	類型	示例	說明
args1	字符	[{“name”:“正?！?“value”:“1”,“selected”:true}]	JSON的字符串，也可以為空
args2	字符	data_pro	表示調(diào)用哪個datalist數(shù)據(jù)，表示datalist的id,和args1互斥
args3	字符	read_pro_datalist()	表示需要使用eval執(zhí)行哪個函數(shù)，一般和args2配合使用，和args1互斥

daterange

主字段需要設(shè)置為daterange,其他字段需要設(shè)置hidden,在最后組合數(shù)據(jù)的時(shí)候，會基于參數(shù)生成對應(yīng)的,應(yīng)該要設(shè)置為可null格式

字段	類型	示例	說明
args1	字符	sdate	表示開始時(shí)間，最后會傳送yyyy-MM-dd 00:00:00的格式數(shù)據(jù)
args2	字符	edate	表示結(jié)束時(shí)間，如果你選擇2024-08-31,最后上送的會是2024-08-31 00:00:00
args3	字符	yyyy-MM-dd 00:00:00	表示時(shí)間的格式化，默認(rèn)使用yyyy-MM-dd 00:00:00

disable

特殊限定，限定于class的，表示禁用這個模型的哪些功能，這個一般用于ListDto，因?yàn)檫@些功能都在列表頁面

字段	類型	示例	說明
args1	字符	add	表示忽略新增，也就是不顯示新增按鈕
args2	字符	edit	表示忽略編輯，表示列表中沒有編輯的這個選項(xiàng),有些數(shù)據(jù)只能看，不需要新增和編輯
args3	字符	del	表示這個表沒有刪除，頁面UI中不需要刪除按鈕

目前還在思考有哪些常用的需要添加進(jìn)來，

目前還是缺少很多東西的
1.index.js和view.js有很多重復(fù)的函數(shù)，可以考慮把他們2個綜合一下，后續(xù)好維護(hù)
2.一些特殊的常用的功能的實(shí)現(xiàn)，比如作者的PasteSpider中大量的使用了datalist
3.如何在小程序上接入，畢竟這個項(xiàng)目的初衷就是為了解決小程序上大量表單輸入和編輯的問題而提出的方案
4.后續(xù)大家如何使用，如何按照自己的需求修改規(guī)則等

后續(xù)將放出案例項(xiàng)目和項(xiàng)目模板

我們下期見