基于某HTML5地微官网设计与实现

《基于某HTML5地微官网设计与实现》由会员分享，可在线阅读，更多相关《基于某HTML5地微官网设计与实现（39页珍藏版）》请在装配图网上搜索。

1、word学院本科毕业论文、毕业设计题 目：基于HTML5的微官网设计与实现系 别：计算机工程系专 业：计算机科学与技术年 级：2014级学 号：2414101909姓 名：黄力指导教师： 年 月 日36 / 39基于HTML5的微官网设计与实现摘要微信的商业价值不断凸显，睿智的企业主跃跃欲试，一个属于移动互联网的大时代呼之欲出，手机用户正在逐渐成为企业的主要消费人群，用户大多更倾向于使用手机、平板等终端工具浏览信息，企业如果要想获得更多用户的青睐，手机官方的设计与实现就显的尤为重要，微官网是一种基WebAp和PC版相融合的新型，建立微官网对提升企业形象，促进企业产品宣传，提升用户产品体验，从而

2、赢得更多的移动客户群体等均起到了重要推动作用，成为企业进展营销的另一种方式和途径。论文主要是完成基于HTML5的微官网设计与实现，以文字、图片、视频等多种丰富的多媒体形式向客户展示企业产品信息。微官网的页面呈现主要是基于当前流行的HTML5的新特性，运用HTML5技术，优化的显示，能够自动识别窗户屏幕大小，完全适用于手机、平板，容精简，加载速度非常快，让手机用户更方便的浏览信息，同时兼具一键拔打、一键分享与在线留言、地图导航等功能，让微官网容展示更加丰富，管理更加便捷。系统主要基于ASP.NET进展程序开发，利用SQLServer数据库来存储数据，同时采用 HTML5技术来实现微官网的页面展示

3、。论文首先分析了系统的开发环境，接着重点介绍了系统的可行性分析、系统的概要设计与详细设计，技术实现难点，最后完成了系统的功能测试。本论文主要实现基于HTML5的市宏博油画微官网，该经过一段时期的运行测试，能以丰富的图文形式向用户展示企业信息，企业的油画产品，完成企业产品信息的管理，实现了企业与客户之间的互动交流，从而提高企业在移动网络里的宣传力度，从而为企业赢得更多的移动客户群体。目 录1 绪论11.1 研究现状11.2 开展前景21.3 本论文的创新点22 系统开发工具32.1 HTML5332.3 SQLServer43 系统分析53.1 项目概述53.2 需求分析53.3 可行性分析63

4、.4 业务分析73.5 数据流分析84 系统设计134.1 功能模块设计134.2 数据库设计144.3 程序设计165 系统测试195.1 系统测试的重要性195.2 测试实例的研究与选择205.3 系统运行情况与评价226 系统展示236.1 前台展示模块236.2 后台管理模块26结论30参考文献31附录一32致361 绪论1.1 研究现状依据中国网络开展现状调查得出，我国手机上网的人数已达6亿多，与2014年相比，人数上增6303万人，如图1-1所示。可见，手机已经成为每个人不可或缺的局部。移动互联网成为一种方便快捷的信息获取手段和沟通交流方式，它已经深深融入手机用户群体的日常生活之中

5、。图 1-1 手机用户比例图在移动网络开展中，特别是4G1的产生，移动网络的优越性愈发凸显，使得人们与移动设备和移动互联网的接触越来越频繁。随着手机的智能化开展，安装不同操作系统的手机，具备了功能强大的浏览器后，使得它的功能跟电脑操作显示的效果更加接近。手机的换代也使得手机的浏览器随着不断的优化和升级，这也为HTML5技术在移动移动网络方向的开展提供源源不断的动力。由此，用户大多使用手机进展信息浏览。但是，很多的在手机上的显示效果并不好。的设计因此出现了新的要求，就是必须要适应移动设备显示，这使得手机由此诞生。运用HTML5技术，优化的显示，让手机用户更方便的浏览信息。手机可以图文并茂的展现企

6、业的信息，从而为企业的营销市场开拓了一条宽阔的道路。1.2 开展前景如今，层出不穷的现代信息技术服务模式，对传统信息化服务系统产生一定的影响。用户大多使用手机浏览信息，而企业要想获得手机用户的青睐，手机的搭建就必不可少。微靠着移动网络和手机的支持，成为企业进展营销的另一种方式和途径。在现在手机用户居多的情况下，建立微官网将能够是用户有更好的体验，从而提升企业的形象，赢得更多的移动客户群体，推动企业的开展。微官网是一种基于WebApp和传统PC版相融合的新型。可迅速与微信、微博等网络互动咨询平台。2微官网能够实现用户随时随地通过手机了解企业信息，而且还能实现一键通话、新闻评论和留言等等的功能。微

