第五章 數據對接、交互講解_第1頁
第五章 數據對接、交互講解_第2頁
第五章 數據對接、交互講解_第3頁
第五章 數據對接、交互講解_第4頁
第五章 數據對接、交互講解_第5頁
已閱讀5頁，還剩43頁未讀， 繼續(xù)免費閱讀

下載本文檔

版權說明：本文檔由用戶提供并上傳，收益歸屬內容提供方，若內容存在侵權，請進行舉報或認領

文檔簡介

數據對接、交互——浙江交通職業(yè)技術學院JS入門0

1數據對接02響應交互03CONTENTS目錄PART01INTRODUCTIONTOJSJS入門SLScalar函數：JavaScript：是互聯(lián)網上最流行的腳本語言，這門語言可用于HTML和web，更可廣泛用于服務器、PC、筆記本電腦、平板電腦和智能手機等設備JS文檔的后綴名：.js兩種使用方法：內部的JavaScript和外部的JavaScript輕量級編程語言可插入HTML頁面可由現代瀏覽器執(zhí)行JS簡介SLScalar函數：JS使用內部的JavaScript：HTML中的Javascript腳本代碼必須位于<script>與</script>標簽之間。Javascript腳本代碼可被放置在HTML頁面的<body>和<head>部分中。<body>中的JavaScript<head>中的JavaScriptSLScalar函數：JS使用外部的JavaScript：可以把腳本保存到外部文件中，外部文件通常包含被多個網頁使用的代碼外部JavaScript文件的文件擴展名是.js如需使用外部文件，請在<script>標簽的"src"屬性中設置該.js文件可以將腳本放置于<head>或者<body>中，放在<script>標簽中的腳本與外部引用的腳本運行效果完全一致字符串（String）字面量可以使用單引號或雙引號數組（Array）字面量用于定義數組表達式字面量用于計算數字（Number）字面量可以是整數或者是小數，或者是科學計數(e)對象（Object）字面量用于定義對象函數（Function）字面量用于定義函數JS語法JS字面量JavaScript變量：在編程語言中，變量用于存儲數據值JavaScript使用關鍵字var來定義變量，使用等號來為變量賦值JavaScript操作符：JavaScript使用算術運算符來計算值JS語法javaScript使用賦值運算符給變量賦值JavaScript語句：在HTML中，JavaScript語句用于向瀏覽器發(fā)出命令語句是用分號分隔JavaScript函數：JavaScript語句可以寫在函數內，函數可以重復引用JS語法JavaScript關鍵字：JavaScript關鍵字用于標識要執(zhí)行的操作JavaScript保留了一些關鍵字，這些關鍵字在當前的語言版本中并沒有使用，但在以后JavaScript擴展中會用到JS語法JavaScript中最重要的保留關鍵字（按字母順序）JavaScript注釋：不是所有的JavaScript語句都是"命令"。雙斜杠“//”和“/**/”后的內容會被瀏覽器忽略JS數據類型：值類型(基本類型)：字符串（String）、數字(Number)、布爾(Boolean)、空（Null）、未定義（Undefined）、Symbol引用數據類型（對象類型）：對象(Object)、數組(Array)、函數(Function)，還有兩個特殊的對象：正則（RegExp）和日期（Date）JS語法JS語法if判斷語句switch判斷語句while循環(huán)dowhile循環(huán)三元（三目）運算符for循環(huán)3大判斷語句&3大循環(huán)語句JS語法if判斷語句：語法一：if(判斷條件){代碼塊}如果if小括號中的判斷條件是成立的，才會執(zhí)行{}中的代碼塊，如果條件不成立，那么就不會執(zhí)行。語法二：if(判斷條件){代碼塊}else{代碼塊}如果if小括號中的判斷條件成立，就執(zhí)行if后面的{}中的代碼,如果條件不成立，就執(zhí)行else后面{}中的代碼。注：2個{}只能執(zhí)行其中的一個JS語法switch判斷語句：語法：switch(你要判斷的內容){

case情況1：滿足情況1執(zhí)行的語句breakcase情況2：滿足情況2執(zhí)行的語句breakcase情況3：滿足情況3執(zhí)行的語句breakcase情況4：滿足情況4執(zhí)行的語句breakdefault:所有情況都不滿足就執(zhí)行}注意：1、break單詞可寫可不寫的，如果不寫，會一直向下執(zhí)行(穿透效果)，直到碰到break，或者整個情況執(zhí)行完畢才會停止。2、default可寫可不寫，當所有case均不滿足時執(zhí)行default.

JS語法三元（三目）運算符：主要作用：用來做判斷，if...else的簡寫形式語法：條件?對:不對

當條件成立的時候就執(zhí)行冒號前面的語句，

