第五章 数据对接、交互讲解_第1页
第五章 数据对接、交互讲解_第2页
第五章 数据对接、交互讲解_第3页
第五章 数据对接、交互讲解_第4页
第五章 数据对接、交互讲解_第5页
已阅读5页，还剩43页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

数据对接、交互——浙江交通职业技术学院JS入门0

1数据对接02响应交互03CONTENTS目录PART01INTRODUCTIONTOJSJS入门SLScalar函数：JavaScript：是互联网上最流行的脚本语言，这门语言可用于HTML和web，更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备JS文档的后缀名：.js两种使用方法：内部的JavaScript和外部的JavaScript轻量级编程语言可插入HTML页面可由现代浏览器执行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语句用于向浏览器发出命令语句是用分号分隔JavaScript函数：JavaScript语句可以写在函数内，函数可以重复引用JS语法JavaScript关键字：JavaScript关键字用于标识要执行的操作JavaScript保留了一些关键字，这些关键字在当前的语言版本中并没有使用，但在以后JavaScript扩展中会用到JS语法JavaScript中最重要的保留关键字（按字母顺序）JavaScript注释：不是所有的JavaScript语句都是"命令"。双斜杠“//”和“/**/”后的内容会被浏览器忽略JS数据类型：值类型(基本类型)：字符串（String）、数字(Number)、布尔(Boolean)、空（Null）、未定义（Undefined）、Symbol引用数据类型（对象类型）：对象(Object)、数组(Array)、函数(Function)，还有两个特殊的对象：正则（RegExp）和日期（Date）JS语法JS语法if判断语句switch判断语句while循环dowhile循环三元（三目）运算符for循环3大判断语句&3大循环语句JS语法if判断语句：语法一：if(判断条件){代码块}如果if小括号中的判断条件是成立的，才会执行{}中的代码块，如果条件不成立，那么就不会执行。语法二：if(判断条件){代码块}else{代码块}如果if小括号中的判断条件成立，就执行if后面的{}中的代码,如果条件不成立，就执行else后面{}中的代码。注：2个{}只能执行其中的一个JS语法switch判断语句：语法：switch(你要判断的内容){

case情况1：满足情况1执行的语句breakcase情况2：满足情况2执行的语句breakcase情况3：满足情况3执行的语句breakcase情况4：满足情况4执行的语句breakdefault:所有情况都不满足就执行}注意：1、break单词可写可不写的，如果不写，会一直向下执行(穿透效果)，直到碰到break，或者整个情况执行完毕才会停止。2、default可写可不写，当所有case均不满足时执行default.

JS语法三元（三目）运算符：主要作用：用来做判断，if...else的简写形式语法：条件?对:不对

当条件成立的时候就执行冒号前面的语句，

当条件不成立的时候就执行冒号后面的语句缺点：条件成立和不成立执行的语句只能够写一句话，而if...else可以写多句话JS语法while循环：特点：只要条件表达式为真才会执行后面{}中的代码大括号中的代码有可能会被执行多次while的执行流程：（1）首先会判断条件表达式是否为真，如果为真就执行后面{}中的代码；（2）执行完后面{}中的代码，会再次判断条件表达式是否还为真；（3）如果条件表达式为真，那么会再次执行后面{}中的代码；（4）重复（1）（3），直到条件表达式不会为真为止；if的特点：只有条件表达式为真才会执行后面{}中的代码，大括号中的代码只会被执行一次。dowhile循环：特点：无论条件表达式是否为真，循环体都会被执行一次for循环：特点：和while循环的特点一样，只要条件表达式为真，才会执行循环体for循环的执行流程：

（1）首先会执行初始化表达式，并且只会执行一次

（2）判断条件表达式是否为真，如果条件表达式为

真，就执行循环体

（3）执行完循环体就会执行循环后增量表达式

（4）重复（2）（3），直到条件表达式不为真为止JS语法PART02DATADOCKING数据对接数据连接器作：作用：作用：实现了对各种数据服务API的调用执行，同时将API执行结果返回给前端，并且作为数据提供者给页面、组件、自定义函数和其他数据连接器绑定使用构成：041、基础信息6、依赖关系2、属性配置3、数据参数4、事件配置5、通知配置0106050302数据连接器构成数据连接器作：作用：名称：数据连接器名称，用于区分业务功能，

用户自己输入和修改接口类型：对应数据服务中的类型，有数据库服务

HTTPREST服务、SOAP服务、JAVA服务、

系统内置服务目标接口：需要调用执行接口的名称1、基础信息：数据连接器作：作用：进入页面后加载数据：页面加载后，立马执行该数据连接器，一般使用于需要有初始数据的组件中。发送方式：发送请求的数据格式即Content-Type。

数据：application/json；文件：multipart/form-data接收方式：返回结果的解析格式。

数据：返回数据为json格式；

文本：返回数据为text，页面上按照字符串文本使用；

文件：返回数据为文件流，自动下载文件Document对象：返回数据为text，前端解析成为Docunment对象加载中：发送接口请求后，再等待数据返回的过程中，是否开启页面提示。2、属性配置：数据连接器作：作用：数据参数定义了接口的请求输入参数，接口参数修改后可以通过刷新按钮更新参数列表每个参数可以绑定到页面组件值或者其他数据提供者。平台在执行数据连接器时，会先获取绑定的参数值，再封装成请求参数发送到后端统一处理。导出接口配置：方便用户对表格的数据进行导出