7、官网比电脑版更有优势。它是应移动互联网的大环境而生的，移动互联网为微官网搭建了一个随时可供浏览的大平台。而相对于电脑版的官网，微官网省去了很多的操作步骤，符合现代的快节奏生活环境，让用户有更方便快捷的体验。微官网不仅仅实现了电脑版网页应该有的功能，而且能够以更完美的显示效果呈现给手机用户。微官网具有容精简，页面资源小，加载速度非常快，可以和微信公共平台完美结合的特点。微官网作为展示、营销、互动和服务的载体，可以包罗绝大局部功能的实现，它将成为中小型企业必不可少的重要局部。现在的移动网络社会中，出现越来越多的借助微信浏览器而开发的新型，而微官网的设计与实现将对企业的营销能够起到一定的作用。1.3

8、 本论文的创新点当前层出不穷的现代信息技术服务模式，对传统信息化服务系统产生了深远的影响，如果企业要想获得更多用户的青睐，手机的设计与实现就显的尤为重要，这就为微官网的产生与开展奠定良好的根底。本文旨在完成一款美观实用的基于HTML5的企业微官网的设计与实现，本文的创新点在于：1引入微官网设计理念，实现跨平台的营销型。微是一种跨移动平台的营销型，它源于WebApp和的融合创新，兼容iOS、android、WP等各大操作系统，可以便于微信、微博等应用的，适应现在移动客户端浏览市场，是符合浏览体验与交互性能要求的新一代。2引入当前流行的HTML5技术来完成微官网的页面设计与展示。采用当前流行的HT

9、ML5技术来完成微官网的页面设计与展示。优化的显示，能够自动识别窗户屏幕大小，完全适用于手机、平板，容精简，加载速度非常快，让手机用户更方便的浏览信息。2 系统开发工具 HTML5HTML5简称“H5是万维网的核心语言、标准通用标记语言下的一个应用超文本标记语言HTML的第五次重大修改。目前，H5技术正处于不断开展的过程中，作为移动轻应用，它在未来具有无限可能，潜力巨大。3HTML5是W3C和谷歌、苹果等几百家公司一起得出来的成果。 HTML5最大的好处在于它是一个开放的技术,而且具有基于Webkit4核的浏览器这个最大的特点，将会是未来移动开发技术的开展趋势。当今主流浏览器都支持HTML5，

10、HTML5在未来的5-10年中，将成为移动开展的一个重要因素。HTML5以开放的Web标准为根底，开发出来的较为完备的新的编程规。它具有视频和音乐的展示以与动态的效果，具备强大的离线存储功能等等的特点。运用HTML5技术进展设计，简单易懂易用，它可以实现让同一网页自动适应不同大小的屏幕，再根据屏幕宽度，自动调整进展页面布局。HTML5技术能够在移动设备上支持多媒体。它具有新的语法特征，也能够实现一些新的功能，用户与文档的交互方式受到了本质性的改变。从性能角度来说，HTML5首先是缩减了HTML文档，使这件事情变得更简单。从用户可读性上说，原先一大堆东西对初学者来说，第一次看到这些东西是看不懂的

11、，而HTML5的声明方式对用户来说显然更友好一些。ASP.NET是.NET FrameWork的一局部，是一项微软公司的技术，是一种使嵌入网页中的脚本，是可由因特网服务器执行的服务器端脚本技术。它可以在通过HTTP请求文档时，在Web服务器上动态创建Active Server Pages动态服务器页面，并且运行于IISWindows开发的Web服务器之中的程序。在微软的.NET战略中，新推出的ASP.NET。它是建立在公共语言运行库的根底上，借鉴了Java技术的优点。ASP.NET的推荐语言是C Sharp5语言，对以前的ASP安全性差等缺陷进展了相当大的改良。在执行ASP.NET的时候，程序

12、引擎调用了系统中的IIS6服务器，执行对嵌在HTML中的ASPX文件进展解释，最终以页面的形式显示。但是，使用ASP.NET还是具有一定的局限性。因为，从某种角度来说，它们只能良好的运行于微软的 Windows NT/2000/XP 和IIS的服务器平台上。没有和ChilliSoft7一样，提供在UNIX/Linux上运行ASP的解决方案。所以，平台的局限性和ASP.NET的安全性限制了ASP.NET的广泛运用。2.3 SQLServerSQL是英文Structured Query Language的缩写，中文称作结构化查询语言。SQL被几乎一切的数据库操作命令所认同，成为关系型数据库管理系统

13、的标准语言。SQL命令的输入能够实现对数据库的操作和管理。比如，在数据库中进展增加、删除和更新数据，或者从数据库中提取数据等一系列的操作进展数据的管理。SQL数据库是储存和管理数据信息的智能化操作平台。8SQL Server是由Microsoft开发和推广的关系数据库管理系统DBMS，它最初是由Microsoft、Sybase和Ashton-Tate三家公司共同开发的。它的性能超群，集成了Windows NT/2000平台9，与Web搭建配合严密，得到网络和存储技术的支持，使得最大限度地提高了WEB站和企业的应用的扩展性和保障性，应用于Internet领域。而且，SQL Server 提供了十

