《基于Jquery课程网站的设计》-工学论文，通信论文-论文范文参考-科学狗论文网

标题

基于Jquery课程网站的设计

范文

梅元昭

摘? ?要：文章采用HTML和Jquery實现了单位的精品课程网站设计，在设计过程中归纳了课程网站的具体特点，通过网页局部刷新输出、JSON数据和多种数据资料格式间的转换等技术的使用设计出具有动态感强、传输性能高、网页样式多样化的网页，最终解决了课程网站设计上的需求。

关键词：超文本标记语言;Jquery课程网站;JavaScript 对象简谱;Ajax开发;文档对象模型

当今社会随着信息化和网络的迅猛发展，学校发展要求教师进行课程建设，尤其是精品课程网站的建设，需要将教师的课程申报、相应的教学成果和教学设计思路等内容在网络中进行展示。同时，需要将大量的各种类型教学资源（如图片、PPT、视频等文件）发布到网上，便于供师生交流学习，在实施过程中既要做到学习和交流的无障碍，又要能对教师课程资料实施一定保护，以避免不必要的泄漏损失。

本文通过使用超文本标记语言（Hyper Text Markup Language，HTML），Jquery和JSON等多项技术设计网页结构，将上传课程资料转换成Flash的swf和flv两种视频文件格式，完成课程网站的建设，最终达到符合上述课程网站建设的要求。

1? ? 软件涉及的理论

网站主要使用了HTML，层叠样式表（Cascading Style Sheets，CSS）和Jquery来设计，HTML是一种用来制作超文本文档的简单标记语言，是网络的通用语言，允许网页制作人建立文本与图片、视频等多媒体相结合的复杂页面。通过HTML和CSS可以表现出丰富多彩的设计风格，可以实现页面之间的跳转，它的优势在于与平台无关，是静态的网页，占用服务器资源较小，便于搜索引擎收录，不会受到黑客的攻击，相对来讲具有较高网络安全等特点[1]。

Jquery是一个兼容多种浏览器的JavaScript框架，宗旨是写更少的代码，做更多的事情。它属于轻量级的js库，能兼容CSS3。Jquery快速、方便地帮助用户处理HTML文档和事件的交互，实现网页的动画效果。Jquery简化了过去JavaScript编程任务，有简单而易于理解的编程方式，尽可能地强化常用功能，消除冗余，而且有更加方便、快捷的选择和操作DOM节点方法。Jquery的说明文档很全，各种应用详细，同时，还有许多成熟的第三方插件可供选择。

为了获得更好的用户体验，在页面内与服务器通信中，网站运用了Jquery中的Ajax技术，即异步请求页面局部刷新技术，是基于标准化的并被广泛支持的一项技术。Ajax可使用DOM进行动态显示和交互，能减轻服务器与宽带的负担，不需要插件支持。

JSON是一种纯文本的标准键值对的数据格式，相对于XML，JSON数据格式比较简单，易于读写，易于解析，支持多种语言。JSON支持对象引用以及函数，在语法的层面上，JSON与其他格式的区别在于分隔数据的字符，其分隔符限于单引号、小括号、中括号、大括号、冒号和逗号。

2? ? 网站结构设计

通过对课程网站的结构分析，发现一般网站都由很多页面构成，但许多页面在外观有诸多共同之处，相异的只是数据显示内容和超链接生成的网页。由此引发一个问题，即组成在课程网站的网页中，首页和详细页在结构上存在较大差异的，将网站应该被设计成两个还是一个页面？如果设计一个页面构成，网站虽被高度概括，但是由于涉及内容太多，不利于设计和调试，给后期的代码维护带来困难。因此，采用主要由两个网页—主页和详细页构成网站的方案。

主页和详细页的具体情况，可根据课程的特点和教师个人的需求来设置，这既能充分体现网站的个性多样化，又能保证该类网站在结构上的稳定性，使开发人员大幅节省开发时间，提高开发工作效率，同样，还可作为相应网站模板，便于后期开发网站时选择[2]。

3? ? 网站实现

3.1? 网站主页设计

Jquery库是一个JavaScript文件，只需把对网页HTML的<script> 标签引用语句，就可以使用。所引用语句为：

更新网站主网页节点时，出于增强用户体验和节省网络流量的考虑，需要先在页面加载时将主目录显示出来，对于其他的链接，将调用Ajax页面局部刷新，让网页如同Window应用程序操作一样，动态加载更改节点的数据。加载代码如下：

$（document）.ready（function（）{? ? ? //文档打开时加载

//处理主列表栏目

$（“#mainList”）.empty（）;? ? ? ?//清空主栏目节点

$.getJSON（“JSON/main.js”，function（result）{? ? ? ?//加载主栏目JSON文件

var lstr = “”;

$.each（result， function（i， field）{

lstr=lstr+”

lstr=lstr+”onclick=list（this）>”+field.lname+””;

lstr=lstr+””;

}）;

$（“#mainList”）.HTML（lstr）; ? //更新主栏目节点

}）;

$（“#movie”）.load（“SlideTrans.HTML”）; ? //重新加载动画节点

}）;

