日本熟妇hd丰满老熟妇,中文字幕一区二区三区在线不卡 ,亚洲成片在线观看,免费女同在线一区二区

步驟二、應用搭建

待辦事項管理平臺的應用搭建是實現的方案設計的功能,下文會詳細介紹每個部分的具體操作步驟。

  1. 搭建待辦事項的增刪改查功能

  2. 搭建登錄功能

  3. 列表頁集成今日天氣接口

搭建待辦事項的增刪改查功能

  1. 在應用開發界面,在左側功能區單擊image.png,在數據模型頁簽,單擊全局數據模型,進入數據模型設計界面。

  2. 在左側組件區給畫布中拖入一個實體,設置實體名稱為待辦事項image.png

  3. 在實體中添加需要的字段及字段類型:

    1. 添加簡單字段。

      單擊實體,右側單擊+添加字段,填入字段名稱如事項名稱,選擇對應字段屬性,單擊添加字段

    2. 添加枚舉字段(如優先級、完成狀態),需先對枚舉進行設置。

      1. 字段類型需選擇ENUMERATION,單擊+添加,設置枚舉名枚舉值,單擊確定。下文以創建優先級為例:

        • 優先級枚舉名和枚舉值均為:高、中、低。image.png

        • 枚舉值設置完成后,對應字段選中已創建的枚舉,單擊保存image.png

      2. 開啟默認值開關(可選),設置默認值中。image.png

      3. 完成后,單擊添加字段

        說明

        完成狀態枚舉值為:未開始、進行中、已完成、已取消。

    3. 已完成的字段如下圖所示:

      image.png

  4. 一鍵生成頁面。

    1. 單擊實體上面的一鍵生成頁面

      image.png

    2. 在生成頁面中選擇要生成的實體字段。

      image.png

    3. 選擇生成的頁面類型和頁面樣式,單擊生成

      image.png

    4. 確定后,生成對應頁面。

      image.png

  5. 將列表頁設為首頁

    image.png

  6. 優化UI效果。

    1. 單擊左側組件區頁面管理 > 待辦事項編輯頁

    2. 打開頁面大綱樹,單擊頁面,將當前編輯頁改為彈層,設置彈層的位置和尺寸。image.png

    3. 單擊左側組件區頁面管理 > 待辦事項列表頁單擊DataGrid組件,調整展示的列表字段順序。

      image.png

  7. 一個有基礎CRUD功能的待辦事項管理平臺已經搭建完畢了,單擊預覽看下搭建效果。

    • 預覽界面

      image.png

    • 單擊訪問應用,進入瀏覽器新tab內進行全屏訪問。

      image.png

    • 單擊添加待辦事項,進入待辦事項編輯頁,編輯數據填充。

      image.png

  8. 返回編輯器界面,右上角單擊提交,填寫變更描述,保存一個版本。image.png

  9. 點擊左側面板最下方image.png按鈕,查看版本信息。

    image.png

搭建登錄功能

  1. 單擊左側功能區image.png> 頁面 > 添加新頁面

  2. 添加頁面彈窗,選擇頁面類型PC,填入頁面名稱登錄頁,選擇模板為登錄頁1

    image.png

  3. 進入登錄頁面的設計器,設置登錄頁面。

    1. 修改文本,刪除不需要的元素,調整樣式,頁面最終如下所示。

      image.png

    2. 準備一個圖標上傳,設置名稱為logo.png,【點我下載圖標】

      說明

      單擊下載圖標后,右鍵單擊復制圖片地址,在上傳時,選擇URL鏈接,輸入圖片地址。

      image.png

    3. 設置圖標。

      image.png

  4. 設置登錄功能的數據建模。單擊左側數據模型,在畫布中拖入內存實體,設置實體名稱為登錄表單,添加用戶名和密碼字段。

    image.png

  5. 給登錄表單頁面綁定數據。

    1. 在大綱樹中選中文本等組件的上層數據容器組件Data,設置其數據綁定類型為上下文,選擇上下文為登錄表單。

      image.png

    2. 選中文本,設置其綁定的字段,分別是用戶名和密碼。

      image.png

    3. 選中登錄按鈕,設置點擊事件為調用后端邏輯流。

      image.png

    4. 創建后端邏輯流,命名為用戶登錄,并與登錄按鈕綁定

      image.png

    5. 編排邏輯流,將登錄表單設置為入參的對象類型,在左側面板事件 > 判斷拖入畫布,并對用戶對象進行非空判斷。

      說明

      “用戶名及密碼為非空”作為判斷條件進行演示:

      • 若為true,則打開列表頁。

      • 若為false,則顯示錯誤消息:“您登錄的用戶名或密碼為空,請重新嘗試!”。

    6. 點擊判斷,條件設置為如下圖所示,點擊確定。

      image.png

    7. 在左側面板拖入前端操作 > 顯示消息、賬號操作 > 用戶登錄、前端操作 > 顯示頁面到相應位置,如下圖所示:

      image.png

      • 顯示登錄失敗消息。

        image.png

      • 獲取用戶登錄信息。

        image.png

      • 顯示登錄成功后的列表頁。

        image.png

  6. 搭建注冊頁。

    1. 回到頁面管理,將登錄頁面設置為首頁,復制一個登錄頁,在此基礎上搭建注冊頁。

      image.png

    2. 單擊進入注冊頁,修改頁面UI,如下圖所示:

      image.png

    3. 單擊注冊按鈕,設置點擊事件為調用后端邏輯流,創建一個用戶注冊的邏輯流并完成綁定。

      image.png

  7. 搭建用戶注冊的后端邏輯流。

    1. 將左側欄賬號操作 > 注冊用戶、前端操作 > 顯示頁面組件拖入面板,如下圖所示:

      image.png

    2. 單擊注冊用戶,設置其屬性。

      image.png

    3. 單擊顯示頁面,頁面選擇登錄。

      image.png

  8. 對待辦事項列表頁進行優化。

    1. 添加動態姓名及友好引導。

      1. 在列表左上角拖入三個文本,并將第二個文本外面包裹一個Data數據容器:

        image.png

      2. 點擊右側邏輯流選擇框,添加一個后端邏輯流:獲取登錄用戶,邏輯流返回值設置為 系統數據模塊 中的 系統用戶 數據模型。image.png

      3. 單擊保存,創建邏輯流,自動完成邏輯流綁定。

        image.png

    2. 創建獲取登錄用戶的后端邏輯流。

      1. 將左側賬號操作 > 獲取登錄賬號組件拖入面板,并單擊結束按鈕進行返回值設置。

        image.png

      2. 單擊返回值,設置表達式,單擊左側CurrentUser,點擊確定

        image.png

      3. 單擊Data包裹的文本,選擇動態顯示名

        image.png

    3. 添加用戶登出功能。

      1. 在列表左上角拖入一個文本,命名為登出,調整文字樣式。

        image.png

      2. 登出創建后端邏輯流,命名為用戶登出。

      3. 進入用戶登出的后端邏輯流,依次拖入賬號操作 > 用戶登出、前端操作 > 顯示首頁組件。

        image.png

      4. 單擊登出,選擇調用后端邏輯流,選擇用戶登出

        image.png

  9. 搭建完畢,單擊預覽,查看效果,并發布版本:登錄注冊,查看提交歷史

    image.png