14、分便民的缺省安装和使用方法，使用起来难度并不大。此外，SQL Server还能够兼顾规模不同的应用，具有很强的实用性。其中SQL Server 2008是一个重大的产品版本，它推出了许多新的特性和关键的改良，是较为强大和全面的SQL Server版本。SQL Server 2008允许在使用Microsoft .NET和 Visual Studio开发的自定义应用程序中使用数据，在面向服务的架构SOA和通过 Microsoft BizTalk Server进展的业务流程中使用数据。它可以组织管理任何数据，可以将结构化、半结构化和非结构化文档的数据直接存储到数据库中。还能够对数据进展查询、搜索、

15、同步、报告和分析之类的操作。信息工作人员可以直接访问数据，是一个可信的、高效率智能数据平台，可以满足用户的所有数据需求。3 系统分析3.1 项目概述本文所设计与实现的是针对中小企业而开发的一款以信息管理系统为根底涉与到企业信息的展示和管理的微官网。它以广泛的调查为根底，满足用户的需求，以此来提升企业的信息管理水平以与优化资源管理，从而尽可能使得本钱有所降低，统筹安排以实现利益的最大化效益。微官网是网络环境下移动化开展的典型代表，适应手机的体验让用户对其依赖程度越来越高。所面向的用户人群:员工、信息管理员、移动终端客户群众。我们的系统设计需要达到的目标： 1建立操作简单易用、具备良好交互性的微官

16、网。 2动态显示企业信息，制作本钱尽量低，注重实用性。 3该可为让广阔手机用户更加方便了解企业的情况。3.2 需求分析企业建立微官网的目的是为了在移动互联网上对手机用户进展宣传与推广，提高企业的知名度。我们可以通过建立覆盖面积广的、统一的，进一步实现企业在网上发布相关行业信息，以与规和优化市场的信息。3.2.1 功能需求根据企业对微官网的需求，我将采用B/S模式开发系统。前台的功能主要包括：信息展示、地理定位、信息分享、一键拨号、用户评论、用户留言。而在后台的管理中，它主要功能包括：信息管理、留言管理和评论管理。其中，信息管理又包括产品管理、新闻管理、图库管理和视频管理。具体详细的功能描述如下

17、：1信息展示：用户能对产品信息、新闻信息、视频信息进展浏览。2地理定位：系统可以定位企业的具体位置。3信息分享：用户可以对企业信息分享到其他网络平台。4一键拨号：用户可以更加便捷地与企业相关人员进展沟通。5用户评论：用户可以进展对具体的新闻信息进展评论。6用户留言：用户可以根据自身情况对企业进展留言。7信息管理：管理员能够对产品信息、新闻信息和视频信息的发布、修改和删除。8评论管理：管理员审核用户的评论，通过审核如此对评论进展回复，审核不通过如此删除评论。9留言管理：留言信息管理员无需回复，但是他可以根据用户留言信息里的联系方式，拨打直接与留言用户取得联系。3.2.2 性能需求根据用户对功能的

18、需求，系统对于性能的要求如下：1响应性：系统响应时间迅速，能够满足用户要求。2适应性：在操作系统、运行环境、使用设备改变的情况下，系统能够自动适应，有相应的布局调整。3可使用性：操作便捷，能够对输入的格式和数据的类型进展验证，并采用友好的错误提醒，使用户能够输入正确的数据，便于用户的正确操作。4可维护性：采用的B/S结构，更加有利于管理人员的维护。3.2.3 其他需求微官网使用ASP.NET进展开发与设计，程序需上传至阿里云虚拟主机中。其中，Web服务器主要环境是：Microsoft-IIS，.NET版本为4.0，使用SQLServer2008数据库。微官网主要是在Android、iOS、WP

19、系统的手机上运行，此外能支持PC计算机运行。具有根本配置的硬件设备都能满足微官网的正常运行。3.3 可行性分析可行性分析主要的活动是要对所研究开发的课题的可行性做一个详细的分析。微官网能够展示信息，并且实现对信息的管理。通过微官网的建立，增强企业与客户之间的联系，使客户能够与时了解企业的信息，更好的服务于客户，进而增强企业和客户之间的友好业务关系。通过对经济、技术、社会等方面的分析来确定微官网能否成功开发。3.3.1 经济可行性分析根据用户的需求，分析其经济可行性。微官网可以很方便的对各种各样的产品信息进展采辑和发布，管理人员可以方便快捷地发布产品信息。企业采集到发布的信息的时间周期缩短，人力

