毕业设计论文基于HTML5的微官网设计与实现Word格式.docx
《毕业设计论文基于HTML5的微官网设计与实现Word格式.docx》由会员分享，可在线阅读，更多相关《毕业设计论文基于HTML5的微官网设计与实现Word格式.docx（47页珍藏版）》请在冰豆网上搜索。
由此，用户大多使用手机进行信息浏览。
但是，很多的网站在手机上的显示效果并不好。
网站的设计因此出现了新的要求，就是网站必须要适应移动设备显示，这使得手机网站由此诞生。
运用HTML5技术，优化网站的显示，让手机用户更方便的浏览信息。
手机网站可以图文并茂的展现企业的信息，从而为企业的营销市场开拓了一条宽阔的道路。
1.2发展前景
如今，层出不穷的现代信息技术服务模式，对传统信息化服务系统产生一定的影响。
用户大多使用手机浏览信息，而企业要想获得手机用户的青睐，手机网站的搭建就必不可少。
微网站靠着移动网络和手机网站的支持，成为企业进行营销的另一种方式和途径。
在现在手机用户居多的情况下，建立微官网将能够是用户有更好的体验，从而提升企业的形象，赢得更多的移动客户群体，推动企业的发展。
微官网是一种基于WebApp和传统PC版网站相融合的新型网站。
可迅速与微信、微博等网络互动咨询平台链接。
[2]微官网能够实现用户随时随地通过手机了解企业信息，而且还能实现一键通话、新闻评论和留言等等的功能。
微官网比电脑版网站更有优势。
它是应移动互联网的大环境而生的，移动互联网为微官网搭建了一个随时可供浏览的大平台。
而相对于电脑版的官网，微官网省去了很多的操作步骤，符合现代的快节奏生活环境，让用户有更方便快捷的体验。
微官网不仅仅实现了电脑版网页应该有的功能，而且能够以更完美的显示效果呈现给手机用户。
微官网具有网站内容精简，页面资源小，加载速度非常快，可以和微信公共平台完美结合的特点。
微官网作为展示、营销、互动和服务的载体，可以包罗绝大部分功能的实现，它将成为中小型企业必不可少的重要部分。
现在的移动网络社会中，出现越来越多的借助微信浏览器而开发的新型网站，而微官网的设计与实现将对企业的营销能够起到一定的作用。
1.3本论文的创新点
当前层出不穷的现代信息技术服务模式，对传统信息化服务系统产生了深远的影响，如果企业要想获得更多用户的青睐，手机网站的设计与实现就显的尤为重要，这就为微官网的产生与发展奠定良好的基础。
本文旨在完成一款美观实用的基于HTML5的企业微官网的设计与实现，本文的创新点在于：
（1）引入微官网设计理念，实现跨平台的营销型网站。
微网站是一种跨移动平台的营销型网站，它源于WebApp和网站的融合创新，兼容iOS、android、WP等各大操作系统，可以便于微信、微博等应用的链接，适应现在移动客户端浏览市场，是符合浏览体验与交互性能要求的新一代网站。
（2）引入当前流行的HTML5技术来完成微官网的页面设计与展示。
采用当前流行的HTML5技术来完成微官网的页面设计与展示。
优化网站的显示，能够自动识别窗户屏幕大小，完全适用于手机、平板，网站内容精简，加载速度非常快，让手机用户更方便的浏览信息。
2系统开发工具
2.1HTML5
HTML5（简称“H5”）是万维网的核心语言、标准通用标记语言下的一个应用超文本标记语言（HTML）的第五次重大修改。
目前，H5技术正处于不断发展的过程中，作为移动轻应用，它在未来具有无限可能，潜力巨大。
[3]
HTML5是W3C和谷歌、苹果等几百家公司一起得出来的成果。
HTML5最大的好处在于它是一个开放的技术,而且具有基于Webkit[4]内核的浏览器这个最大的特点，将会是未来移动开发技术的发展趋势。
当今主流浏览器都支持HTML5，HTML5在未来的5-10年中，将成为移动发展的一个重要因素。
HTML5以开放的Web标准为基础，开发出来的较为完备的新的编程规范。
它具有视频和音乐的展示以及动态的效果，具备强大的离线存储功能等等的特点。
运用HTML5技术进行设计，简单易懂易用，它可以实现让同一张网页自动适应不同大小的屏幕，再根据屏幕宽度，自动调整进行页面布局。
HTML5技术能够在移动设备上支持多媒体。
它具有新的语法特征，也能够实现一些新的功能，用户与文档的交互方式受到了本质性的改变。
从性能角度来说，HTML5首先是缩减了HTML文档，使这件事情变得更简单。
从用户可读性上说，原先一大堆东西对初学者来说，第一次看到这些东西是看不懂的，而HTML5的声明方式对用户来说显然更友好一些。
2.2ASP.NET
ASP.NET是.NETFrameWork的一部分，是一项微软公司的技术，是一种使嵌入网页中的脚本，是可由因特网服务器执行的服务器端脚本技术。
它可以在通过HTTP请求文档时，在Web服务器上动态创建ActiveServerPages（动态服务器页面），并且运行于IIS（Windows开发的Web服务器）之中的程序。
在微软的.NET战略中，新推出的ASP.NET。
它是建立在公共语言运行库的基础上，借鉴了Java技术的优点。
ASP.NET的推荐语言是CSharp[5]语言，对以前的ASP安全性差等缺陷进行了相当大的改进。
在执行ASP.NET的时候，程序引擎调用了系统中的IIS[6]服务器，执行对嵌在HTML中的ASPX文件进行解释，最终以页面的形式显示。
但是，使用ASP.NET还是具有一定的局限性。
因为，从某种角度来说，它们只能良好的运行于微软的WindowsNT/2000/XP和IIS的服务器平台上。
没有和ChilliSoft[7]一样，提供在UNIX/Linux上运行ASP的解决方案。
所以，平台的局限性和ASP.NET的安全性限制了ASP.NET的广泛运用。
2.3SQLServer
SQL是英文StructuredQueryLanguage的缩写，中文称作结构化查询语言。
SQL被几乎一切的数据库操作命令所认同，成为关系型数据库管理系统的标准语言。
SQL命令的输入能够实现对数据库的操作和管理。
比如，在数据库中进行增加、删除和更新数据，或者从数据库中提取数据等一系列的操作进行数据的管理。
SQL数据库是储存和管理数据信息的智能化操作平台。
[8]
SQLServer是由Microsoft开发和推广的关系数据库管理系统（DBMS），它最初是由Microsoft、Sybase和Ashton-Tate三家公司共同开发的。
它的性能超群，集成了WindowsNT/2000平台[9]，与Web搭建配合紧密，得到网络和存储技术的支持，使得最大限度地提高了WEB站和企业的应用的扩展性和保障性，应用于Internet领域。
而且，SQLServer提供了十分便民的缺省安装和使用方法，使用起来难度并不大。
此外，SQLServer还能够兼顾规模不同的应用，具有很强的实用性。
其中SQLServer2008是一个重大的产品版本，它推出了许多新的特性和关键的改进，是较为强大和全面的SQLServer版本。
SQLServer2008允许在使用Microsoft.NET和VisualStudio开发的自定义应用程序中使用数据，在面向服务的架构（SOA）和通过MicrosoftBizTalkServer进行的业务流程中使用数据。
它可以组织管理任何数据，可以将结构化、半结构化和非结构化文档的数据直接存储到数据库中。
还能够对数据进行查询、搜索、同步、报告和分析之类的操作。
信息工作人员可以直接访问数据，是一个可信的、高效率智能数据平台，可以满足用户的所有数据需求。
3系统分析
3.1项目概述
本文所设计与实现的是针对中小企业而开发的一款以信息管理系统为基础（涉及到企业信息的展示和管理）的微官网。
它以广泛的调查为基础，满足用户的需求，以此来提升企业的信息管理水平以及优化资源管理，从而尽可能使得成本有所降低，统筹安排以实现利益的最大化效益。
微官网是网络环境下网站移动化发展的典型代表，适应手机的体验让用户对其依赖程度越来越高。
所面向的用户人群:
员工、信息管理员、移动终端客户群众。
我们的系统设计需要达到的目标：
（1）建立操作简单易用、具备良好交互性的微官网。
（2）动态显示企业信息，制作成本尽量低，注重实用性。
（3）该网站可为让广大手机用户更加方便了解企业的情况。
3.2需求分析
企业建立微官网的目的是为了在移动互联网上对手机用户进行宣传与推广，提高企业的知名度。
我们可以通过建立覆盖面积广的、统一的网站，进一步实现企业在网上发布相关行业信息，以及规范和优化市场的信息。
3.2.1功能需求
根据企业对微官网的需求，我将采用B/S模式开发系统。
前台的功能主要包括：
信息展示、地理定位、信息分享、一键拨号、用户评论、用户留言。
而在后台的管理中，它主要功能包括：
信息管理、留言管理和评论管理。
其中，信息管理又包括产品管理、新闻管理、图库管理和视频管理。
具体详细的功能描述如下：
（1）信息展示：
用户能对产品信息、新闻信息、视频信息进行浏览。
（2）地理定位：
系统可以定位企业的具体位置。
（3）信息分享：
用户可以对企业信息分享到其他网络平台。
（4）一键拨号：
用户可以更加便捷地与企业相关人员进行沟通。
（5）用户评论：
用户可以进行对具体的新闻信息进行评论。
（6）用户留言：
用户可以根据自身情况对企业进行留言。
（7）信息管理：
管理员能够对产品信息、新闻信息和视频信息的发布、修改和删除。
（8）评论管理：
管理员审核用户的评论，通过审核则对评论进行回复，审核不通过则删除评论。
（9）留言管理：
留言信息管理员无需回复，但是他可以根据用户留言信息里的联系方式，拨打电话直接与留言用户取得联系。
3.2.2性能需求
根据用户对功能的需求，系统对于性能的要求如下：
（1）响应性：
系统响应时间迅速，能够满足用户要求。
（2）适应性：
在操作系统、运行环境、使用设备改变的情况下，系统能够自动适应，有相应的布局调整。
（3）可使用性：
操作便捷，能够对输入的格式和数据的类型进行验证，并采用友好的错误提醒，使用户能够输入正确的数据，便于用户的正确操作。
（4）可维护性：
采用的B/S结构，更加有利于管理人员的维护。
3.2.3其他需求
微官网使用ASP.NET进行开发与设计，程序需上传至阿里云虚拟主机中。
其中，Web服务器主要环境是：
Microsoft-IIS，.NET版本为4.0，使用SQLServer2008数据库。
微官网主要是在Android、iOS、WP系统的手机上运行，此外能支持PC计算机运行。
具有基本配置的硬件设备都能满足微官网的正常运行。
3.3可行性分析
可行性分析主要的活动是要对所研究开发的课题的可行性做一个详细的分析。
微官网能够展示信息，并且实现对信息的管理。
通过微官网的建立，增强企业与客户之间的联系，使客户能够及时了解企业的信息，更好的服务于客户，进而增强企业和客户之间的友好业务关系。
通过对经济、技术、社会等方面的分析来确定微官网能否成功开发。
3.3.1经济可行性分析
根据用户的需求，分析其经济可行性。
微官网可以很方便的对各种各样的产品信息进行采辑和发布，管理人员可以方便快捷地发布产品信息。
企业采集到发布的信息的时间周期缩短，人力开支也随之减少，从而提高了服务的品质。
APP的开发、维护和推广成本高，而微官网是一种轻APP化的产品，使用他能让企业的开发和维护成本降低，有利于在线上和线下进行宣传和推广，获得更多的经济效益。
在经济上，建立微官网是可行的。
3.3.2社会可行性分析
移动网络技术飞速发展，手机用户不断增加，用手机浏览信息的人更是越来越多。
可见，微网站己成为新兴的社会信息聚合平台。
信息互动、新闻动态通通聚集在这里，形成有一种特殊的社会。
而微官网的建设，正是将企业在特殊社会中的突出展现，企业形象和知名度有进一步提升，从而推动服务的创新以及与客户良性互动。
在社会上，建立微官网是可行的。
3.3.3技术可行性分析
微官网的建立是利用ASP.NET和SQLServer技术进行WEB应用的开发，这样能够降低用户对客户端的需求。
使用HTML5技术，使得HTML页面更适合移动用户的体验。
在原有门户网站的基础上，使用HTML5技术，按移动门户的展现标准，使得页面更适合移动用户的体验，同时还能够兼容各大手机操作系统。
在技术上，建立微官网是可行的。
3.4业务分析
业务分析是对系统的业务流程进行分析，这样能够知道使用者的操作流程，然后对应这样的流程，设计功能来完成数据之间的传递。
业务流程的分析能够看出系统所需实现的功能。
根据用户对功能的需求，我反复研究后，得出的微官网的业务流程，如图3-1所示。
图3-1业务流程图
3.5数据流分析
数据流图能够明确的表示数据及其流动的方向，能够从其中直观深刻的看到数据的流动，还可能体会到系统逻辑的完整性。
根据之前对业务流程的分析，我进一步分析各个业务模块之间的数据及数据的流向。
我得出微官网的流程图，它包括顶层图（图3-2）和0层图（图3-3），根据0层图细化至1层流程图，它包括登录流程图（图3-4）、产品管理流程图（图3-5）和新闻管理流程图（图3-6）。
图3-2微官网顶层数据流图
图3-3微官网0层数据流图
图3-4登录1层流程图
图3-5产品管理1层流程图
图3-6新闻管理1层流程图
根据以上的数据流图，我对其中的新闻管理的数据流图进行数据字典的解释。
主要内容有数据流（表3-1至3-3）、数据存储（表3-4和3-5）、数据加工项（表3-6）、外部项（表3-7和表3-8）。
表3-1新闻信息数据流表
数据流
系统名：
微官网
编号：
F5
条目名：
新闻信息
别名：
资讯信息
来源：
新闻表
去处：
用户
数据流结构：
新闻信息=编号+标题+内容+发布时间+点击量
简要说明：
新闻资讯的相关信息
表3-2回复信息数据流表
F7
回复信息
返评信息
回复表
留言管理
回复信息=留言编号+回复内容
管理员回复的信息
表3-3评论信息数据流表
F8
评论信息
论坛信息
评论管理
评论信息=编号+昵称+内容
用户评论的相关信息
表3-4新闻数据存储表
数据存储
D7
资讯表
存储组织：
每个新闻一个记录
主关键字：
新闻编号记录数：
约800
记录组成：
项目名：
新闻编号新闻标题新闻内容发布时间点击量
近似长度：
550300505
表3-5评论数据存储表
D8
评论表
论坛表
每个评论一个记录
评论编号记录数：
评论编号新闻编号昵称评论内容
5550100
表3-6新闻管理数据加工表
数据加工
4
新闻管理
资讯管理
输入数据流：
新闻操作信息、评论信息
输出数据流：
新闻信息、回复信息
加工逻辑：
对新闻信息进行查询、增加、修改和删除
对新闻的相关信息进行管理
表3-7用户外部项表
外部项
E2
客户
评论信息、留言信息
输出数据流:
产品信息、图库信息、新闻信息、视频信息、回复信息、外链信息
主要特征：
用户是浏览微官网的人
用户浏览微官网，对新闻进行评论，可以给管理员留言。
表3-8操作分类部项表
E3
操作分类
操作类别
操作信息
产品操作信息、新闻操作信息、视频操作信息、外链操作信息
管理具体的操作信息
根据操作的信息不同，对系统进行不同的操作。
4系统设计
4.1功能模块设计
根据对环境的详细的调研，以及用户的需求进行分析，本系统主要有管理员和用户这两种角色，可以将系统划分为前台展示和后台管理这两大模块。
其中，前台展示模块的主要功能包括信息展示、用户评论、用户留言、信息分享和一键联系；
后台管理模块包括留言管理、信息管理、评论管理和外链管理。
具体的系统功能模块，如图4-1所示。
图4-1功能模块图
4.2数据库设计
微官网是采用SQLServer数据库完成设计，是由最广大的手机用户和企建起业共同组来的信息平台，它的开发与设计从数据的检索，到插入或删除等等操作，都依赖于背后的数据库系统的支持。
对系统进行分析后，我在数据库的设计里，需要清楚各个实体之间的联系。
对此，我进行数据库的概念结构设计，如图4-2所示。
图4-2E-R图
根据以上数据库的实体之间的联系，我进一步对数据库表进行详细的设计。
（1）系统管理员表（admin）主要存储系统管理员信息，如表4-1所示。
表4-1管理员表
字段名称
数据类型
主键
自增
允许为空
描述
aId
Int
是
增1
不允许
编号
adminName
Varchar（50）
否
无
允许
登陆账号
adminPwd
登陆密码
（2）产品表（Product）主要存储系统的产品信息，如表4-2所示。
表4-2产品表
Id
Gid
图片编号
Info
产品内容
（3）图库表（Gallery）主要存储系统的图片信息，如表4-3所示。
表4-3图库表
Gname
图片标题
Path
Varchar（100）
存放位置
（4）新闻表（News）主要存储系统的新闻资讯信息，如表4-4所示。
表4-4新闻表
Title
新闻标题
Time
Datetime
发布时间
Photo
新闻图片
Content
text
新闻内容
Hit
点击量
（5）评论表（Blog）主要存储系统的新闻评论信息，如表4-5所示。
表4-5评论表
Name
用户昵称
评论时间
Nid
新闻编号
Message
Text
评论内容
续表4-5
Examine
评论审核
Reply
回复评论
（6）视频表（Video）主要存储系统的视频信息，如表4-6所示。
表4-6视频表
视频标题
Vedio
视频位置
视频内容
（7）留言表（Contacts）主要存储系统的留言信息，如表4-7所示。
表4-7留言表
留言时间
姓名
Tel
联系电话
允
升级会员 