列表頁集成今日天氣接口

為了使待辦事項管理平臺界面顯示更豐富友好,我們可以在頁面標題位置,增加顯示當日天氣信息。如下圖所示:

image.png

搭建過程如下:

  1. 首先需要在高德控制臺申請一個key。

    1. 點擊進入高德控制臺,注冊并登錄認證后,創建一個應用。

      image.png

    2. 應用創建好后,添加key,點擊提交,會得到一個key。

      image.png

      image.png

    3. 復制key,回到魔筆控制臺,單擊左側功能區的集成管理,單擊添加連接器,選擇API集成,添加高德天氣的接口:https://restapi.amap.com/v3/weather/weatherInfo?key=申請的key&city=110000,該接口定點提供北京地區的天氣情況。

      image.png

  2. 設置結構體

    1. 打開調測模式,點擊測試,獲得接口返回信息,單擊解析至Response Body

    2. 將接口返回信息回填至接口定義中,平臺會自動生成對應的結構體文件,確認無誤后單擊保存結構體,并單擊確定保存接口定義。

      image

    3. 數據模型中單擊結構體,可看到對應保存的結構體文件。

      image

  3. 設置結構體實體轉換

    1. 因頁面只能與實體進行綁定,故需要對結構體與實體進行映射轉換操作。單擊數據模型 > 結構體實體轉換 > 添加結構體轉實體的映射。輸入名稱為北京天氣,選擇結構體為@Response 北京天氣,單擊確定

      image

    2. 進入北京天氣的結構體轉實體的映射文件設置,單擊自動生成映射,選擇內存實體。完成后,單擊完成

      image

    3. 因該數據不需保存至數據庫,故選擇內存實體,確定之后,平臺根據結構體關系生成對應的實體關系。

      image

  4. 綁定天氣信息。

    1. 打開待辦事項列表頁,在該頁的標題欄中進行頁面擴展,重點是在登出左側拖入文本組件用于展示溫度信息。

    2. 拖入3個文本組件到相應位置,將第二個文本用Data數據容器包裹起來,將3個文本組件和1個登出文本組件外面包裹一個容器,并設置容器寬度高度為自適應。

      image.png

  5. 創建獲取天氣對象的前端邏輯流。

    1. 左側選擇邏輯編排image.png,單擊添加邏輯流,命名為獲取天氣對象,選擇前端流程,單擊確定

      image.png

    2. 進入邏輯流面板,依次拖入其他操作 > 后端調用指定的集成API、結構體操作 > 結構體對象轉實體對象、對象操作 > 查詢對象、列表操作 > 操作列表,如下圖所示:

      image.png

      • 單擊后端調用指定的集成API,設置屬性。

        image.png

      • 單擊結構體對象轉實體對象,設置屬性。

        image.png

      • 單擊查詢對象,關聯北京天氣。

        image.png

      • 單擊操作列表,設置屬性。

        image.png

      • 單擊結束按鈕,設置實體類型及返回值。

        image.png

  6. 前端文本動態顯示溫度。

    返回待辦事項列表頁,點擊文本的Data數據容器,選擇邏輯流,選擇獲取天氣對象

    image.png

    單擊文本,選擇動態,選擇temperature

    image.png

  7. 搭建完畢,進入預覽,已經成功展示來自接口的信息。

    image.png

  8. 單擊預覽,查看效果,并提交版本:集成天氣。

    點擊左側面板最下方按鈕image.png,查看版本信息。

    image.png