20、开支也随之减少，从而提高了服务的品质。APP的开发、维护和推广本钱高，而微官网是一种轻APP化的产品，使用他能让企业的开发和维护本钱降低，有利于在线上和线下进展宣传和推广，获得更多的经济效益。在经济上，建立微官网是可行的。3.3.2 社会可行性分析移动网络技术飞速开展，手机用户不断增加，用手机浏览信息的人更是越来越多。可见，微己成为新兴的社会信息聚合平台。信息互动、新闻动态通通聚集在这里，形成有一种特殊的社会。而微官网的建设，正是将企业在特殊社会中的突出展现，企业形象和知名度有进一步提升，从而推动服务的创新以与与客户良性互动。在社会上，建立微官网是可行的。3.3.3 技术可行性分析微官网的建立

21、是利用ASP.NET和SQLServer技术进展WEB应用的开发，这样能够降低用户对客户端的需求。使用HTML5技术，使得HTML页面更适合移动用户的体验。在原有门户的根底上，使用HTML5技术，按移动门户的展现标准，使得页面更适合移动用户的体验，同时还能够兼容各大手机操作系统。在技术上，建立微官网是可行的。3.4 业务分析业务分析是对系统的业务流程进展分析，这样能够知道使用者的操作流程，然后对应这样的流程，设计功能来完成数据之间的传递。业务流程的分析能够看出系统所需实现的功能。根据用户对功能的需求，我反复研究后，得出的微官网的业务流程，如图3-1所示。图 3-1 业务流程图3.5 数据流分析

22、数据流图能够明确的表示数据与其流动的方向，能够从其中直观深刻的看到数据的流动，还可能体会到系统逻辑的完整性。根据之前对业务流程的分析，我进一步分析各个业务模块之间的数据与数据的流向。我得出微官网的流程图，它包括顶层图图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

23、-5、数据加工项表3-6、外部项表3-7和表3-8。表 3-1 新闻信息数据流表数据流系统名：微官网编号：F5条目名：新闻信息别名：资讯信息来源：新闻表去处：用户数据流结构：新闻信息=编号+标题+容+发布时间+点击量简要说明：新闻资讯的相关信息表 3-2 回复信息数据流表数据流系统名：微官网编号：F7条目名：回复信息别名：返评信息来源：回复表去处：留言管理数据流结构：回复信息=留言编号+回复容简要说明：管理员回复的信息表 3-3 评论信息数据流表数据流系统名：微官网编号：F8条目名：评论信息别名：论坛信息来源：用户去处：评论管理数据流结构：评论信息=编号+昵称+容简要说明：用户评论的相关信息表

24、 3-4 新闻数据存储表数据存储系统名：微官网编号：D7条目名：新闻表别名：资讯表存储组织：每个新闻一个记录主关键字：新闻编号 记录数：约800 记录组成：项目名：新闻编号 新闻标题 新闻容 发布时间 点击量 近似长度： 5 50 300 50 5表 3-5 评论数据存储表数据存储系统名：微官网编号：D8条目名：评论表别名：论坛表存储组织：每个评论一个记录主关键字：评论编号 记录数：约800 记录组成：项目名：评论编号 新闻编号 昵称 评论容 近似长度： 5 5 50 100 表 3-6 新闻管理数据加工表数据加工系统名：微官网编号：4条目名：新闻管理别名：资讯管理输入数据流：新闻操作信息、评

25、论信息输出数据流：新闻信息、回复信息加工逻辑：对新闻信息进展查询、增加、修改和删除简要说明：对新闻的相关信息进展管理表 3-7 用户外部项表外部项系统名：微官网编号：E2条目名：用户别名：客户输入数据流：评论信息、留言信息输出数据流:产品信息、图库信息、新闻信息、视频信息、回复信息、外链信息主要特征：用户是浏览微官网的人简要说明：用户浏览微官网，对新闻进展评论，可以给管理员留言。表 3-8 操作分类部项表外部项系统名：微官网编号：E3条目名：操作分类别名：操作类别输入数据流：操作信息输出数据流:产品操作信息、新闻操作信息、视频操作信息、外链操作信息主要特征：管理具体的操作信息简要说明：根据操作

26、的信息不同，对系统进展不同的操作。4 系统设计4.1 功能模块设计根据对环境的详细的调研，以与用户的需求进展分析，本系统主要有管理员和用户这两种角色，可以将系统划分为前台展示和后台管理这两大模块。其中，前台展示模块的主要功能包括信息展示、用户评论、用户留言、信息分享和一键联系；后台管理模块包括留言管理、信息管理、评论管理和外链管理。具体的系统功能模块，如图4-1所示。图 4-1 功能模块图4.2 数据库设计微官网是采用SQLServer数据库完成设计，是由最广阔的手机用户和企建起业共同组来的信息平台，它的开发与设计从数据的检索，到插入或删除等等操作，都依赖于背后的数据库系统的支持。对系统进展分

