方案概覽

本案例將給大家演示，如何通過魔筆搭建待辦應用。

前期準備

1. 本章將使用 MySQL 數據庫完成數據建模，若您還未部署可公網訪問的數據庫，推薦您使用阿里云 RDS 完成數據庫的開通 。若您初次使用阿里云 RDS，請先了解 RDS 使用流程。第一步：快捷創建RDS MySQL實例與配置數據庫

創建集成

1. 進入魔筆控制臺 - "資源" - "集成" - 創建一個 MySQL 集成

   

2. 配置 MySQL 鏈接信息 第二步：連接RDS MySQL實例

3. 確認保存

創建 todo 顯示列表

1. 選擇添加（①）組件 table（②），拖動表格到畫布（③）上

2. 

3. 配置數據源：將右側數據源中的內容用“{{todoRes.data}}”替換

1. 配置數據列：在右側“數據列配置”中添加操作列，參考下面截圖進行配置

// 優先級 映射規則
{{ currentItem.priority == 0 ? "高" :  currentItem.priority == 1 ? "中" :  currentItem.priority == 2 ? "低" : "" }}
// 優先級 顏色 
{{ currentItem.priority == 0 ? "red" :  currentItem.priority == 1 ? "grey" :  currentItem.priority == 2 ? "pick" : "black" }}

// 狀態 映射規則
{{ currentItem.state == 0 ? "未開始" :  currentItem.state == 1 ? "進行中" :  currentItem.state == 2 ? "已完成" : "" }}
// 狀態 狀態配置
{{ currentItem.state == 0 ? "warning" :  currentItem.state == 1 ? "processing" :  currentItem.state == 2 ? "success" : "default" }}

// 創建時間 格式化
YYYY-MM-DD

// 查出Demo的數據結構
[{"id":1,"title":"Demo","description":"Demo","priority":"0","state":"0","over_time":null,"create_time":1721987000879,"update_time":1721987000879,"plan_time":null}]

搭建在頁面中添加數據。其中四個輸入（inputTitle，inputDesc，inputPro，inputState），一個按鈕

創建應用

1. 進入魔筆控制臺 應用創建一個應用

   

2. 創建完成應用會自動打開。

   

3. 創建集成（createTable）

   

①：創建集成

②：選擇集成資源為剛創建的數據庫集成資源

③：雙擊 action1 修改名稱為 createTable

4. 創建 todo 表結構

   

   把下面數據庫代碼輸入到集成配置中的 SQL 語句中，點擊運行

   create TABLE todo(
       id INT AUTO_INCREMENT PRIMARY KEY,
       title VARCHAR(80),
       description VARCHAR(1000),
       priority VARCHAR(1),
       state VARCHAR(1),
       over_time bigint ,
       create_time bigint ,
       update_time bigint ,
       plan_time bigint
   );

4. 查詢 todo 表（todoRes）

   

   SQL 語言輸入SELECT * FROM todo點擊運行，這里配置為自動運行

5. 為 todo 表新增數據，參數和SQL語句填完后點擊運行。在上一步就點擊運行就可以看到剛剛插入的數據。（insertTodo）

   

   INSERT INTO todo(title,description,priority,state,create_time,update_time) values 
   ({{title}},{{description}},{{priority}},{{state}},{{create_time}},{{update_time}});

//狀態 映射規則
[{
  "name": "未開始", value: "0"
}, {
  "name": "進行中", value: "1"
}, {
  "name": "已完成", value: "2"
}]

//狀態 標題
{{currentItem.name}}
// 狀態 值
{{currentItem.value}}

// 提交 點擊 執行腳本
insertTodo.trigger({
"title":inputTitle.value,
"description":inputDesc.value,
"priority":inputPro.value,
"state": inputState.value,
"create_time":new Date().getTime(),
"update_time":new Date().getTime()
});

6. 配置數據添加回調

7. 點擊右上角預覽，預覽之后，輸入標題，描述，點擊提交

