流程网站前台页面显示技术,网站设计论文.docx

《流程网站前台页面显示技术,网站设计论文.docx》由会员分享，可在线阅读，更多相关《流程网站前台页面显示技术,网站设计论文.docx（9页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、流程网站前台页面显示技术,网站设计论文【题目】 【第一章】 【2.1 - 2.3】 【2.4】 【第三章】流程网站前台页面显示技术 【第四章】 【5.1】 【5.2 5.3】 【5.4 - 5.7】 【总结/以下为参考文献】 第 3 章 流程网站前台页面显示技术 3.1 使用框架构建前台页面。 为了能以美观、简洁、方便的界面展如今用户面前，此流程网站前台界面采用Bootstrap 框架。使用该框架开发出来的页面会给人一种全新简洁的页面。 来自 Twitter 的 Bootstrap 是当前最受欢迎的前端框架之一。基于 、CSS、JAVASCRIPT 的 Bootstrap 即简洁又灵敏，使得网

2、页的开发愈加迅速。Bootstrap 是 Twitter的设计师 Jacob Thornton 与 Mark Otto 一起合作开发，它是一个前台页面样式框架。 Bootstrap 推出后遭到大量的追捧，在国外 Bootstrap 是 GitHub 上的热门开源项目，包括微软，美国宇航局都在使用该框架。它提供了简洁的 规范和 CSS 规范，且由当下流行的动态 CSS 语言 Less 编写而成26. Bootstrap 是基于 5 和 CSS3 开发出来的，它以 jQuery 为基础，进行了更为人性化和个性化的完善设计，构成了一套具有自个特殊风格的网站，且大多数的 jQuery插件都能够被兼容应

3、用。Bootstrap 的出现让前端应用开发更简单、更快速。任何程序开发人员都能够快速上手熟悉，且能够适配所有设备，能够使用于所有项目。 Bootstrap 中有着大量的 Web 小组件，只要你具有一定的 编程基础，通过学习它的几个教程文档即可快速把握这些组件基本用法，能够快速开发出一个界面简洁、美观且功能齐全的网站，不会花费你多久的时间。在 Bootstrap 里常用的一些组件包括：模态框、媒体对象、警告对话框、导航、按钮组、手风琴控件、面包屑、缩略图、导航条、轮播控件、分页控件、排版、下拉菜单、按钮下拉菜单、进度条等。 Bootstrap 还包含了不少 jQuery 插件，像弹出框、标签页

4、、形式对话框、滚动条等。 这些 jQuery 插件让页面的动画效果变得愈加华美。 但是在开发经过中发现使用 Bootstrap 对页面的代码量有所增加。造成网页代码过长，分析容易出错等不便缺点。所以使用 Bootsrap 开发页面一定要保持代码整洁，不然很容易造成由于疏忽而使某些功能失效。 编译后的文件能够被快速应用于其他web项目，Bootstrap既提供了编译版的CSS文件和JS文件，即bootstrap.*;同时也提供了编译且压缩后的 CSS 文件和 JS 文件，即 bootstrap.min.* . 并且 Bootstrap 还提供了大量简洁美观的组件，如按钮组、按钮下拉菜单、导航的标

5、签、pill、列表、警告对话框、进度条、模态对话框 Modals 等。能够讲没有 Bootstrap的帮助，这个网站很难做到如此简洁美观。 由于采用了一套响应式和移动设备优先的流式栅格系统，在屏幕或视口viewport尺寸增加的经过中，系统能够自动分为最多 12 列。这样对不同的显示设备，Bootstrap会自适应网页界面。 流程网站前台页面采用 Bootstrap 构架不仅由于，它的美观、简洁、方便，设计时主要考虑到它技术文档资料丰富，容易查找。 3.2 使用 Jquery 快速开发前台页面脚本。 流程网站前台中大量使用 jQuery 技术为简化 Javascript 代码的使用并加快网页加

6、载速度。 jQuery 是轻量级的 Javascript 库。它是继 prototype 之后又一个优秀的产品，jQuery兼容 CSS3,还兼容包括 IE, 火狐， Safari , Opera 等知名阅读器，可惜 jQuery2.0 及后续版本将不再支持 IE6/7/8 阅读器。jQuery 使用户能更方便地处理网页、事件实现动画效果，且能够方便地实现网站的 AJAX 功能。当下，jQuery 的讲明文件非常完善，文档中对于各种应用解释的非常具体，并且它的一大优势就是提供很多美观的、完善的插件给用户使用27.jQuery 还能够使用户页面保持代码和网页内容的分离，换句话讲，你能够再也不用在

7、网页代码里面编写一堆 javascript 来调用函数，而是只要定义页面中元素 id即可。 jQuery 核心思想就是写得更少，做得更多，并且它是一个能够兼容多阅读器的javascript 库。jQuery 最早于 2006 年 1 月在纽约的 barcamp 发布。jQuery 发布之后，来自世界各地的诸多 JavaScript 高手纷纷参加开发队伍中，华而不实以 Dave Methvin 团队为典型代表。jQuery 当下已经发展成为在业界最为流行应用的 javascript 库，且有研究表示清楚，在互联网上排名前一万个访问量最多的网站中，应用 jQuery 技术的网站占大部分。 jQue