首先数据连接器的接口需要先绑定xxxxx_downloadExcel接口；

可以绑定需要进行进行导出的数据信息。3、数据参数：数据连接器作：作用：数据连接器4个生命周期：请求数据前、成功、失败、请求数据后请求数据前：用于预处理参数，或者在发送该请求前先做别的事情成功：接口调用成功后回调，自定义成功条件失败：接口调用失败后回调，自定义失败条件请求数据后：接口返回后即回调，无论结果是什么4、事件配置：数据连接器作：作用：通知配置是为了简化某些固定业务配置流程，如：删除数据前，一般要配置一个提示框，提示是否确认删除，选择确认才会执行删除请求，选择取消就关闭提示框。5、通知配置：加载数据前通知确认：开启该选项，在调用数据连接器的时候，会弹出提示框，标题、内容、按钮名称自定义。通知标题：提示框的标题内容。通知内容：提示框中间的提示内容。确认按钮名称：确认按钮的名称，点击后会执行该数据连接器。取消按钮名称：取消按钮的名称，点击后不执行数据连接器，同时关闭提示框。加载数据后确认通知：开启该选项，在调用数据连接器完成后，会弹出提示框/提醒框，内容文本、显示时长等内容支持自定义。数据连接器作：作用：通知配置是为了简化某些固定业务配置流程，如：删除数据前，一般要配置一个提示框，提示是否确认删除，选择确认才会执行删除请求，选择取消就关闭提示框。5、通知配置：判断情况：下拉选择数据连接器返回的结果字段，根据返回结果值，判断执行成功与否值等于：填写期望返回值通知类型：支持提示框、提醒框两种类型。数据连接器作：作用：支持查看当前数据连接器绑定了的数据连接器、组件，以及被哪些组件和数据连接器所绑定。支持快捷解绑。6、依赖关系：数据连接器作：作用：数据连接器除了构建请求、发起请求、处理结果以外，还作为数据提供者的角色，提供数据给页面组件绑定。创建好数据连接器后，可以在绑定页面使用该数据连接器返回的数据。数据提供者数据连接器作：作用：1、点击“+”，选择数据服务类型，再选择已经开发完成的数据服务，填写数据连接器名称，完成创建。2、创建完成后，即可看到数据库连接器列表，以及各数据连接器的配置信息。创建数据连接器数据连接器作：作用：数据连接器作为前后端对接的桥梁，页面上需要进行服务端数据查询、更新、插入、删除时，就需要执行对应的数据连接器，数据连接器的执行方式有以下5种：执行方式进入页面后加载组件事件中调用响应中调用数据连接器事件中调用JS函数中调用数据连接器作：作用：通常数据连接器传参方式是通过绑定某个组件或者数据连接器的值来完成，每个参数只能绑定一个数据，如何实现每次调用时参数都不同。传参方式参数绑定自定义函数JS中调用并动态传参数据连接器作：作用：数据连接器的请求是异步的，接口之间存在参数依赖时，如何让第二个接口可以获取到第一个接口返回的结果作为请求参数。执行顺序通过代码控制先后，使用js的then语法如下：数据绑定作：作用：数据绑定就像一个桥梁连接了数据提供者和数据使用者，将一个数据赋值给某个属性，这里的属性包含：组件的属性、数据连接器的属性、响应中的属性。操作方式都是通过点击如下：数据绑定作：作用：数据绑定可以选择多种类型的数据，分为组件、数据连接器、数据字典、页面参数、系统参数、上传资源。010203040506上传资源：可以上传图片、视频、3D模型等文件，并作为数据提供者页面参数：从页面的请求url中获取到的参数，要先在页面->属性->页面参数中添加参数系统参数：平台内置系统参数数据。数据字典：平台内置数据字典数据。数据连接器：数据连接器执行数据服务API后返回的数据会作为数据提供者，给使用者绑定组件数据：组件数据包含页面上所有组件的各个属性数据，同时某些组件也会开放出特殊数据数据绑定作：作用：每个组件的数据都有各自的格式要求，当遇到目标数据不符合格式要求的时候，可以通过自定义函数实现数据格式的转换点击自定义函数后，系统会自动生成绑定到函数名称，用户可以点击选择不同的数据来源，数据来源会自动作为函数的入参，用户只需要在下面编写逻辑转换代码，最终返回新的数据数据绑定作：作用：当一个组件属性绑定了其他内容时，被绑定的内容如果发生变化，会通知组件重新加载该属性并刷新组件场景1：年月日单选框切换时，图表跟随变化。场景2：数据连接器数据更新后，表格数据自动刷新。场景3：自定义函数中的参数改变后，组件重新执行自定义函数，刷新对应内容。数据转换作：作用：场景一：在平台中，某些组件的数据需要绑定的数据格式是key:value格式，但是通过数据连接器返回的不是想要的格式数据，这个时候就需要通过自定义函数来进行数据的转换1.首先组件的数据需要先进行动态数据（服务端）数据的绑定2.通过js代码进行数据的转换3.通过控制台打印出数据结果是否是想要的结果通过js代码进行数据的转换以组件button为例：点击鼠标移人鼠标移出鼠标按下鼠标按下以弹框为例：显示关闭

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论