第三章 頁(yè)面設(shè)計(jì)講解

頁(yè)面設(shè)計(jì)——浙江交通職業(yè)技術(shù)學(xué)院頁(yè)面布局設(shè)計(jì)0

1表單頁(yè)面設(shè)計(jì)02大屏頁(yè)面設(shè)計(jì)03APP頁(yè)面設(shè)計(jì)04CONTENTS目錄PART01PAGELAYOUTDESIGN頁(yè)面布局設(shè)計(jì)導(dǎo)航頁(yè)1、基于Layou布局組件：高度、寬度：可以設(shè)定百分比或者固定PX。頂部、底部：可以設(shè)置顯隱、寬高、高級(jí)設(shè)置控制邊距、邊框、背景、字體等。左側(cè)、右側(cè)：可以設(shè)置顯隱、寬高、折疊，高級(jí)設(shè)置控制邊距、邊框、背景、字體等。導(dǎo)航頁(yè)2、左側(cè)拖入Menu(菜單)組件：a.Menu組件修改成自己想要的樣式b.數(shù)據(jù)連接器引入自己的接口（這里引入的是平臺(tái)自帶的接口）,接口進(jìn)入頁(yè)面后加載數(shù)據(jù)功能打開(kāi)導(dǎo)航頁(yè)3、Menu(菜單)組件引入數(shù)據(jù)：a.數(shù)據(jù)源切換成服務(wù)端數(shù)據(jù)b.服務(wù)端數(shù)據(jù)點(diǎn)擊鏈接選擇我們剛剛引入的接口的datac.打開(kāi)數(shù)組轉(zhuǎn)樹(shù)結(jié)構(gòu)并填入對(duì)應(yīng)的字段d.設(shè)置Menu組件默認(rèn)選中的key傳入數(shù)據(jù)連接器的第一條數(shù)據(jù)并且返回導(dǎo)航頁(yè)4、Layout組件中間引入Iframe組件：a.調(diào)整好iframe寬，高各百分百，使其全部占據(jù)Layout組件中間b.設(shè)置url屬性傳入Menu.selected屬性(Menu組件當(dāng)前選中的數(shù)據(jù))，返回地址導(dǎo)航頁(yè)5、收尾工作：a.設(shè)置導(dǎo)航頁(yè)的頭部,我這里的頭部是拖入FlexContainer，Span，Popover組件并且設(shè)置間距，子組件排列類(lèi)型，主軸

元素排列，樣式等屬性b.把頁(yè)面設(shè)置成首頁(yè)并且外部預(yù)覽查看效果導(dǎo)航頁(yè)6、最終效果：登錄頁(yè)1、引入FreeContainer組件：設(shè)置屬性柵格數(shù)：設(shè)置成24（將頁(yè)面分成24等份）行方向排列：子級(jí)元素豎向排列方向列方向排列：子級(jí)元素橫向排列方向高度、寬度：可以設(shè)定百分比或者固定PX背景圖設(shè)置：在應(yīng)用資源里選擇一張作為背景圖登錄頁(yè)2、再引入一個(gè)新的FreeContainer組件：位置：在第一個(gè)FreeContainer組件下設(shè)置屬性顯示名稱：修改成JmFlex用于跟第一個(gè)FreeContainer組件區(qū)分內(nèi)部布局：默認(rèn)柵格數(shù)：設(shè)置8高度、寬度：260px、400px圓角：30px背景顏色：#FFFFFFF(顏色值)內(nèi)間距：上下左右都設(shè)置20px外間距：右設(shè)置成150px登錄頁(yè)2、再引入一個(gè)新的FreeContainer組件：位置：在第一個(gè)FreeContainer組件下設(shè)置屬性顯示名稱：修改成JmFlex用于跟第一個(gè)FreeContainer組件區(qū)分。內(nèi)部布局：默認(rèn)柵格數(shù)：設(shè)置8高度、寬度：260px、400px圓角：30px背景顏色：#FFFFFFF(顏色值)內(nèi)間距：上下左右都設(shè)置20px外間距：右設(shè)置成150px登錄頁(yè)3、引入from表單：位置：JmFlex組件下設(shè)置屬性布局：垂直排列（三種布局方式可選）4、引入FormItem組件：位置：from表單下引入兩個(gè)formltem（一個(gè)賬號(hào)，一個(gè)密碼）設(shè)置屬性標(biāo)題：空控件柵格：24標(biāo)題柵格：0登錄頁(yè)5、引入input組件：位置：FormItem組件下，每個(gè)FormItem各引入一個(gè)input組件設(shè)置屬性提示：請(qǐng)輸入賬號(hào)/密碼類(lèi)型：text/password前綴圖標(biāo)：選擇對(duì)應(yīng)的圖標(biāo)6、引入Button組件：位置：JmFlex下，form同級(jí)設(shè)置屬性內(nèi)容：登錄類(lèi)型：主要性狀：圓角高度、寬度：100%、40px外邊距：margin-top:40px登錄頁(yè)7、最終效果：1、引入FreeContainer組件（顯示名稱：FreeContainer）：設(shè)置屬性顯示名稱：顯示名稱排列方向：橫向內(nèi)部布局：默認(rèn)行間距：16px。行方向排列：撐滿容器列方向排列：兩邊對(duì)齊高度、寬度：100%100%內(nèi)邊距：24px24px24px24px2、引入FreeContainer組件（顯示名稱：查詢JmFlex）位置：FreeContainer下設(shè)置屬性排列方向：橫向內(nèi)部布局：充滿容器行方向排列：撐滿容器列方向排列：兩邊對(duì)齊行方向排列：中表單頁(yè)面3、引入FlexContainer組件（顯示名稱：FlexContainer）：位置：查詢JmFlex下