27、析后，我在数据库的设计里，需要清楚各个实体之间的联系。对此，我进展数据库的概念结构设计，如图4-2所示。图 4-2 E-R图根据以上数据库的实体之间的联系，我进一步对数据库表进展详细的设计。1系统管理员表(admin)主要存储系统管理员信息，如表4-1所示。表 4-1 管理员表字段名称数据类型主键自增允许为空描述aIdInt是增1不允许编号adminNameVarchar(50)否无允许登陆账号adminPwdVarchar(50)否无允许登陆密码2产品表(Product)主要存储系统的产品信息，如表4-2所示。表 4-2 产品表字段名称数据类型主键自增允许为空描述IdInt是增1不允许编号G

28、idInt否无允许图片编号InfoVarchar(50)否无允许产品容3图库表(Gallery)主要存储系统的图片信息，如表4-3所示。表 4-3 图库表字段名称数据类型主键自增允许为空描述IdInt是增1不允许编号GnameVarchar(50)否无允许图片标题PathVarchar(100)否无允许存放位置4新闻表(News)主要存储系统的新闻资讯信息，如表4-4所示。表 4-4 新闻表字段名称数据类型主键自增允许为空描述IdInt是增1不允许编号TitleVarchar(50)否无允许新闻标题TimeDatetime否无允许发布时间PhotoVarchar(100)否无允许新闻图片Con

29、tenttext否无允许新闻容HitInt否无允许点击量5评论表(Blog)主要存储系统的新闻评论信息，如表4-5所示。表 4-5 评论表字段名称数据类型主键自增允许为空描述IdInt是增1不允许编号TitleVarchar(50)否无允许新闻标题NameVarchar(50)否无允许用户昵称TimeDatetime否无允许评论时间NidInt否无允许新闻编号MessageText否无允许评论容 续表4-5字段名称数据类型主键自增允许为空描述ExamineVarchar(50)否无允许评论审核ReplyText否无允许回复评论6视频表(Video)主要存储系统的视频信息，如表4-6所示。表 4

30、-6 视频表字段名称数据类型主键自增允许为空描述IdInt是增1不允许编号TitleVarchar(50)否无允许视频标题VedioVarchar(100)否无允许视频位置InfoVarchar(50)否无允许视频容7留言表(Contacts)主要存储系统的留言信息，如表4-7所示。表 4-7 留言表字段名称数据类型主键自增允许为空描述IdInt是增1不允许编号TimeDatetime否无允许留言时间NameVarchar(50)否无允许TelVarchar(50)否无允许联系MessageText否无允许留言容8外链表(Extends)主要用于系统管理员对留言信息的管理，如表4-8所示。表

31、4-8 外链表字段名称数据类型主键自增允许为空描述IdInt是增1不允许编号TitleVarchar(50)否无允许标题LinkVarchar(300)否无允许地址4.3 程序设计整个微官网由HTML5标准进展设计。HTML5标准的形式简洁，最显著的标志就是代码首行不带版本信息和其他容的网页声明，原先的HTML网页声明是一串很长的字符串。HTML5新标签的使用以与运用JQuery能够做出炫丽的2D或3D效果的美化，带给人一种耳目一新的感觉。运用HTML5的预加载功能进展设计。它能够针对指定的地址预加载页面或者页面中的特定资源，利用浏览器的空闲时间去先下载指定的容，放入缓存。这样，下次浏览这个页

32、面的时候,就能够直接从缓存中取出来，提高页面加载的速度。而我将预加载图库页面和新闻页面，这样来提高图片和新闻页面的加载速度。运用HTML5的新标签进展页面的设计。1meta标签，使用这个标签强制让文档与设备的宽度保持1：1，适应所以设备的显示。其中，初始缩放比例initial-scale为1.0，也就代表网页初始大小占屏幕面积的100%。2Header标签，用它来将页面的首部进展定义，其中调用了custom.js和easing.js来实现导航栏的滑动开关。3Nav标签，用它进展导航的容定义，更加容易被识别。4Footer标签，用它来将网页的底部容进展定义。其中，small标签被用来定义小字，用

33、于解释底部的正确的信息。5section和article标签，它们能够相互的嵌套使用。换句话说，它们之间没有上与下级的联系。在section标签里能够嵌套article标签，article标签也可以包含section标签。它们都全部能成为一个整体。然而，article标签代表文章，文章就是一段完整的独立的容。某种意义上，section标签也能够看成html标准里面的div块，但是比div更具有语义的标签。运用HTML5的新元素进展页面的设计。1是HTML5中的图形元素。当它和结合使用后，我们能够语义化地将图片和相应的注释联系起来。我将在产品图片的展示的页面中使用，页面调用了photoswipe

34、.js来实现图片的展示。2支持多媒体的播放是HTML5技术的主要特色之一。HTML5中不单单有支持音频播放的元素，而且还具有有支持视频播放的元素。然而，它和很相似，浏览器的不同效果也有所不同。当用户访问页面时，在元素中加上preload=preload ，preload属性使得视频得以预载。为了渲染出播放控制条，我们必须在元素指定controls属性。这我将主要运用在视频的展示页面。运用HTML5的新属性进展页面的设计，主要表现于表单的验证。1pattern属性，它将无须服务器端的检测，与正如此表达式相结合，就可以判断各种的输入的文本格式，防止用户输入错误的信息。2required属性，指定了

