基于數(shù)據(jù)模型實(shí)現(xiàn)表單頁(yè)面的生成和數(shù)據(jù)的保存、查看

表單應(yīng)用是微搭的一個(gè)重要的使用場(chǎng)景，我們舉下面一個(gè)簡(jiǎn)單的問(wèn)卷調(diào)查的例子:

基于以上問(wèn)卷，本文我們采取數(shù)據(jù)模型的方式生成表單頁(yè)面并完成數(shù)據(jù)的保存及查看。

數(shù)據(jù)模型概述

先看下官方文檔對(duì)于數(shù)據(jù)模型的解釋(以下內(nèi)容參考官方文檔)

騰訊云微搭低代碼支持開(kāi)發(fā)者根據(jù)業(yè)務(wù)建立數(shù)據(jù)模型以及管理業(yè)務(wù)數(shù)據(jù)。開(kāi)發(fā)者可以通過(guò)開(kāi)發(fā)應(yīng)用并引用相關(guān)數(shù)據(jù)模型來(lái)顯示或操作這些業(yè)務(wù)數(shù)據(jù)。

開(kāi)發(fā)應(yīng)用時(shí)，可以使用標(biāo)準(zhǔn)、系統(tǒng)（只讀）數(shù)據(jù)模型或混合使用。騰訊云微搭低代碼已預(yù)置了一些系統(tǒng)數(shù)據(jù)模型和示例標(biāo)準(zhǔn)數(shù)據(jù)模型。

注意

對(duì)數(shù)據(jù)模型的改動(dòng)（創(chuàng)建、更新、刪除）只有在使用該數(shù)據(jù)模型的應(yīng)用發(fā)布時(shí)才會(huì)在正式環(huán)境生效。一個(gè)數(shù)據(jù)模型若被多個(gè)應(yīng)用使用，則需要每一個(gè)使用該數(shù)據(jù)模型的應(yīng)用重新發(fā)布，才可以使用最新的數(shù)據(jù)模型。特別地，應(yīng)用區(qū)分預(yù)覽和正式兩種狀態(tài)，兩種狀態(tài)使用的數(shù)據(jù)模型亦互不影響。

騰訊云微搭低代碼數(shù)據(jù)模型包含兩種類(lèi)型：

類(lèi)型	說(shuō)明
標(biāo)準(zhǔn)數(shù)據(jù)模型	標(biāo)準(zhǔn)數(shù)據(jù)模型是一種最簡(jiǎn)單、方便的業(yè)務(wù)數(shù)據(jù)模型。開(kāi)發(fā)者只需要關(guān)注業(yè)務(wù)模型即可在應(yīng)用中展示或操作數(shù)據(jù)，無(wú)需關(guān)心數(shù)據(jù)的讀寫(xiě)方式、存儲(chǔ)過(guò)程以及權(quán)限控制。 標(biāo)準(zhǔn)數(shù)據(jù)模型的模型字段由系統(tǒng)字段和自定義字段構(gòu)成，開(kāi)發(fā)者無(wú)法修改、刪除系統(tǒng)字段。 標(biāo)準(zhǔn)數(shù)據(jù)模型包含以下模型方法：新增、新增多條、刪除、刪除多條、更新、更新多條、查詢(xún)單條、查詢(xún)列表，是微搭默認(rèn)的數(shù)據(jù)讀寫(xiě)方式，數(shù)據(jù)存儲(chǔ)于微搭云數(shù)據(jù)庫(kù)內(nèi)。
系統(tǒng)數(shù)據(jù)模型	系統(tǒng)數(shù)據(jù)模型是環(huán)境內(nèi)默認(rèn)創(chuàng)建且包含一定約束的數(shù)據(jù)模型，微搭低代碼平臺(tái)功能會(huì)使用系統(tǒng)數(shù)據(jù)模型數(shù)據(jù)，例如用戶(hù)、部門(mén)等。系統(tǒng)數(shù)據(jù)模型對(duì)比標(biāo)準(zhǔn)數(shù)據(jù)模型具有更多的系統(tǒng)字段，用戶(hù)無(wú)法刪除系統(tǒng)數(shù)據(jù)模型。在模型方法中只支持查詢(xún)單條和查詢(xún)列表，用戶(hù)無(wú)法通過(guò)模型方法進(jìn)行寫(xiě)操作。

文檔解釋的也比較清楚，標(biāo)準(zhǔn)數(shù)據(jù)模型就是跟業(yè)務(wù)字段一一對(duì)應(yīng)的一個(gè)數(shù)據(jù)庫(kù)對(duì)象，微搭也支持通過(guò)標(biāo)準(zhǔn)數(shù)據(jù)模型實(shí)現(xiàn)表單頁(yè)面的生成以及數(shù)據(jù)的增刪改查操作，同時(shí)內(nèi)置了這些增刪改查的相關(guān)接口。也就是說(shuō)對(duì)于簡(jiǎn)單的增刪改查操作用戶(hù)可以不需要寫(xiě)代碼只需要做一些配置即可完成頁(yè)面的生成以及數(shù)據(jù)的存儲(chǔ)，這個(gè)對(duì)于一些簡(jiǎn)單的場(chǎng)景和非技術(shù)人員來(lái)說(shuō)還是相當(dāng)友好的。