10. 發布（點擊右上角發布，輸入描述信息），發布成功后可以點擊訪問應用去打開應用

    

11. 登錄（點擊阿里云賬號登錄）

修改新增為彈窗抽屜樣式

1. 拖動抽屜組件到右側頁面中

2. 為側邊欄增加輸入框，以及提交按鈕執行腳本，模仿上面步驟進行搭建

3. 為提交按鈕新增關閉抽屜

4. 為頁面新增打開抽屜按鈕，按鈕的點擊事件為控制組件（2）show 抽屜組件（1）

編輯待辦

1. 新增變量（editTodoCache）

   1. 創建待辦變更的彈窗，并完成編輯內容的布局。

      組件屬性	命名	默認值
      標題	edit_input_title	{{editTodoCache.value.title || ""}}
      描述	edit_input_desc	{{editTodoCache.value.description || "" }}
      優先級	edit_input_pro	{{editTodoCache.value.priority || "0"}}
      狀態	edit_input_state	{{editTodoCache.value.state || "0"}}

2. 創建待辦變更的集成（changeTodo）

   1. 配置SQL語句

      SQL

      UPDATE todo set title = {{title}} , description = {{description}} , priority = {{priority}} , over_time = {{over_time}} , plan_time = {{plan_time}} , state = {{state}} , update_time = {{new Date().getTime()}} WHERE id = {{id}}

   2. 配置集成回調

3. 待辦編輯彈窗提交按鈕配置

   1. 修改編輯的配置代碼為

      changeTodo.trigger({
        "title": edit_input_title.value,
        "description": edit_input_desc.value,
        "priority": edit_input_pro.value,
        "state": edit_input_state.value,
        "over_time": editTodoCache.value.over_time,
        "plan_time": editTodoCache.value.plan_time,
        "id": editTodoCache.value.id
      });

4. 配置（table1）的操作列為 編輯，并加上臨時變量的賦值。

   editTodoCache.setValue(currentItem);
   editTodoFrame.show();

增加待辦完成狀態變更

1. 克隆（changeTodo）為 （doneTodo）作為完成的集成配置

2. 編輯 doneTodo 以達到完成的效果

   1. 刪除參數，僅保留（id）參數

   2. 修改 SQL 語句為 UPDATE todo set over_time = {{new Date().getTime()}} , state = '2' , update_time = {{new Date().getTime()}} WHERE id = {{id}}

3. 配置（table1）的操作，新增完成按鈕參數：{ "id": {{currentItem.id}} }

4. 為完成操作添加提示，在（doneTodo）的成功回調中增加顯示消息。

刪除待辦

1. 克隆（doneTodo）并重命名為（delTodo）SQL 語句：DELETE FROM todo WHERE id = {{id}}

2. 變更回調消息為”刪除成功“

3. 為 table1 添加操作列”刪除“

   1. 配置執行腳本

      var code = await mobi.showModal("刪除確認");
      if(code){
        delTodo.trigger({
          "id":currentItem.id
        });
      }

為應用添加布局

1. 在頁面&布局中新增一個布局，并變更名稱為（header）

2. 刪除不需要的左邊欄。

3. 刪除頂部菜單布局

4. 修改頂部 title 文本為”待辦應用“

5. 修改圖標為一個合適的圖標（臨時效果展示）

6. 首頁的頁面布局配置為創建的（header）

細節微調

• 配置 table 的高度為自定義：calc(var(--mobi-100vh) - 160px)

• 頂部欄配置用戶頭像節點，添加默認圖片{{mobi.currentUser.profilePhotoUrl}}

• 配置用戶昵稱為固定寬度，并且添加懸浮提示（Tips）

• 為頂部按鈕新增退出按鈕

• 調增 Table 的寬度，按住 ctrl 可以看到目前組件的定位位置，同時按上，左去調整組件大小，單獨上下左右去變更組件的位置