T语言与快速开发平台之天宇联web前端开发指南
来源:互联网 发布:nba历届得分王及数据 编辑:程序博客网 时间:2024/04/25 08:52
天宇联web前端开发指南
1. 定义
web前端是指由html/htm静态页组成的而不是由模板生成的各种复杂页面,包括html5页面。一般是ui设计出效果图后由web前端工程师生成的与数据库无关的全由“死数据”组成的页面。页面样式基本已生成,下一步工作就是与动态交互,读写数据库的内容(一般由接口调用完成)。
2. 每个页的head部需要调用平台通用方法的ttyu.common2.js文件
ttyu.common2.js用到了jquery的方法,所以调用前先要调用 jquery.min.js
示例:
<head>
<script src="http://ttyu.net/file/js/jquery.min.js"type="text/javascript" ></script>
<script src="http://ttyu.net/file/js/ttyu.common2.js"type="text/javascript"></script>
</head>
注:js文件可以是服务器上的也可是本地的。
ttyu.common1.js版本号为1的是没有跨域功能的同步方法
ttyu.common2.js版本号为2的是有跨域功能的异步方法
说明:你也可把js文件下载到本地项目中,直接引用本地的js文件。如:
<head>
<script src="js/jquery.min.js"type="text/javascript" ></script>
<script src="js/ttyu.common2.js"type="text/javascript"></script>
</head>
3. 设置同步还是异步调用
同步:是指调用服务器的接口在本地完成,接口程序与html页面在同一站点下。
异步:是指调用服务器的接口可能不在本地,是通过远程访问完成的,接口程序与html页面在不同的站点下。异步要通过回调方法获取返回的值。而同步方式可直接返回调用接口的值。
如果html页面与服务接口放在一起建议用同步方式。
在ttyu.common2.js里的第一行
var rootUrl = "", serverUrl ="", iscallback = true, callbackReturn= '';
找到 iscallback = true ,该为找 iscallback = false;
iscallback = true;// 异步跨域
iscallback = false;// 同步不跨域
4. 服务地址(接口)初始化
在web页首页(一般是index.htm)启动时要指定服务地址,以方便以后所有操作通过接口读写数据库,进行动态交互。
net服务由xx.aspx文件传递接口
server.aspx:平台通用接口,如果项目中没有特别需要编写的业务接口可直接调用此服务。
调用方法是在initServer()方法里通过ttyu.initServerUrl()指定服务地址
示例:
function initServer(){
ttyu.initServerUrl('http://localhost:8080/app/server.aspx');//引用本地服务
//ttyu.initServerUrl('http://ttyu.net/server/bj111.aspx');//引用远程服务
}
5. 数据展示
页面中有些地方只是需要数据展现出来而不需要编辑。数据展现有的是多行显示,有的是一行显示。
多行数据显示:
上面是一个列表,显示9条数据,这些数据来自数据库表Sys_BaseData_Doc的字段Title。
显然9条数据的样式都相同,只是内容(Title)不同。这9条数据是由一条数据重复组合而成。当点击每行时才显示明细,这里要知道各行的唯一标识即id, 所以只需要取出id与Title的数据,当然一般是取出最后9行。
这里通过平台的keys指定数据源:keys='sql=select top 9 id,Titlefrom Sys_BaseData_Doc where ParentID=108 order by id desc'
sql表示是调用标准的sql语句
每行的id通过@id@表示变量将被实际的id替换,<!--Title-->表示要显示的内容变量,即表Sys_BaseData_Doc的字段Title。
示例:
<divclass="imgBox taxL2"style="line-height:24px;"keys='sql=select top 9 id,Title from Sys_BaseData_Doc whereParentID=108 order by id desc'>
<p><ahref="html/mediaInfor2.html?id=@id@ "rget="_blank"><!--Title--></a></p>
</div>
注:1.变量名必须与字段名完全相同,且区分大小写。2. keys键在父容器 (一般是div/table)中指定。3.循环部分一般只需要一行,在此行中按规则指定字段。
单行数据显示:
上面要显示当前用户的名称,显示只是一条数据,数据来自数据库的表sys_user_users的字段NAME。
这里通过平台的keys指定数据源: keys="getRowBySql&sql=selectNAME from sys_user_users where id = 23"
sql表示是调用标准的sql语句
<!-- NAME -->表示要显示的内容变量,即表sys_user_users的字段NAME。
示例1:
<divclass="hTeBox"keys="getRowBySql&sql=selectNAME from sys_user_users where id = 23">
<p><span>用户:</span><span><!--NAME--></span></p>
</div>
示例2:
显示表的多个字段
<divclass="hTeBox"keys="getRowBySql&sql=select* from sys_user_users where id = 23">
<p><span>用户:</span><span><!--NAME--></span></p>
<p><span>单位:</span><span><!--DEPTNAME--></span></p>
<p><span>职务:</span><span><!--POSITION--></span></p>
<p><span>座位:</span><span><!--AREA--></span></p>
<p><span>电话:</span><span><!--DUTYPHONE--></span><a href="#">[修改]</a></p>
<p><span>座机:</span><span><!--PHONE--></span><a href="#">[修改]</a></p>
<p><span>传真:</span><span><!--FAX--></span><a href="#">[修改]</a></p>
</div>
6. 数据插入
用户输入数据,平台把界面数据插入到数据库的表中。
1. 命名父容器的id,如ul1.
2. 命名各子控件id,与表对应的字段名相同。如日期控件关联'REDATE' 字段<input name='REDATE' id='REDATE' >
3. 在触发按钮的单击事件上增加“保存save()”方法<ahref="javascript:"onclick="save()">提交</a>
4. 编写save()调用ttyu.server.containerServiceJsonp.containerServiceJsonp的三个参数分别是容器id,参数和回调方法。
示例1:
function save() {
ttyu.server.containerServiceJsonp('ul1','action=insert&tableName=sys_user_news&TYPE=值班日志&NETTYPE=值班日志',function (result) {
alert("注册成功!");
});
}
注:1.参数值不要加引号’’如TYPE=值班日志。2.可用隐藏控件赋值 <input type="hidden"id="TITLE"name='TITLE'/>,常在页面装载后给这些隐藏控件赋值。
function loadAfter () {
//$("#REDATE").val(ttyu.date.getDateTime());
$("#REDATE").val('2016年5月20');
$("#TITLE").val('2016年5月20日志');
}
- T语言与快速开发平台之天宇联web前端开发指南
- T语言与快速开发平台之天宇联java开发平台开发指南
- T语言与快速开发平台之天宇开发平台开发指南
- T语言与快速开发平台之天宇联Android开发手册
- T语言与快速开发平台之天宇联iOS开发手册
- T语言与快速开发平台之天宇联3合1开发手册
- T语言与快速开发平台之天宇联ui设计规范
- 北京天宇联科技有限责任公司-T语言开发平台前端开发指南
- 北京天宇联科技有限责任公司-T语言iOS开发指南
- T语言与快速开发平台
- 北京天宇联科技有限责任公司—T语言的快速开发
- WEB前端交互快速开发指南
- 北京天宇联科技有限责任公司—T语言Ios开发命名规范
- 北京天宇联科技有限责任公司—T语言html页面开发
- Web快速开发平台
- Web前端开发成长指南
- WEB前端开发成长指南
- WEB前端开发成长指南
- 继承 接口 抽象
- CentOS系统中使用iptables设置端口转发
- linux内核TCP相关参数解释【转】
- PHP 全局变量 - 超全局变量
- H5知识 -- meta篇
- T语言与快速开发平台之天宇联web前端开发指南
- 这世上最纠缠不清的一对情人
- HDU 1269:迷宫城堡 (Tarjan强连通分量)
- VMware Workstation 12下载安装与激活图文教程
- Extjs-行编辑器 Ext.ux.grid.RowEditor()
- 注册下载APCAD三维开发平台
- CentOS中建立Jenkins服务器
- java NIO的模型来源
- 实体类(VO,DO,DTO)的划分