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

表單應用是微搭的一個重要的使用場景，我們舉下面一個簡單的問卷調查的例子:

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

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

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

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

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

注意

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

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

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

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

接下來我們針對這部分進行實踐操作。

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

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

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

創(chuàng)建應用

在微搭控制臺新建一個測試應用，如下圖所示:

搭建表單頁面及微調

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

按上述步驟操作完成后即可生成如圖所示的表單頁面，如有必要對內容做微調即可。

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

如問題12，標題描述較長，我們頁面上只展示了括號前面的那部分內容，我們通過添加小字注釋的方式來實現(xiàn)更多內容的展現(xiàn)。

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

如下圖:


最終展示效果:

到這里就完成了表單頁面的搭建和調整。

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

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

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

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

點擊查看按鈕可以看到詳情，如下圖：

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

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


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

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

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

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