35、输入信息的必要性，当文本框被指定必需输入的时候，如果空白的话表单就不能被提交，输入框将被高亮红色显示。3Autofocus 属性，是HTML5的新解决方案，能够起到和JavaScript的一样的效果。在一般情况下，如果提交表单的信息有误，可以利用自动聚焦属性，自动对焦具体错误的文本框。新元素主要运用于系统的留言页面和管理员登录页面中。其中，管理员登录的程序流程图，如图4-3所示。图 4-3 管理员登录的流程图此外，还引用高德地图的组件。它是基于HTML5实现的轻应用产品，专门为移动端定制，能够实现位置标注、路线规划、周边搜索、地图选址等功能的调用。响应速度飞快，支持iOS和Android的操作

36、系统，也适用于PC浏览器。它主要通过URL的形式调用该组件，用户可在URL按照不同的参数组合调用不同的功能。1dest参数，用于表示待标注点的坐标。坐标的格式为经纬，纬度，小数点后不超过6位。2destName参数，用于表示待标注点文字的描述。3hideRouteIcon参数，具有隐藏路线的功能。如果需要路线指引，不选择此参数即可。以上程序设计的具体代码，详见附录一。5 系统测试系统测试是在完成系统的各种设计之后进展的非常重要的一个阶段。这并不是只要系统能够运行这么简单，系统需要通过严格的测试，才能够最终投入使用。系统测试是使用正确或错误的输入方式，进一步验证输出的结果是否与期望的结果一致，从

37、而来判断开发的系统是否运行正常。本质上来讲，系统测试实际上是检测和发现的系统错误的过程。本系统的测试流程，如图5-1所示。测试数据系统程序期望结果测试结果评价信息评价测试图5-1 系统测试流程图5.1 系统测试的重要性随着互联网络的高速开展，一个新的观点被业界中越来越多的人颇为认同。那就是每一个系统的开发完成之后，要对开发的系统进展测试。以此来尽量争取系统的功能的实现都能准确无误。否如此，不同的错误有可能会相互影响，从而变成无法挽回的错误。等到系统正式投入使用后，再发现就为时已晚。 对于整个系统的开发来说，发现错误是必定会出现的过程。就算运用最新的语言和新的方式进展系统的开发，完全消灭错误也是

38、几乎不可能做到的事情。而这些错误的发现，还要从测试中找出来。系统中的错误与正确的比重，也要从测试里得到。所有的专业研究根本上都要有测试的参加，系统的开发也不例外。如今，系统测试已经成为了一门完整的学科体系。在系统的开发总本钱之中，25%到50%被测试所消耗。如果，维护的阶段也包括在的话，那将会更大的缩短系统测试的时间，维护工作就会很容易屡次发生。所以，我们必须对开发的系统进展相对应的二次测试甚至进展屡次测试。所以说，从全面的角度考虑来看，系统测试还是必须要存在的一个过程，也是必不可少的过程。5.2 测试实例的研究与选择在系统测试的方法中，我主要采用的是黑盒测试法。在测试中，对指定的功能测试其实

39、现的情况。下面仅仅只列举了局部功能模块的测试用例设计。管理员登录功能主要是测试依据是管理员是否能够成功进入后台系统，对其出现的几种情况进展测试，如表5-1所示。表 5-1 管理员登录后台功能测试用例表功能描述管理员登录用例目的检测管理员是否可以正常登陆前提条件该管理员存在输入期望输出实际情况直接点击“登录按钮登录不成功，弹出提示框“请输入用户名和密码!与期望输出一致输入数据库中存在的管理员的账号和密码，点击“登录按钮登录不成功，弹出提示框“请输入验证码!登录不成功，弹出提示框“验证码错误！输入存在的管理员账号、密码，点击“登录按钮登录成功，进入后台首页与期望输出一致针对视频管理模块中的视频上传

40、功能，可能出现的几种情况对其进展功能的测试，如表5-2所示。表 5-2 视频上传功能测试用例表功能描述管理员上传视频用例目的检测视频是否上传成功前提条件该管理员存在输入期望输出实际情况管理员的视频管理页：点击“添加视频按钮，输入视频标题和具体容，并选择视频，再点击“确定按钮视频上传成功，显示视频信息与期望输出一致管理员的视频管理页：点击“添加视频按钮，未输入视频名称和具体容，不选择视频，点击“确定按钮上传不成功，显示提示“名称不能为空、“请选择视频和“容不能为空与期望输出一致 续表5-2输入期望输出实际情况管理员的视频管理页：点击“添加视频按钮，输入视频名称，点击“确定按钮上传不成功，显示提示