當條件不成立的時候就執(zhí)行冒號后面的語句缺點：條件成立和不成立執(zhí)行的語句只能夠寫一句話，而if...else可以寫多句話JS語法while循環(huán)：特點：只要條件表達式為真才會執(zhí)行后面{}中的代碼大括號中的代碼有可能會被執(zhí)行多次while的執(zhí)行流程：（1）首先會判斷條件表達式是否為真，如果為真就執(zhí)行后面{}中的代碼；（2）執(zhí)行完后面{}中的代碼，會再次判斷條件表達式是否還為真；（3）如果條件表達式為真，那么會再次執(zhí)行后面{}中的代碼；（4）重復（1）（3），直到條件表達式不會為真為止；if的特點：只有條件表達式為真才會執(zhí)行后面{}中的代碼，大括號中的代碼只會被執(zhí)行一次。dowhile循環(huán)：特點：無論條件表達式是否為真，循環(huán)體都會被執(zhí)行一次for循環(huán)：特點：和while循環(huán)的特點一樣，只要條件表達式為真，才會執(zhí)行循環(huán)體for循環(huán)的執(zhí)行流程：

（1）首先會執(zhí)行初始化表達式，并且只會執(zhí)行一次

（2）判斷條件表達式是否為真，如果條件表達式為

真，就執(zhí)行循環(huán)體

（3）執(zhí)行完循環(huán)體就會執(zhí)行循環(huán)后增量表達式

（4）重復（2）（3），直到條件表達式不為真為止JS語法PART02DATADOCKING數據對接數據連接器作：作用：作用：實現了對各種數據服務API的調用執(zhí)行，同時將API執(zhí)行結果返回給前端，并且作為數據提供者給頁面、組件、自定義函數和其他數據連接器綁定使用構成：041、基礎信息6、依賴關系2、屬性配置3、數據參數4、事件配置5、通知配置0106050302數據連接器構成數據連接器作：作用：名稱：數據連接器名稱，用于區(qū)分業(yè)務功能，

用戶自己輸入和修改接口類型：對應數據服務中的類型，有數據庫服務

HTTPREST服務、SOAP服務、JAVA服務、

系統(tǒng)內置服務目標接口：需要調用執(zhí)行接口的名稱1、基礎信息：數據連接器作：作用：進入頁面后加載數據：頁面加載后，立馬執(zhí)行該數據連接器，一般使用于需要有初始數據的組件中。發(fā)送方式：發(fā)送請求的數據格式即Content-Type。

數據：application/json；文件：multipart/form-data接收方式：返回結果的解析格式。

數據：返回數據為json格式；

文本：返回數據為text，頁面上按照字符串文本使用；

文件：返回數據為文件流，自動下載文件Document對象：返回數據為text，前端解析成為Docunment對象加載中：發(fā)送接口請求后，再等待數據返回的過程中，是否開啟頁面提示。2、屬性配置：數據連接器作：作用：數據參數定義了接口的請求輸入參數，接口參數修改后可以通過刷新按鈕更新參數列表每個參數可以綁定到頁面組件值或者其他數據提供者。平臺在執(zhí)行數據連接器時，會先獲取綁定的參數值，再封裝成請求參數發(fā)送到后端統(tǒng)一處理。導出接口配置：方便用戶對表格的數據進行導出

首先數據連接器的接口需要先綁定xxxxx_downloadExcel接口；