8、ry 另一特点是开源免费的。其独特的语法设计能够让开发人员愈加简洁和快速地进行开发工作。借助 jQuery,开发人员还能够操作文档对象、选择 DOM 元素、制作动画效果、事件处理及使用 Ajax 等其它功能。与此同时，jQuery 还提供 API 接口，开发者借此能够进行插件编写。借助 jQuery 模块化的功能，开发者能够轻松地制作功能强大的静态或者动态 Web 页面应用程序。 jQuery,顾名思议，也就是 JavaScript 和查询，即是辅助 JavaScript 开发的库。 当下 jQuery 有两个版本可供下载，华而不实已经被精简和压缩的 Production version 主要

9、用于实际的网站运用，而未精简和压缩的 Development version 则主要用于测试及开发。这里以 jquery-1.8.0.js 为例未压缩前的大小为 254KB,压缩后的 jquery-1.8.0.min.js大小是 91KB.可见压缩后大小变化还是非常明显的，所以一般网站运行都采用压缩后的 jquery 版本，也能够在多个公共服务器中选择引用。通常情况下，将 jQuery 存储到CDN 公共库上能够有效加快网站的载入速度和访问体验。CDN 公共库即是将常用的 JS库存放在 CDN 节点上，广大开发者能够方便地直接调用。相比于将 JS 库存放在服务器单机上，设立 CDN 公共库的形

10、式愈加稳定和快速。当下，Google、Microsoft 等多家国际性的公司给 jQuery 提供 CDN 服务，我们国家的新浪云计算SAE 和百度云BAE等也提供相关服务。 本流程网站采用的是的 js 文件，这样的好处在于，假如一个用户要访问网站页面，服务器会把改页面的 jquery.js 文件传给用户，一个 jquery.min.js 文件大小为 92KB.假如几十个用户同时访问该页面，这样服务器要重复上传好几十个 jquery.min.js 文件到用户那里，这样势必造成服务器短时间内网络非常缓慢。而且公司服务器和网络资源非常有限。为解决这问题，采用把下载 jquery.min.js文件的

11、网络负担，让给 提供下载 jquery 文件的网站。 考虑到网页的兼容性，流程网站前台页面中使用了不同版本的 jQuery,来实现不同网页上的一些功能特效。 3.3 运用 AJAX 技术实现前台数据的异步更新。 AJAX 是 Asynchronous Javascript And XML 的简称，即 JavaScript 和 XML.AJAX是一种用于开创建立交互式网页应用的网页开发技术，能够用于开创建立快速动态网页。AJAX借助后台和服务器之间进行少量的数据交换，能够使网页实现数据的异步更新和同步交互，即能够不需要重新加载整个网页的情况下，对网页中的某些数据和信息进行更新。6 相比于传统的网

12、页设计，传统的网页假如需要进行更新内容，需要重新加载整个网页并刷新页面。AJAX 并非缩写词，是 Jesse James Gaiiett 创造的名词。 从原则上来讲，AJAX 不能算得上是一种全新的编程语言，从其本质上来讲是多种编程技术结合的产物。AJAX 是一种能够用于开创建立更快、更好、交互性更强的 Web 应用程序的的编程技术。 AJAX 通过在客户端的阅读器进而网站服务器之间进行异步数据传输请求，使得前台网页能够从后台服务器请求更新少量的信息，而不用更新整个页面信息。首先前台使用 Javascript 向服务器提出请求，并处理用户操作数据，不影响用户体验。借助核心对象 XMLHTTPR

13、equest,前台的 JavaScript 能够在不重新加载整个网页的同时完成和后台服务器的数据交换。通过这一经过，可使复杂的网络应用程序变成一个个简单，方便的小程序来处理28. AJAX 是一种独立于 Web 服务器的 Web 应用程序开发技术，其基于 Web 标准主要包括 JavaScript、XML、CSS 等，当下主流的阅读器也全部支持相关标准。AJAX具有应用程序独立于阅读器和平台的特点。 能够讲假如没有 AJAX 这项技术，就没有今天那么多华美使用的动态网页。 在网站前台页面中大部分使用的是 Jquery 的 jQuery.post 函数来实现 AJAX 技术的。 下面对该方式方法

14、的参数及使用做些简单介绍： 例：jQuery.post url,data,success data, textStatus, jqXHR，datatype url:必需项，指定将请求发送到详细 URL,这里我们要根据 Zend Framework 规则。 Data:可选项，用于进行规定连同请求一起发送到服务器的数据、映射或字符串值。 Success data, textStatus, jqXHR ：可选项，用于在请求成功之后需要执行的回调函数。 dataType:可选项，设定预期服务器所响应的数据类型，默认情况下执行智能判定xml、json、script 或 ，系统中大量采用 json 数据类型。 在流程网站中应用范围包括：动态模糊查询底层数据，用户权限数据等动态验证，文件导入返回消息等。 这里所采用的数据类型为 JSON.JSONJavaScript Object Notation 采用完全独立于语言的文本格式，作为一种轻量级的数据交换格式，也使用了类似于 C 语言家族包括C、C+、C#、Java、JavaScript、Perl、Python 等的形式。这些特性帮助 JSON 成为数据交换的理想语言。JSON 易于阅读和编写，也方便机器解析和生成网络传输速度快。