41、 “请选择视频和“容不能为空与期望输出一致管理员的视频管理页：点击“添加视频按钮，输入具体容，点击“确定按钮上传不成功，显示提示“名称不能为空和“请选择视频与期望输出一致管理员的视频管理页：点击添加视频按钮，选择视频，点击“确定按钮添加不成功，显示提示“名称不能为空 和“容不能为空与期望输出一致针对前台显示模块中的用户留言功能，可能出现的几种情况对其进展功能的测试，如表5-3所示。表 5-3 用户留言功能测试用例表功能描述用户进展留言操作用例目的检测视频是否上传成功前提条件出现留言页面输入期望输出实际情况未输入任何容，直接点击 “提交留言按钮称呼、手机和留言容处出现“不能为空！的红字的提示与期

42、望输出一致输入称呼，点击“提交留言按钮留言和手机处出现“不能为空！的红字提示与期望输出一致输入称呼，输入手机号为“你好，输入留言，点击“提交留言按钮手机处出现“输入不正确!的红字提示与期望输出一致输入称呼为“123456，和留言，点击“提交留言按钮称呼处出现“请输入中文名称的红字提示与期望输出一致输入称呼、和留言信息后，点击“提交留言按钮弹出“留言成功，我们会与您联系！的对话框与期望输出一致我使用安卓和苹果手机进展测试，通过系统的测试，我希望能够达到以下的目标：1在功能实现上，系统都能满足用户的功能需求。2在数据反响上，对系统操作的信息能够正常反响到云服务器中。3在性能反响上，系统能够使手机用

43、户有更好的体验。5.3 系统运行情况与评价我通过系统的测试，所有需要测的试项目都已经通过测试。根本的功能已经实现，该系统能够正常的运行。对于微官网来说，系统评价是在系统发布在网络上去之后，对微官网在功能、速度和实用等等各个方面，进展的反响意见的收集。手机用户针对本微官网的评价如下：1反响速度良好，访问各个页面很迅速，节省了大量的时间。2交互界面友好，满足移动用户的观感和体验。2便捷的服务，让用户能够更快的与企业取得联系。6 系统展示本系统用HTML5技术进展前端显示，ASP.NET作为后端信息管理的开发，共有两大个模块，前台展示模块和后台管理模块。前台展示模块主要是对产品、视频、新闻和地图的展

44、示；后台管理模块包括管理员登录、产品管理、新闻管理、视频管理、评论管理和留言管理。6.1 前台展示模块通过扫描二维码进入系统前台首页，首页主要展示企业的简介信息，如图6-1所示，点击左上角的菜单图标，动态出现菜单列表，显示如图6-2所示。图 6-1 首页 图 6-2 菜单点击菜单中的视频选项，用户可以观看企业的相关视频信息，如图6-3所示。图 6-3 视频页面点击菜单中的新闻选项，用户可以看到新闻列表，如图6-4所示。点击图片进入新闻的详细信息页面，如图6-5所示。图 6-4 新闻列表页面 图 6-5 新闻详细容页在新闻详细容页面里可以进展新闻的评论，填入具体的评论信息，如图6-6所示。点击“

45、提交评论按钮后，弹出对话框，如图6-7所示。评论的信息会提交至后台管理系统，等待管理员审核。 图 6-6 填写评论信息 图 6-7 提交评论的提示点击菜单中的地图选项，用户定位企业的具体地理位置，如图6-8所示。图 6-8 地图页面点击菜单中的留言选项，用户可以进展留言，页面如图6-9所示。 图 6-9 留言页面6.2 后台管理模块管理员从后台对系统进展企业相关信息的管理操作时，需要在登录界面输入正确的管理员账号、管理员密码和验证码，图如图6-10所示。 图 6-10 系统登录页面 图 6-11 后台首页输入完成后，系统会对用户名密码和验证码进展判断，验证通过即可进入后台系统，后台首页的页面，

46、如图6-11所示。管理员进入后台，进展产品信息的管理。管理员可以对产品信息进展修改和删除的操作，如图6-12所示。点击“添加产品按钮，进入添加产品页面，如图6-13所示。管理员输入产品的相关信息。输入完成以后点击“确定按钮，即可更新系统前台页面上的产品信息。 图 6-12 产品管理页面 图6-13 产品添加界面管理员进入后台，进展新闻信息的管理。管理员可以对新闻信息进展修改和删除的操作，如图6-14所示。点击“添加资讯按钮，进入添加新闻页面，如图6-15所示。管理员将新闻的相关信息输入后，点击“确定按钮，即可更新系统新闻页面上的新闻信息。 图 6-14 新闻管理页面 图 6-15 新闻添加页面

47、管理员进入后台，进展视频的管理。管理员可以对视频信息进展删除的操作，界面如图6-16所示。点击“添加视频按钮，进入视频上传页面，如图6-17所示。管理员能上传视频，输入视频信息后，点击“确定按钮，视频列表上就会出现新的视频信息。操作完会更新系统视频页面上的视频信息。图 6-16 视频管理界面图 图 6-17 上传视频界面管理员进入后台，进展评论的管理，页面如图6-18所示。点击“查看按钮能够查看这篇新闻的评论。进入评论列表页面，管理员能够对用户的评论进展审核、回复和删除的操作，如图6-19所示。点击通过按钮，评论审核通过。点击回复按钮，进入评论回复页面，管理员可以回复评论，如图6-20所示。操