可以綁定需要進行進行導出的數據信息。3、數據參數：數據連接器作：作用：數據連接器4個生命周期：請求數據前、成功、失敗、請求數據后請求數據前：用于預處理參數，或者在發(fā)送該請求前先做別的事情成功：接口調用成功后回調，自定義成功條件失敗：接口調用失敗后回調，自定義失敗條件請求數據后：接口返回后即回調，無論結果是什么4、事件配置：數據連接器作：作用：通知配置是為了簡化某些固定業(yè)務配置流程，如：刪除數據前，一般要配置一個提示框，提示是否確認刪除，選擇確認才會執(zhí)行刪除請求，選擇取消就關閉提示框。5、通知配置：加載數據前通知確認：開啟該選項，在調用數據連接器的時候，會彈出提示框，標題、內容、按鈕名稱自定義。通知標題：提示框的標題內容。通知內容：提示框中間的提示內容。確認按鈕名稱：確認按鈕的名稱，點擊后會執(zhí)行該數據連接器。取消按鈕名稱：取消按鈕的名稱，點擊后不執(zhí)行數據連接器，同時關閉提示框。加載數據后確認通知：開啟該選項，在調用數據連接器完成后，會彈出提示框/提醒框，內容文本、顯示時長等內容支持自定義。數據連接器作：作用：通知配置是為了簡化某些固定業(yè)務配置流程，如：刪除數據前，一般要配置一個提示框，提示是否確認刪除，選擇確認才會執(zhí)行刪除請求，選擇取消就關閉提示框。5、通知配置：判斷情況：下拉選擇數據連接器返回的結果字段，根據返回結果值，判斷執(zhí)行成功與否值等于：填寫期望返回值通知類型：支持提示框、提醒框兩種類型。數據連接器作：作用：支持查看當前數據連接器綁定了的數據連接器、組件，以及被哪些組件和數據連接器所綁定。支持快捷解綁。6、依賴關系：數據連接器作：作用：數據連接器除了構建請求、發(fā)起請求、處理結果以外，還作為數據提供者的角色，提供數據給頁面組件綁定。創(chuàng)建好數據連接器后，可以在綁定頁面使用該數據連接器返回的數據。數據提供者數據連接器作：作用：1、點擊“+”，選擇數據服務類型，再選擇已經開發(fā)完成的數據服務，填寫數據連接器名稱，完成創(chuàng)建。2、創(chuàng)建完成后，即可看到數據庫連接器列表，以及各數據連接器的配置信息。創(chuàng)建數據連接器數據連接器作：作用：數據連接器作為前后端對接的橋梁，頁面上需要進行服務端數據查詢、更新、插入、刪除時，就需要執(zhí)行對應的數據連接器，數據連接器的執(zhí)行方式有以下5種：執(zhí)行方式進入頁面后加載組件事件中調用響應中調用數據連接器事件中調用JS函數中調用數據連接器作：作用：通常數據連接器傳參方式是通過綁定某個組件或者數據連接器的值來完成，每個參數只能綁定一個數據，如何實現每次調用時參數都不同。傳參方式參數綁定自定義函數JS中調用并動態(tài)傳參數據連接器作：作用：數據連接器的請求是異步的，接口之間存在參數依賴時，如何讓第二個接口可以獲取到第一個接口返回的結果作為請求參數。執(zhí)行順序通過代碼控制先后，使用js的then語法如下：數據綁定作：作用：數據綁定就像一個橋梁連接了數據提供者和數據使用者，將一個數據賦值給某個屬性，這里的屬性包含：組件的屬性、數據連接器的屬性、響應中的屬性。操作方式都是通過點擊如下：數據綁定作：作用：數據綁定可以選擇多種類型的數據，分為組件、數據連接器、數據字典、頁面參數、系統(tǒng)參數、上傳資源。010203040506上傳資源：可以上傳圖片、視頻、3D模型等文件，并作為數據提供者頁面參數：從頁面的請求url中獲取到的參數，要先在頁面->屬性->頁面參數中添加參數系統(tǒng)參數：平臺內置系統(tǒng)參數數據。數據字典：平臺內置數據字典數據。數據連接器：數據連接器執(zhí)行數據服務API后返回的數據會作為數據提供者，給使用者綁定組件數據：組件數據包含頁面上所有組件的各個屬性數據，同時某些組件也會開放出特殊數據數據綁定作：作用：每個組件的數據都有各自的格式要求，當遇到目標數據不符合格式要求的時候，可以通過自定義函數實現數據格式的轉換點擊自定義函數后，系統(tǒng)會自動生成綁定到函數名稱，用戶可以點擊選擇不同的數據來源，數據來源會自動作為函數的入參，用戶只需要在下面編寫邏輯轉換代碼，最終返回新的數據數據綁定作：作用：當一個組件屬性綁定了其他內容時，被綁定的內容如果發(fā)生變化，會通知組件重新加載該屬性并刷新組件場景1：年月日單選框切換時，圖表跟隨變化。場景2：數據連接器數據更新后，表格數據自動刷新。場景3：自定義函數中的參數改變后，組件重新執(zhí)行自定義函數，刷新對應內容。數據轉換作：作用：場景一：在平臺中，某些組件的數據需要綁定的數據格式是key:value格式，但是通過數據連接器返回的不是想要的格式數據，這個時候就需要通過自定義函數來進行數據的轉換1.首先組件的數據需要先進行動態(tài)數據（服務端）數據的綁定2.通過js代碼進行數據的轉換3.通過控制臺打印出數據結果是否是想要的結果通過js代碼進行數據的轉換以組件button為例：點擊鼠標移人鼠標移出鼠標按下鼠標按下以彈框為例：顯示關閉

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網頁內容里面會有圖紙預覽，若沒有圖紙預覽就沒有圖紙。
  • 4. 未經權益所有人同意不得將文件中的內容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網僅提供信息存儲空間，僅對用戶上傳內容的表現方式做保護處理，對用戶上傳分享的文檔內容本身不做任何修改或編輯，并不能對任何下載內容負責。
  • 6. 下載文件中如有侵權或不適當內容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論