4、引入Form組件：位置：FreeContainer下設(shè)置屬性布局:horizontal自定義樣式：表單頁(yè)面5、引入FormItem組件：位置：Form下設(shè)置屬性標(biāo)簽：姓名標(biāo)簽柵格：6標(biāo)簽對(duì)齊方式：右對(duì)齊控件柵格：18寬：320px6、引入Input組件：位置：FormItem下表單頁(yè)面7、引入FlexContainer組件（顯示名稱：FlexContainer1）：位置：查詢JmFlex下8、引入Button組件（兩個(gè)）：位置：FlexContainer1下設(shè)置屬性文本：重置/查詢類(lèi)型：次要/主要尺寸：中表單頁(yè)面9、引入FreeContainer組件（顯示名稱：表格JmFlex）：位置：FreeContainer下設(shè)置屬性排列方向：橫向布局方式：彈性布局內(nèi)部布局：默認(rèn)行方向排列：撐滿容器列方向排列：左10、引入Table組件：位置：表格JmFlex下設(shè)置屬性使用靜態(tài)數(shù)據(jù)：是點(diǎn)擊更多設(shè)置可以修改table組件的高級(jí)設(shè)置點(diǎn)擊高級(jí)設(shè)置的加號(hào)就可以添加屬性屬性名字：靜態(tài)數(shù)據(jù)里定義的字段表頭：表格里展示的名字表單頁(yè)面表單頁(yè)面11、最終效果：PART02FORMPAGEDESIGN表單頁(yè)面設(shè)計(jì)11、最終效果：本節(jié)課主要是進(jìn)行表單的頁(yè)面設(shè)計(jì)，實(shí)現(xiàn)單個(gè)表單的增刪改查需求描述：創(chuàng)建一個(gè)新應(yīng)用實(shí)現(xiàn)客戶信息的增刪改查功能加入到應(yīng)用菜單，并在線預(yù)覽案例效果創(chuàng)建應(yīng)用11、最終效果：步驟一：點(diǎn)擊新建，創(chuàng)建應(yīng)用步驟二：輸入應(yīng)用名稱步驟三：開(kāi)啟基礎(chǔ)服務(wù)頁(yè)數(shù)據(jù)庫(kù)表設(shè)計(jì)11、最終效果：使用平臺(tái)提供的默認(rèn)數(shù)據(jù)庫(kù)，新建數(shù)據(jù)庫(kù)表：客戶信息表，表結(jié)構(gòu)如下：數(shù)據(jù)庫(kù)表設(shè)計(jì)11、最終效果：1、新建表：使用平臺(tái)表設(shè)計(jì)功能，點(diǎn)擊新建按鈕，新建一個(gè)數(shù)據(jù)庫(kù)表，如下：2、設(shè)計(jì)數(shù)據(jù)庫(kù)字段：字段具體設(shè)計(jì)如下，設(shè)計(jì)完成后點(diǎn)擊確認(rèn)即可數(shù)據(jù)庫(kù)表設(shè)計(jì)11、最終效果：3、生成api方法：點(diǎn)擊表，選中要生成api的表，點(diǎn)擊生成后保存4、生成后，可以在當(dāng)前表的api方法中查看到生成的api。點(diǎn)擊customer_info_insert方法，填寫(xiě)參數(shù)，新增一條數(shù)據(jù)。頁(yè)面設(shè)計(jì)11、最終效果：主要使用彈性容器（FlexContainer）來(lái)搭建整體框架,步驟如下：整體布局：1、拖入彈性容器（FlexContainer），調(diào)整寬高為100%，子組件排列為縱向頁(yè)面設(shè)計(jì)11、最終效果：整體布局：2、再拖入三個(gè)彈性容器，作為搜索條件欄，操作按鈕欄和數(shù)據(jù)展示欄。在右側(cè)配置面板中修改子組件排列為縱向，并調(diào)整當(dāng)前頁(yè)面組件的顯示名稱。頁(yè)面設(shè)計(jì)11、最終效果：條件搜索欄設(shè)計(jì)：條件搜索欄主要通過(guò)表單（form）組件，柵格（Grid），表單項(xiàng)（FormItem），輸入框（input）和按鈕（Button）來(lái)搭建條件搜索框，效果如下：頁(yè)面設(shè)計(jì)11、最終效果：條件搜索欄設(shè)計(jì)：1、拖入form表單后，修改名稱，然后在form表單中拖入柵格，在右側(cè)面板中將柵格分為4等份2、在前三個(gè)柵格中拖入表單項(xiàng)（FormItem），修改顯示名稱和名稱頁(yè)面設(shè)計(jì)11、最終效果：條件搜索欄設(shè)計(jì)：3、在第4個(gè)柵格中拖入兩個(gè)按鈕，修改名稱，并將查詢按鈕類(lèi)型調(diào)整為主要按鈕4、調(diào)整按鈕間距：點(diǎn)擊查詢按鈕，在樣式中的高級(jí)樣式里設(shè)置按鈕外邊距（上：14px，左40px，右10px）頁(yè)面設(shè)計(jì)11、最終效果：條件搜索欄設(shè)計(jì)：5、在表單項(xiàng)中拖入input組件，修改名稱頁(yè)面設(shè)計(jì)11、最終效果：操作按鈕欄設(shè)計(jì)：操作欄主要是按鈕的設(shè)計(jì)1、拖入三個(gè)按鈕到操作欄的彈性容器中，修改名稱2、拖入一個(gè)下載組件，設(shè)置為不顯示頁(yè)面設(shè)計(jì)11、最終效果：數(shù)據(jù)展示欄設(shè)計(jì)：數(shù)據(jù)展示欄主要是用表格來(lái)進(jìn)行搭建1、拖入一個(gè)表格（table）組件到數(shù)據(jù)展示欄的彈性容器當(dāng)中2、點(diǎn)擊主容器，設(shè)置主容器的內(nèi)邊距（上：20px，左右各30px）頁(yè)面設(shè)計(jì)11、最終效果：數(shù)據(jù)展示欄設(shè)計(jì)：數(shù)據(jù)展示欄主要是用表格來(lái)進(jìn)行搭建3、設(shè)置主布局背景為灰色（#F5F5F5），設(shè)置數(shù)據(jù)展示容器和搜索欄容器為白色（#FFFFFF）頁(yè)面設(shè)計(jì)11、最終效果：新增彈窗設(shè)計(jì)：新增彈窗主要是通過(guò)Model,表單，表單項(xiàng)和輸入框搭建而成，效果如下：頁(yè)面設(shè)計(jì)11、最終效果：新增彈窗設(shè)計(jì)：1、拖入一個(gè)model組件到頁(yè)面中，在model中拖入一個(gè)表單組件，在表單中再拖入五個(gè)表單項(xiàng)頁(yè)面設(shè)計(jì)11、最終效果：新增彈窗設(shè)計(jì)：2、在前四個(gè)表單項(xiàng)中拖入輸入框input組件頁(yè)面設(shè)計(jì)11、最終效果：新增彈窗設(shè)計(jì)：3、在詳細(xì)地址的表單項(xiàng)中拖入一個(gè)文本域組件頁(yè)面設(shè)計(jì)11、最終效果：新增彈窗設(shè)計(jì)：4、修改組件名稱，和顯示名稱，將彈窗設(shè)置為默認(rèn)不顯示。設(shè)計(jì)完的新增彈窗組件層級(jí)和效果如下頁(yè)面設(shè)計(jì)11、最終效果：編輯彈窗設(shè)計(jì)：具體操作和新增彈窗相同，拖入彈窗組件，在彈窗中拖入一個(gè)表單，表單內(nèi)部放四個(gè)表單項(xiàng)，每個(gè)表單項(xiàng)中選擇相應(yīng)的輸入框，具體層級(jí)與效果如下：數(shù)據(jù)對(duì)接11、最終效果：新建數(shù)據(jù)連接器：1、新建一個(gè)數(shù)據(jù)連接器，勾選需要的數(shù)據(jù)api，點(diǎn)擊確定按鈕數(shù)據(jù)對(duì)接11、最終效果：新建數(shù)據(jù)連接器：2、將模糊查詢的數(shù)據(jù)連接器，設(shè)置為進(jìn)入頁(yè)面后加載數(shù)據(jù)數(shù)據(jù)對(duì)接11、最終效果：綁定操作按鈕數(shù)據(jù)：綁定新增數(shù)據(jù)：1、將新增客戶信息的api綁定上新增表單中的組件，綁定客戶編號(hào)code的數(shù)據(jù)操作如下，將數(shù)據(jù)連接器的新增api中的code數(shù)據(jù)綁定表單中的客戶編號(hào)輸入框的value數(shù)據(jù)對(duì)接11、最終效果：綁定操作按鈕數(shù)據(jù)：綁定新增數(shù)據(jù)：2、和上方綁定code操作相同，將客戶名稱，聯(lián)系人，聯(lián)系電話，地址字段綁定上新增表單中的對(duì)應(yīng)的輸入框value，由于id自增，id不用綁定數(shù)據(jù)具體效果如下：數(shù)據(jù)對(duì)接11、最終效果：綁定操作按鈕數(shù)據(jù)：綁定新增數(shù)據(jù)：3、將新增的更新時(shí)間（update_time）字段綁定到系統(tǒng)內(nèi)置參數(shù)的當(dāng)前時(shí)間，綁定后在新增時(shí)的更新時(shí)間會(huì)以當(dāng)前時(shí)間新增，客戶信息表中id是主鍵自增，不用綁定數(shù)據(jù)。數(shù)據(jù)對(duì)接11、最終效果：綁定操作按鈕數(shù)據(jù)：綁定導(dǎo)出數(shù)據(jù)：將導(dǎo)出數(shù)據(jù)的數(shù)據(jù)連接器的查詢條件，綁定上搜索欄的查詢條件數(shù)據(jù)對(duì)接11、最終效果：綁定搜索欄數(shù)據(jù)：將條件查詢的數(shù)據(jù)連接器綁定上查詢欄中的組件。選擇數(shù)據(jù)連接器customer_info_likeQuery，將code，contact，telephone分別綁定到對(duì)應(yīng)的輸入框數(shù)據(jù)對(duì)接11、最終效果：綁定表格欄數(shù)據(jù)：綁定表格數(shù)據(jù)1、點(diǎn)擊表格，將數(shù)據(jù)源更改為服務(wù)端數(shù)據(jù)，選擇模糊查詢data的data數(shù)據(jù)數(shù)據(jù)對(duì)接11、最終效果：綁定表格欄數(shù)據(jù)：綁定表格數(shù)據(jù)2、修改表格的顯示字段，點(diǎn)擊通用中的更多設(shè)置，將id，total和data取消勾選（取消勾選在表格中不展示，勾選上的字段在表格中展示），修改字段在表格中的顯示名稱數(shù)據(jù)對(duì)接11、最終效果：綁定表格欄數(shù)據(jù)：綁定表格數(shù)據(jù)3、點(diǎn)擊更多配置中的行操作設(shè)置，設(shè)置三個(gè)按鈕（詳情，編輯，刪除），按鈕顏色為藍(lán)色，文字顏色為白色。數(shù)據(jù)對(duì)接11、最終效果：綁定表格欄數(shù)據(jù)：綁定表格數(shù)據(jù)4、在表單配置中，將布局的可選中按鈕設(shè)置為多選，后面批量刪除會(huì)進(jìn)行綁定數(shù)據(jù)對(duì)接11、最終效果：綁定表格欄數(shù)據(jù)：綁定編輯數(shù)據(jù)1、編輯表單數(shù)據(jù)回顯，選擇編輯表單中的輸入框，將通用配置面板的值屬性綁定數(shù)據(jù)連接器customer_info_view對(duì)應(yīng)的值：數(shù)據(jù)對(duì)接11、最終效果：綁定表格欄數(shù)據(jù)：綁定編輯數(shù)據(jù)2、將customer_info_view數(shù)據(jù)連接器設(shè)置查詢條件，選擇數(shù)據(jù)連接器，將id綁定到表格組件的當(dāng)前行的id數(shù)據(jù)對(duì)接11、最終效果：綁定表格欄數(shù)據(jù)：綁定編輯數(shù)據(jù)3、綁定更新的數(shù)據(jù)連接器數(shù)據(jù)：選擇customer_info_update，將id綁定到表格組件的當(dāng)前行的id數(shù)據(jù)，其余字段操作同新增一樣，綁定到編輯表單對(duì)應(yīng)的輸入框，具體如下圖所示數(shù)據(jù)對(duì)接11、最終效果：綁定表格欄數(shù)據(jù)：綁定編輯數(shù)據(jù)4、開(kāi)啟編輯數(shù)據(jù)連接器的加載數(shù)據(jù)前通知確認(rèn)，輸入標(biāo)題，內(nèi)容，以及按鈕的名稱。在開(kāi)啟后會(huì)先彈出一個(gè)彈框進(jìn)行確認(rèn)數(shù)據(jù)對(duì)接11、最終效果：綁定表格欄數(shù)據(jù)：綁定刪除數(shù)據(jù)1、綁定刪除的條件，將customer_info_delete的id字段綁定表格組件當(dāng)前行id2、開(kāi)啟刪除數(shù)據(jù)連接器的加載數(shù)據(jù)前通知確認(rèn)，輸入標(biāo)題，內(nèi)容，以及按鈕的名稱。在開(kāi)啟后會(huì)先彈出一個(gè)彈框進(jìn)行確認(rèn)事件響應(yīng)11、最終效果：搜索欄事件：查詢按鈕事件：選擇查詢按鈕，在事件中，將點(diǎn)擊事件綁定上數(shù)據(jù)連接器customer_info_likeQuery。這樣在點(diǎn)擊查詢按鈕后會(huì)去執(zhí)行數(shù)據(jù)連接器，刷新表格數(shù)據(jù)。重置按鈕事件：將重置按鈕的點(diǎn)擊事件，綁定到查詢表單的reset方法，點(diǎn)擊重置，會(huì)清空查詢表單中輸入的值。事件響應(yīng)11、最終效果：操作按鈕欄事件：新增事件：1、綁定彈窗事件：點(diǎn)擊新增彈窗組件，然后在事件面板的點(diǎn)擊確認(rèn)按鈕選項(xiàng)中，選擇新增表單提交事件（submit）。配置完成后，當(dāng)我們點(diǎn)擊新增彈窗的確認(rèn)按鈕后，會(huì)去驗(yàn)證新增表單中的信息事件響應(yīng)11、最終效果：操作按鈕欄事件：新增事件：2、配置新增表單事件：點(diǎn)擊新增表單組件，然后在事件面板的表單驗(yàn)證成功選項(xiàng)中，選擇數(shù)據(jù)連接器的新增客戶信息的api（customer_info_insert）。配置完成后，當(dāng)表單驗(yàn)證成功后，會(huì)去執(zhí)行新增客戶信息的操作事件響應(yīng)11、最終效果：操作按鈕欄事件：新增事件：3、配置新增后事件：在數(shù)據(jù)連接器中，點(diǎn)擊customer_info_insert，在事件面板的的請(qǐng)求數(shù)據(jù)后選項(xiàng)中，添加新增彈框隱藏事件和模糊查詢事件事件響應(yīng)11、最終效果：操作按鈕欄事件：新增事件：4、綁定新增按鈕，選擇操作欄的新增按鈕，在事件中找到點(diǎn)擊事件，選擇讓新增彈框顯示。配置完成后，點(diǎn)擊新增按鈕就會(huì)彈出新增彈窗事件響應(yīng)11、最終效果：操作按鈕欄事件：導(dǎo)出事件：1、導(dǎo)出按鈕設(shè)置，選中導(dǎo)出按鈕，在點(diǎn)擊事件中，選擇下載的數(shù)據(jù)連接器，來(lái)查詢下載的數(shù)據(jù)2、設(shè)置導(dǎo)出數(shù)據(jù)連接器的請(qǐng)求數(shù)據(jù)后的事件，選擇下載組件的download事件，來(lái)觸發(fā)下載的動(dòng)作事件響應(yīng)11、最終效果：操作按鈕欄事件：批量刪除事件：1、批量刪除按鈕設(shè)置：選中批量刪除按鈕，在點(diǎn)擊事件中綁定批量刪除的數(shù)據(jù)連接器2、配置數(shù)據(jù)連接器（customer_info_batchDelete）：將批量刪除的條件id綁定到表格選中id數(shù)據(jù)事件響應(yīng)11、最終效果：操作按鈕欄事件：批量刪除事件：3、刪除后執(zhí)行查詢操作，更新表格數(shù)據(jù)4、配置刪除前的通知事件事件響應(yīng)11、最終效果：表格事件：編輯事件：1、綁定彈窗事件：點(diǎn)擊編輯彈窗組件，然后在事件面板的點(diǎn)擊確認(rèn)按鈕選項(xiàng)中，選擇編輯表單提交事件（submit）。配置完成后，當(dāng)我們點(diǎn)擊編輯彈窗的確認(rèn)按鈕后，會(huì)去驗(yàn)證編輯表單中的信息2、配置編輯表單事件：點(diǎn)擊編輯表單組件，然后在事件面板的表單驗(yàn)證成功選項(xiàng)中，選擇數(shù)據(jù)連接器的編輯客戶信息的api（customer_info_update）。配置完成后，當(dāng)表單驗(yàn)證成功后，會(huì)去執(zhí)行更新客戶信息的操作事件響應(yīng)11、最終效果：表格事件：編輯事件：3、配置編輯后事件：在數(shù)據(jù)連接器中，點(diǎn)擊customer_info_insert，在事件面板的的請(qǐng)求數(shù)據(jù)后選項(xiàng)中，添加編輯彈框隱藏事件和模糊查詢事件4、綁定編輯按鈕事件，表格操作欄的編輯按鈕對(duì)應(yīng)的是表格的操作按鈕2，在表格的事件中找到操作按鈕2，選擇讓編輯彈框顯示。配置完成后，點(diǎn)擊編輯按鈕就會(huì)彈出編輯彈窗事件響應(yīng)11、最終效果：表格事件：刪除事件：綁定刪除按鈕事件：表格操作欄的刪除按鈕對(duì)應(yīng)的是表格的操作按鈕3，在表格的事件中找到操作按鈕3，選擇刪除的數(shù)據(jù)連接器執(zhí)行刪除操作customer_info_delete。配置完成后，點(diǎn)擊編輯按鈕就會(huì)彈出編輯彈窗效果展示11、最終效果：1、新增菜單：在支撐的菜單管理中，點(diǎn)擊新增菜單，填寫(xiě)詳細(xì)信息2、分配角色權(quán)限：在角色管理中給管理員分配客戶信息管理的權(quán)限效果展示11、最終效果：3、點(diǎn)擊web預(yù)覽可以預(yù)覽頁(yè)面整體效果PART03LARGESCREENPAGEDESIGN大屏頁(yè)面設(shè)計(jì)數(shù)據(jù)看板11、最終效果：設(shè)計(jì)思路：1、拖動(dòng)FixedContainer固定容器組件數(shù)據(jù)看板11、最終效果：設(shè)計(jì)思路：2、拖動(dòng)AbsoluteRow組件到FixedContainer里面數(shù)據(jù)看板11、