接下來(lái)我們針對(duì)這部分進(jìn)行實(shí)踐操作。

新建數(shù)據(jù)模型

1. 在微搭控制臺(tái)數(shù)據(jù)源-數(shù)據(jù)模型菜單下，點(diǎn)擊新建數(shù)據(jù)模型，填入相關(guān)信息，點(diǎn)擊創(chuàng)建，如下圖。
   
2. 創(chuàng)建完成后會(huì)進(jìn)入到數(shù)據(jù)模型信息頁(yè)，可以看到微搭提供的一些默認(rèn)增刪改查的方法和編輯字段的地方，在這里我們根據(jù)問(wèn)卷補(bǔ)齊字段。
   
   點(diǎn)擊添加字段按鈕，補(bǔ)齊字段，如下圖所示:
   
   
   添加字段過(guò)程中，

1. 對(duì)于單選或者多選有個(gè)選項(xiàng)集的概念，其實(shí)就是選項(xiàng)對(duì)應(yīng)的key和value，可以直接根據(jù)情況新建即可。
2. 字段名稱(chēng)限制是20個(gè)字符，如果超出的話(huà)可以考慮在頁(yè)面上添加小字注釋的方式實(shí)現(xiàn)

創(chuàng)建應(yīng)用

在微搭控制臺(tái)新建一個(gè)測(cè)試應(yīng)用，如下圖所示:

搭建表單頁(yè)面及微調(diào)

進(jìn)入上一步驟創(chuàng)建的應(yīng)用，我們添加一個(gè)表單組件并做如下圖配置:

按上述步驟操作完成后即可生成如圖所示的表單頁(yè)面，如有必要對(duì)內(nèi)容做微調(diào)即可。

上面有提到過(guò)數(shù)據(jù)模型字段長(zhǎng)度有20個(gè)字符的限制，那對(duì)于超出20字的問(wèn)題這里也提供一種解決思路。

如問(wèn)題12，標(biāo)題描述較長(zhǎng)，我們頁(yè)面上只展示了括號(hào)前面的那部分內(nèi)容，我們通過(guò)添加小字注釋的方式來(lái)實(shí)現(xiàn)更多內(nèi)容的展現(xiàn)。

• 首先在頁(yè)面上找到問(wèn)題12對(duì)應(yīng)的組件，可以看到是個(gè)下拉選擇組件。
• 我們拖拽一個(gè)普通容器將這個(gè)組件包裹起來(lái)，在這個(gè)容器中放置兩個(gè)文本組件，用于展示標(biāo)題和副標(biāo)題。
• 設(shè)置兩個(gè)文本展示的內(nèi)容和字體大小、樣式等（標(biāo)題使用正文，副標(biāo)題使用正文(小)）
• 關(guān)閉下拉選擇組件展示標(biāo)題的開(kāi)關(guān)

如下圖:


最終展示效果:

到這里就完成了表單頁(yè)面的搭建和調(diào)整。

數(shù)據(jù)提交與驗(yàn)證

上一步生成的頁(yè)面中已經(jīng)綁定了提交數(shù)據(jù)的相關(guān)事件，我們驗(yàn)證時(shí)只需要填寫(xiě)表單內(nèi)容然后點(diǎn)擊提交按鈕就可以看到效果了。

看到提交成功的提示后，我們回到數(shù)據(jù)模型菜單頁(yè)面，找到新建的那個(gè)數(shù)據(jù)模型，點(diǎn)擊更多菜單里的管理數(shù)據(jù)按鈕，會(huì)進(jìn)入到數(shù)據(jù)管理頁(yè)面。

在數(shù)據(jù)管理頁(yè)面上就可以看到我們剛通過(guò)頁(yè)面提交的表單數(shù)據(jù)了。

點(diǎn)擊查看按鈕可以看到詳情，如下圖：

可以看到數(shù)據(jù)可以正常提交、正常入庫(kù)。那么到這里我們回過(guò)頭再關(guān)注下這個(gè)提交按鈕的事件。

在微搭編輯器左側(cè)的大綱樹(shù)可以看到表單容器綁定了一個(gè)事件，可想而知這個(gè)事件里面就是調(diào)用了數(shù)據(jù)模型中提供的保存數(shù)據(jù)的方法，可以具體驗(yàn)證下，如下圖:


可以看到這里綁定了提交、提交成功、提交失敗等6個(gè)事件，而這里的提交觸發(fā)的操作就是調(diào)用了數(shù)據(jù)模型的創(chuàng)建單條記錄的方法。

數(shù)據(jù)模型生成表單的方式是微搭平臺(tái)幫我們生成的表單頁(yè)面和表單事件，在后續(xù)我們自己創(chuàng)建表單頁(yè)面和使用事件時(shí)也可以作為參考。

關(guān)于數(shù)據(jù)模型的數(shù)據(jù)列表及詳情展示放到后續(xù)文章中分享。

到此，本文內(nèi)容就結(jié)束了，希望能夠幫助到各位。如有任何疑問(wèn)或者建議歡迎評(píng)論區(qū)提出~