3.2? 网站详细页设计

更新网站详细网页节点时，详细目录和具体页面内容根据客户端用户点击超链接产生交互需求，从相应的JSON文件栏目值取出相应的数据资源，以保证数据分批传送，一般尽量控制目录的大小，不能太大，以保证每个JSON文件都较小，避免加载时产生较长的延时[3]。

明细节点描述如下：

详细列表栏目点击事件处理的代码如下：

//教案的处理

function mjlist（which）{

var postStr=””;

$（“#specify”）.empty（）; //先清空明细节点内容

postStr=postStr+”

postStr=postStr+”? id=pmlxflash”;

postStr=postStr+”? classid=clsid：D27CDB6E-AE6D-11cf-96B8-444553540000”;

postStr=postStr+”? ? width=700”;

postStr=postStr+”? ? height=640”;

postStr=postStr+”? ? align=center”;

postStr=postStr+”? ? hspace=0”;

postStr=postStr+”? ? vspace=0”;

postStr=postStr+”>”;

//加載课程资料文件的URL地址

postStr=postStr+”

postStr=postStr+”>”;

postStr=postStr+””;

$（“#specify”）.HTML（postStr）; //更新明细节点

}

3.3? 网站数据设计

网站数据分为网页菜单、详细目录数据和具体显示的数据，都可动态更新，都使用JSON格式，只是对最终上传的各类数据的资源都进行相应类型格式转换的工作，如将DOC，DOCX，BMP，PPT和EXCEL类型文件，通过Print2Flash软件转换成SWF格式文件，将mp4，mpeg，data等视频格式文件使用videoconverterHA软件转换为flv类型网络视频流文件，转换后的文件存储量大大低于原有存储量。同时，不允许选择、复制等操作内容，保证课程资料的网络安全。对flv文件网络可部分传输部分播放，既降低对网络带宽，满足外网流畅观看的要求，又满足移动终端网页方式的浏览[4-5]。

首页面JSON文件格式设计如下：

[{“lname”：”课程设计”，”lurl”：”121”，”lID”：”kcsj”}，

{“lname”：”课程标准”，”lurl”：”232”，”lID”：”kcbz”}，

{“lname”：”教案”，”lurl”：”343”，”lID”：”jan”}，

{“lname”：”实验实训指导”，”lurl”：”565”，”lID”：”sysxzd”}，

{“lname”：”多媒体课件”，”lurl”：”565”，”lID”：”dmtkj”}]

lname是网页数据左主目录要显示文字内容，lurl是链接目录类型，lID为目录数据的JSON文件名称。

明细页面的JSON文件格式设计如下：

[{“kdname”：”库创建操作向导”，”lurl”：”createdatabase.swf”，”kdID”：”kdb1”}，

{“kdname”：”库备份操作向导”，”lurl”：”backup.swf”，”kdID”：”kdb2”}，

{“kdname”：”建表操作向导”，”lurl”：”createtable.swf”，”kdID”：”kdb3”}，

{“kdname”：”综合实例”，”lurl”：”studentdy2005.swf”，”kdID”：”kdb4”}]

Kdname是网页数据目录要显示文字内容，lurl是链接具体内容文件名称，kbID为目录数据的ID内容。

4? ? 结语

使用该方案进行设计的网站，可以兼容多种平台和多种浏览器，大大减少了网站中冗余网页的数量，便于网站目录管理，通过Jquery和Ajax动态操作指定的网页节点内容，将网页数据和网页进行分离，减少网络传输流量，保证网页浏览的畅通。同时，对课程资料进行相应保护。使用这种方式已经开发过10余门课程网站，这些网站又作为模板，为开发人员提供设计思路，缩短开发的时间，提高开发的工作效率，但也存在不能保存和管理用户信息的不足。

[参考文献]

[1]YORK R.Jquery JavaScript与CSS开发入门经典[M].施宏斌，周彦，曹蓉蓉，译.北京：清华大学出版社，2010.

[2]JUSTIN G，BEN G，DION A.Ajax修炼之道：web 2.0入门[M].徐锋，胡冰，译.北京：电子工业出版社，2006.

[3]传智播客高教产品研发部.PHP+Ajax+Jquery网站开发项目式教程[M].北京：人民邮电出版社，2016.

[4]传智播客高教产品研发部.HTML+CSS+JavaScript网页制作案例教程[M].北京：人民邮电出版社，2015.

[5]李琳，冯益斌.HTML5+CSS3网站前台设计项目化教程[M].北京：清华大学出版社，2016.

随便看

科学优质学术资源、百科知识分享平台，免费提供知识科普、生活经验分享、中外学术论文、各类范文、学术文献、教学资料、学术期刊、会议、报纸、杂志、工具书等各类资源检索、在线阅读和软件app下载服务。