48、作完会更新系统新闻页面上的评论和回复信息，如图6-21所示。 图 6-18 评论管理页面 图 6-19 评论列表页面图 6-20 评论回复页面 图 6-21 前台新闻评论页面管理员进入后台，进展留言的管理，如图6-22所示。管理员可以对留言信息进展删除操作，还可以点击拨打按钮与留言者取得联系。图6-22 留言管理页面通过二维码扫描，使微官网变成轻APP化的形式。它的交互性能强大，菜单层次清晰，图文并茂简洁生动的页面，产生出来的视觉效果良好。它还具有便捷的服务功能，能够满足用户的需求。它即是一个信息管理系统，能够实现企业各种信息的便捷的发布与管理，又是一件宣传利器，能够有利于企业在线下进展宣传和

49、推广。结论随着移动互联网的飞速开展，人们越来越离不开对移动互联网的运用。它为人类社会的需求指引了方向，而基于HTML5的 微官网就是根据现代网络社会的需求而出现的产品。在此根底上，可以使用全新的技术和标准来实现客户端的网页化。所以，运用HTML5的技术进展大胆实践有着更加重要的意义。在微官网的设计与实现中，页面的呈现上，使用了HTML5的新特性。在它的功能实现上，运用ASP.NET技术，以SQLServer为数据库，实现对信息的管理。让微官网容展示更加丰富，管理更加便捷。系统开发完之后，对系统进展测试，进而证明微官网根本能够达到企业的各项功能指标。采用HTML5技术后，能使得微官网的页面更加的

50、美观，具备良好的交互性能。简单便捷的操作，使其具备鲜明的特色，进一步提升企业的宣传力度。由于在系统开发中，我的经验不是那么足够，也有种种的问题出现在系统的设计过程中。同时，也因为毕业设计作品的时间有限，我在系统测试方面做得并不是很全面，在系统的功能实现上，有可能会导致表现不够得还不够完美的情况，在系统的操作中有可能会误导用户的操作。微官网在正式投入使用中，可能还或多或少的存在一些问题。但是，我们能够通过广阔手机用户的反响敬进一步优化，从而与时对系统进展改良。更加满足现实生活中实际情况的需要，使得成为规、合理的微官网。参考文献1 雅婷.4G移动网络现状与前景展望J.电脑知识与技术,2014,4(

51、20):4682-4683.2 任晨.贺兰县图书馆微官网信息平台开通J.图书馆理论与实践,2015,5(11):32.3 何华康.H5技术:网络与新媒体的创新开展J.中国报业,2016,6(5):68.4 仇善梁.基于HTML5对传统的移动化重构J.职业技术学院学报,2016,3(1):99-102.5 常永英.ASP.NET程序设计教程(C#版)M.:机械工业,2009:6-12.6 培文,小祥.ASP.NET程序设计教程M.:中国人民大学,2009:8-15.7 肖金秀,沃辉,少涌.ASP.NET 程序设计教程M.:冶金工业,2003:33-50. 8 武万军.SQL数据库的构建与安全性维

52、护技术方案研究J.数字技术与应用,2016,6(3):210.9 长林.ASP.NET+SQL Serve动态开发与实例M.:清华大学,2006:5-9.10 庞春辉.基于Web企业管理系统的设计D.:理工大学计算机工程系,2008.11 琨怡.企业信息管理系统在应用中的问题与对策J.时代经贸,2008,6(14):368.12 秀野堂主,宇捷,罗睿.论道HTML5M.:人民邮电.2012:125-188.13 国荣.HTML5实战M.:机械工业,2011:78-95.14 陆凌牛.HTML5与CSS3权威指南M.:机械工业,2011:101-122.15 习伟.HTML5+CSS3网页开发M

53、.:清华大学,2013:45-102. 16 Taivalsaari A;Mikkonen T;Anttonen M The Death of Binary Software:End User Software Moves to the Web 2011.附录一关键技术的程序设计/强制让文档与设备的宽度保持1：1，适应所以设备的显示。/网页预加载功能/定义整个页面的首部/定义导航容首页 产品图库 视频 新闻 地图 留言/定义网页的底部容 Copyright © 2016. 宏博油画工作室 All rights reserved.闽ICP备15015363号-2 - 帕尔力提供技术支持 管理员登录/主页的介绍信息厂家直销零距离的协手合作，诚心见成效。专业油画质量为您定制私人的油画，提供专业的墙绘壁画。 费用最少为您节省更少的开支，提供最实在的油画品质。/定义产品图片信息ahref=imgclass=tpsrc=/视频播放videosrc=controlspreloadloopclass=sp3data-width=100%/