本篇论文目录导航：
【题目】框架模式下工作流程网站开发探究
【第一章】企业信息化框架式网站建设研究绪论
【2.1 - 2.3】利用微信企业平台建立流程网站的会知技术
【2.4】使用框架技术开发流程网站
【第三章】流程网站前台页面显示技术
【第四章】组建网站开发环境与运行环境
【5.1】流程网站设计流程核心模块
【5.2 5.3】流程网站建立流程的审批功能
【5.4 - 5.7】设计流程网站登录及注册功能
【总结/参考文献】生产企业流程网站设计与实现研究总结与参考文献
第 3 章 流程网站前台页面显示技术
3.1 使用框架构建前台页面。
为了能以美观、简洁、方便的界面展现在用户面前，此流程网站前台界面采用Bootstrap 框架。使用该框架开发出来的页面会给人一种全新简洁的页面。
来自 Twitter 的 Bootstrap 是目前最受欢迎的前端框架之一。基于 HTML、CSS、JAVASCRIPT 的 Bootstrap 即简洁又灵活，使得网页的开发更加迅速。Bootstrap 是 Twitter的设计师 Jacob Thornton 与 Mark Otto 一起合作开发，它是一个前台页面样式框架。
Bootstrap 推出后受到大量的追捧，在国外 Bootstrap 是 GitHub 上的热门开源项目，包括微软，美国宇航局都在使用该框架。它提供了简洁的 HTML 规范和 CSS 规范，且由当前流行的动态 CSS 语言 Less 编写而成[26].
Bootstrap 是基于 HTML5 和 CSS3 开发出来的，它以 jQuery 为基础，进行了更为人性化和个性化的完善设计，形成了一套具有自己特殊风格的网站，且大多数的 jQuery插件都能够被兼容应用。Bootstrap 的出现让前端应用开发更简单、更快捷。任何程序开发人员都可以快速上手熟悉，且能够适配所有设备，能够使用于所有项目。
Bootstrap 中有着大量的 Web 小组件，只要你具有一定的 HTML 编程基础，通过学习它的几个教程文档即可快速掌握这些组件基本用法，能够快速开发出一个界面简洁、美观且功能齐全的网站，不会花费你多久的时间。在 Bootstrap 里常用的一些组件包括：模态框、媒体对象、警告对话框、导航、按钮组、手风琴控件、面包屑、缩略图、导航条、轮播控件、分页控件、排版、下拉菜单、按钮下拉菜单、进度条等。
Bootstrap 还包含了不少 jQuery 插件，像弹出框、标签页、模式对话框、滚动条等。
这些 jQuery 插件让页面的动画效果变得更加华丽。
但是在开发过程中发现使用 Bootstrap 对页面的代码量有所增加。造成网页代码过长，分析容易出错等不便缺点。所以使用 Bootsrap 开发页面一定要保持代码整洁，不然很容易造成因为疏忽而使某些功能失效。
编译后的文件能够被快速应用于其他web项目，Bootstrap既提供了编译版的CSS文件和JS文件，即bootstrap.*;同时也提供了编译且压缩后的 CSS 文件和 JS 文件，即 bootstrap.min.* .
并且 Bootstrap 还提供了大量简洁美观的组件，如按钮组、按钮下拉菜单、导航的标签、pill、列表、警告对话框、进度条、模态对话框（ Modals ）等。可以说没有 Bootstrap的帮助，这个网站很难做到如此简洁美观。
由于采用了一套响应式和移动设备优先的流式栅格系统，在屏幕或视口（viewport）尺寸增加的过程中，系统可以自动分为最多 12 列。这样对不同的显示设备，Bootstrap会自适应网页界面。
流程网站前台页面采用 Bootstrap 构架不仅因为，它的美观、简洁、方便，设计时主要考虑到它技术文档资料丰富，容易查找。
3.2 使用 Jquery 快速开发前台页面脚本。
流程网站前台中大量使用 jQuery 技术为简化 Javascript 代码的使用并加快网页加载速度。
jQuery 是轻量级的 Javascript 库。它是继 prototype 之后又一个优秀的产品，jQuery兼容 CSS3,还兼容包括 IE, 火狐， Safari , Opera 等知名浏览器，可惜 jQuery2.0 及后续版本将不再支持 IE6/7/8 浏览器。jQuery 使用户能更方便地处理网页、事件实现动画效果，且能够方便地实现网站的 AJAX 功能。当前，jQuery 的说明文件非常完善，文档中对于各种应用解释的非常详细，并且它的一大优势就是提供许多美观的、完善的插件给用户使用[27].jQuery 还能够使用户页面保持代码和网页内容的分离，换句话说，你可以再也不用在网页代码里面编写一堆 javascript 来调用函数，而是只要定义页面中元素 id即可。
jQuery 核心思想就是写得更少，做得更多，并且它是一个可以兼容多浏览器的javascript 库。jQuery 最早于 2006 年 1 月在纽约的 barcamp 发布。jQuery 发布之后，来自世界各地的众多 JavaScript 高手纷纷加入开发队伍中，其中以 Dave Methvin 团队为典型代表。jQuery 当前已经发展成为在业界最为流行应用的 javascript 库，且有研究表明，在互联网上排名前一万个访问量最多的网站中，应用 jQuery 技术的网站占大部分。
jQuery 另一特点是开源免费的。其独特的语法设计可以让开发人员更加简洁和快速地进行开发工作。借助 jQuery,开发人员还可以操作文档对象、选择 DOM 元素、制作动画效果、事件处理及使用 Ajax 等其它功能。与此同时，jQuery 还提供 API 接口，开发者借此可以进行插件编写。借助 jQuery 模块化的功能，开发者能够轻松地制作功能强大的静态或者动态 Web 页面应用程序。
jQuery,顾名思议，也就是 JavaScript 和查询，即是辅助 JavaScript 开发的库。
当前 jQuery 有两个版本可供下载，其中已经被精简和压缩的 Production version 主要用于实际的网站运用，而未精简和压缩的 Development version 则主要用于测试及开发。这里以 jquery-1.8.0.js 为例未压缩前的大小为 254KB,压缩后的 jquery-1.8.0.min.js大小是 91KB.可见压缩后大小变化还是非常明显的，所以一般网站运行都采用压缩后的 jquery 版本，也能够在多个公共服务器中选择引用。通常情况下，将 jQuery 存储到CDN 公共库上能够有效加快网站的载入速度和访问体验。CDN 公共库即是将常用的 JS库存放在 CDN 节点上，广大开发者可以方便地直接调用。相比于将 JS 库存放在服务器单机上，设立 CDN 公共库的形式更加稳定和快速。当前，Google、Microsoft 等多家国际性的公司给 jQuery 提供 CDN 服务，我国的新浪云计算（SAE） 和百度云（BAE）等也提供相关服务。
本流程网站采用的是的 js 文件，这样的好处在于，如果一个用户要访问网站页面，服务器会把改页面的 jquery.js 文件传给用户，一个 jquery.min.js 文件大小为 92KB.如果几十个用户同时访问该页面，这样服务器要重复上传好几十个 jquery.min.js 文件到用户那里，这样势必造成服务器短时间内网络非常缓慢。而且公司服务器和网络资源非常有限。为解决这问题，采用把下载 jquery.min.js文件的网络负担，让给 code.jquery.com 提供下载 jquery 文件的网站。
考虑到网页的兼容性，流程网站前台页面中使用了不同版本的 jQuery,来实现不同网页上的一些功能特效。
3.3 运用 AJAX 技术实现前台数据的异步更新。
AJAX 是 Asynchronous Javascript And XML 的简称，即 JavaScript 和 XML.AJAX是一种用于创建交互式网页应用的网页开发技术，能够用于创建快速动态网页。AJAX借助后台和服务器之间进行少量的数据交换，能够使网页实现数据的异步更新和同步交互，即可以不需要重新加载整个网页的情况下，对网页中的某些数据和信息进行更新。[6]
相比于传统的网页设计，传统的网页如果需要进行更新内容，需要重新加载整个网页并刷新页面。AJAX 并非缩写词，是 Jesse James Gaiiett 创造的名词。
从原则上来讲，AJAX 不能算得上是一种全新的编程语言，从其实质上来讲是多种编程技术结合的产物。AJAX 是一种能够用于创建更快、更好、交互性更强的 Web 应用程序的的编程技术。
AJAX 通过在客户端的浏览器进而网站服务器之间进行异步数据传输请求，使得前台网页可以从后台服务器请求更新少量的信息，而不用更新整个页面信息。首先前台使用 Javascript 向服务器提出请求，并处理用户操作数据，不影响用户体验。借助核心对象 XMLHTTPRequest,前台的 JavaScript 能够在不重新加载整个网页的同时完成和后台服务器的数据交换。通过这一过程，可使复杂的网络应用程序变成一个个简单，方便的小程序来处理[28].
AJAX 是一种独立于 Web 服务器的 Web 应用程序开发技术，其基于 Web 标准主要包括 JavaScript、XML、HTML、CSS 等，当前主流的浏览器也全部支持相关标准。AJAX具有应用程序独立于浏览器和平台的特点。
可以说如果没有 AJAX 这项技术，就没有今天那么多华丽使用的动态网页。
在网站前台页面中大部分使用的是 Jquery 的 jQuery.post 函数来实现 AJAX 技术的。
下面对该方法的参数及使用做些简单介绍：
例：jQuery.post （url,data,success（ data, textStatus, jqXHR），datatype ）url:必需项，指定将请求发送到具体 URL,这里我们要按照 Zend Framework 规则。
Data:可选项，用于进行规定连同请求一起发送到服务器的数据、映射或字符串值。
Success （ data, textStatus, jqXHR ）：可选项，用于在请求成功之后需要执行的回调函数。
dataType:可选项，设定预期服务器所响应的数据类型，默认情况下执行智能判断（xml、json、script 或 html），系统中大量采用 json 数据类型。
在流程网站中应用范围包括：动态模糊查询底层数据，用户权限数据等动态验证，文件导入返回消息等。
这里所采用的数据类型为 JSON.JSON（JavaScript Object Notation） 采用完全独立于语言的文本格式，作为一种轻量级的数据交换格式，也使用了类似于 C 语言家族（包括C、C++、C#、Java、JavaScript、Perl、Python 等）的形式。这些特性帮助 JSON 成为数据交换的理想语言。JSON 易于阅读和编写，也方便机器解析和生成（网络传输速度快）。
