基于HTML的微官网设计和实现.doc

资源描述

阳光学院本科毕业论文、毕业设计题目：基于HTML5微官网设计和实现系别：计算机工程系专业：计算机科学和技术年级：级学号：姓名：黄陈力指导老师：年月日基于HTML5微官网设计和实现摘要微信商业价值不停凸显，睿智企业主跃跃欲试，一个属于移动互联网大时代呼之欲出，手机用户正在逐步成为企业关键消费人群，用户大多更倾向于使用手机、平板等终端工具浏览信息，企业假如要想取得更多用户青睐，手机官方网站设计和实现就显尤为关键，微官网是一个基WebAp和PC版网站相融合新型网站，建立微官网对提升企业形象，促进企业产品宣传，提升用户产品体验，从而赢得更多移动用户群体等均起到了关键推进作用，成为企业进行营销另一个方法和路径。论文关键是完成基于HTML5微官网设计和实现，以文字、图片、视频等多个丰富多媒体形式向用户展示企业产品信息。微官网页面展现关键是基于目前流行HTML5新特征，利用HTML5技术，优化网站显示，能够自动识别窗户屏幕大小，完全适适用于手机、平板，网站内容精简，加载速度很快，让手机用户更方便浏览信息，同时兼具一键拔打电话、一键分享及在线留言、地图导航等功效，让微官网内容展示愈加丰富，管理愈加便捷。系统关键基于ASP.NET进行程序开发，利用SQLServer数据库来存放数据，同时采取 HTML5技术来实现微官网页面展示。论文首先分析了系统开发环境，接着关键介绍了系统可行性分析、系统概要设计及具体设计，技术实现难点，最终完成了系统功效测试。本论文关键实现基于HTML5漳州市宏博油画微官网，该网站经过一段时期运行测试，能以丰富图文形式向用户展示企业信息，企业油画产品，完成企业产品信息管理，实现了企业和用户之间互动交流，从而提升企业在移动网络里宣传力度，从而为企业赢得更多移动用户群体。关键词：微官网 HTML5 ASP.NET 目录 1 绪论 1 1.1 研究现实状况 1 1.2 发展前景 2 1.3 本论文创新点 2 2 系统开发工具 3 2.1 HTML5 3 2.2 ASP.NET 3 2.3 SQLServer 4 3 系统分析 5 3.1 项目概述 5 3.2 需求分析 5 3.3 可行性分析 6 3.4 业务分析 7 3.5 数据流分析 8 4 系统设计 13 4.1 功效模块设计 13 4.2 数据库设计 14 4.3 程序设计 16 5 系统测试 19 5.1 系统测试关键性 19 5.2 测试实例研究和选择 20 5.3 系统运行情况和评价 22 6 系统展示 23 6.1 前台展示模块 23 6.2 后台管理模块 26 结论 30 参考文件 31 附录一 32 致谢 36 1 绪论 1.1 研究现实状况依据中国网络发展现实状况调查得出，中国手机上网人数已达6亿多，和相比，人数上增6303万人，图1-1所表示。可见，手机已经成为每个人不可或缺部分。移动互联网成为一个方便快捷信息获取手段和沟通交流方法，它已经深深融入手机用户群体日常生活之中。图 1-1 手机用户百分比图在移动网络发展中，尤其是4G[1]产生，移动网络优越性愈发凸显，使得大家和移动设备和移动互联网接触越来越频繁。伴随手机智能化发展，安装不一样操作系统手机，含有了功效强大浏览器后，使得它功效跟电脑操作显示效果愈加靠近。手机换代也使得手机浏览器伴随不停优化和升级，这也为HTML5技术在移动移动网络方向发展提供源源不停动力。由此，用户大多使用手机进行信息浏览。不过，很多网站在手机上显示效果并不好。网站设计所以出现了新要求，就是网站必需要适应移动设备显示，这使得手机网站由此诞生。利用HTML5技术，优化网站显示，让手机用户更方便浏览信息。手机网站能够图文并茂展现企业信息，从而为企业营销市场开拓了一条宽广道路。 1.2 发展前景现在，层出不穷现代信息技术服务模式，对传统信息化服务系统产生一定影响。用户大多使用手机浏览信息，而企业要想取得手机用户青睐，手机网站搭建就必不可少。微网站靠着移动网络和手机网站支持，成为企业进行营销另一个方法和路径。在现在手机用户居多情况下，建立微官网将能够是用户有愈加好体验，从而提升企业形象，赢得更多移动用户群体，推进企业发展。微官网是一个基于WebApp和传统PC版网站相融合新型网站。可快速和微信、微博等网络互动咨询平台链接。[2] 微官网能够实现用户随时随地经过手机了解企业信息，而且还能实现一键通话、新闻评论和留言等等功效。微官网比电脑版网站更有优势。它是应移动互联网大环境而生，移动互联网为微官网搭建了一个随时可供浏览大平台。而相对于电脑版官网，微官网省去了很多操作步骤，符合现代快节奏生活环境，让用户有更方便快捷体验。微官网不仅仅实现了电脑版网页应该有功效，而且能够以更完美显示效果展现给手机用户。微官网含有网站内容精简，页面资源小，加载速度很快，能够和微信公共平台完美结合特点。微官网作为展示、营销、互动和服务载体，能够包罗绝大部分功效实现，它将成为中小型企业必不可少关键部分。现在移动网络社会中，出现越来越多借助微信浏览器而开发新型网站，而微官网设计和实现将对企业营销能够起到一定作用。 1.3 本论文创新点目前层出不穷现代信息技术服务模式，对传统信息化服务系统产生了深远影响，假如企业要想取得更多用户青睐，手机网站设计和实现就显尤为关键，这就为微官网产生和发展奠定良好基础。本文意在完成一款美观实用基于HTML5企业微官网设计和实现，本文创新点在于：（1）引入微官网设计理念，实现跨平台营销型网站。微网站是一个跨移动平台营销型网站，它源于WebApp和网站融合创新，兼容iOS、android、WP等各大操作系统，可方便于微信、微博等应用链接，适应现在移动用户端浏览市场，是符合浏览体验和交互性能要求新一代网站。（2）引入目前流行HTML5技术来完成微官网页面设计和展示。采取目前流行HTML5技术来完成微官网页面设计和展示。优化网站显示，能够自动识别窗户屏幕大小，完全适适用于手机、平板，网站内容精简，加载速度很快，让手机用户更方便浏览信息。 2 系统开发工具 2.1 HTML5 HTML5（简称“H5”）是万维网关键语言、标准通用标识语言下一个应用超文本标识语言（HTML）第五次重大修改。现在，H5技术正处于不停发展过程中，作为移动轻应用，它在未来含有没有限可能，潜力巨大。[3] HTML5是W3C和谷歌、苹果等几百家企业一起得出来结果。 HTML5最大好处于于它是一个开放技术,而且含有基于Webkit[4]内核浏览器这个最大特点，将会是未来移动开发技术发展趋势。当今主流浏览器全部支持HTML5，HTML5在未来5-中，将成为移动发展一个关键原因。 HTML5以开放Web标准为基础，开发出来较为完备新编程规范。它含有视频和音乐展示和动态效果，含有强大离线存放功效等等特点。利用HTML5技术进行设计，简单易懂易用，它能够实现让同一张网页自动适应不一样大小屏幕，再依据屏幕宽度，自动调整进行页面布局。HTML5技术能够在移动设备上支持多媒体。它含有新语法特征，也能够实现部分新功效，用户和文档交互方法受到了本质性改变。从性能角度来说，HTML5首先是缩减了HTML文档，使这件事情变得更简单。从用户可读性上说，原先一大堆东西对初学者来说，第一次看到这些东西是看不懂，而HTML5申明方法对用户来说显然更友好部分。 2.2 ASP.NET ASP.NET是.NET FrameWork一部分，是一项微软企业技术，是一个使嵌入网页中脚本，是可由因特网服务器实施服务器端脚本技术。它能够在经过HTTP请求文档时，在Web服务器上动态创建Active Server Pages（动态服务器页面），而且运行于IIS（Windows开发Web服务器）之中程序。在微软.NET战略中，新推出ASP.NET。它是建立在公共语言运行库基础上，借鉴了Java技术优点。ASP.NET推荐语言是C Sharp[5]语言，对以前ASP安全性差等缺点进行了相当大改善。在实施ASP.NET时候，程序引擎调用了系统中IIS[6]服务器，实施对嵌在HTML中ASPX文件进行解释，最终以页面形式显示。不过，使用ASP.NET还是含有一定不足。因为，从某种角度来说，它们只能良好运行于微软 Windows NT//XP 和IIS服务器平台上。没有和ChilliSoft[7]一样，提供在UNIX/Linux上运行ASP处理方案。所以，平台不足和ASP.NET安全性限制了ASP.NET广泛利用。 2.3 SQLServer SQL是英文Structured Query Language缩写，汉字称作结构化查询语言。SQL被几乎一切数据库操作命令所认同，成为关系型数据库管理系统标准语言。SQL命令输入能够实现对数据库操作和管理。比如，在数据库中进行增加、删除和更新数据，或从数据库中提取数据等一系列操作进行数据管理。SQL数据库是储存和管理数据信息智能化操作平台。[8] SQL Server是由Microsoft开发和推广关系数据库管理系统（DBMS），它最初是由Microsoft、Sybase和Ashton-Tate三家企业共同开发。它性能超群，集成了Windows NT/平台[9]，和Web搭建配合紧密，得到网络和存放技术支持，使得最大程度地提升了WEB站和企业应用扩展性和保障性，应用于Internet领域。而且，SQL Server 提供了十分便民缺省安装和使用方法，使用起来难度并不大。另外，SQL Server还能够兼顾规模不一样应用，含有很强实用性。其中SQL Server 是一个重大产品版本，它推出了很多新特征和关键改善，是较为强大和全方面SQL Server版本。SQL Server 许可在使用Microsoft .NET和 Visual Studio开发自定义应用程序中使用数据，在面向服务架构（SOA）和经过 Microsoft BizTalk Server进行业务步骤中使用数据。它能够组织管理任何数据，能够将结构化、半结构化和非结构化文档数据直接存放到数据库中。还能够对数据进行查询、搜索、同时、汇报和分析之类操作。信息工作人员能够直接访问数据，是一个可信、高效率智能数据平台，能够满足用户全部数据需求。 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，使用SQLServer数据库。微官网关键是在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 统计组成：项目名：新闻编号新闻标题新闻内容公布时间点击量近似长度： 5 50 300 50 5 表 3-5 评论数据存放表数据存放系统名：微官网编号：D8 条目名：评论表别名：论坛表存放组织：每个评论一个统计主关键字：评论编号统计数：约800 统计组成：项目名：评论编号新闻编号昵称评论内容近似长度： 5 5 50 100 表 3-6 新闻管理数据加工表数据加工系统名：微官网编号：4 条目名：新闻管理别名：资讯管理输入数据流：新闻操作信息、评论信息输出数据流：新闻信息、回复信息加工逻辑：对新闻信息进行查询、增加、修改和删除简明说明：对新闻相关信息进行管理表 3-7 用户外部项表外部项系统名：微官网编号：E2 条目名：用户别名：用户输入数据流：评论信息、留言信息输出数据流:产品信息、图库信息、新闻信息、视频信息、回复信息、外链信息关键特征：用户是浏览微官网人简明说明：用户浏览微官网，对新闻进行评论，能够给管理员留言。表 3-8 操作分类部项表外部项系统名：微官网编号：E3 条目名：操作分类别名：操作类别输入数据流：操作信息输出数据流:产品操作信息、新闻操作信息、视频操作信息、外链操作信息关键特征：管理具体操作信息简明说明：依据操作信息不一样，对系统进行不一样操作。 4 系统设计 4.1 功效模块设计依据对环境具体调研，和用户需求进行分析，本系统关键有管理员和用户这两种角色，能够将系统划分为前台展示和后台管理这两大模块。其中，前台展示模块关键功效包含信息展示、用户评论、用户留言、信息分享和一键联络；后台管理模块包含留言管理、信息管理、评论管理和外链管理。具体系统功效模块，图4-1所表示。图 4-1 功效模块图 4.2 数据库设计微官网是采取SQLServer数据库完成设计，是由最广大手机用户和企建起业共同组来信息平台，它开发和设计从数据检索，到插入或删除等等操作，全部依靠于背后数据库系统支持。对系统进行分析后，我在数据库设计里，需要清楚各个实体之间联络。对此，我进行数据库概念结构设计，图4-2所表示。图 4-2 E-R图依据以上数据库实体之间联络，我深入对数据库表进行具体设计。（1）系统管理员表(admin)关键存放系统管理员信息，如表4-1所表示。表 4-1 管理员表字段名称数据类型主键自增许可为空描述 aId Int 是增1 不许可编号 adminName Varchar(50) 否无许可登陆账号 adminPwd Varchar(50) 否无许可登陆密码（2）产品表(Product)关键存放系统产品信息，如表4-2所表示。表 4-2 产品表字段名称数据类型主键自增许可为空描述 Id Int 是增1 不许可编号 Gid Int 否无许可图片编号 Info Varchar(50) 否无许可产品内容（3）图库表(Gallery)关键存放系统图片信息，如表4-3所表示。表 4-3 图库表字段名称数据类型主键自增许可为空描述 Id Int 是增1 不许可编号 Gname Varchar(50) 否无许可图片标题 Path Varchar(100) 否无许可存放位置（4）新闻表(News)关键存放系统新闻资讯信息，如表4-4所表示。表 4-4 新闻表字段名称数据类型主键自增许可为空描述 Id Int 是增1 不许可编号 Title Varchar(50) 否无许可新闻标题 Time Datetime 否无许可公布时间 Photo Varchar(100) 否无许可新闻图片 Content text 否无许可新闻内容 Hit Int 否无许可点击量（5）评论表(Blog)关键存放系统新闻评论信息，如表4-5所表示。表 4-5 评论表字段名称数据类型主键自增许可为空描述 Id Int 是增1 不许可编号 Title Varchar(50) 否无许可新闻标题 Name Varchar(50) 否无许可用户昵称 Time Datetime 否无许可评论时间 Nid Int 否无许可新闻编号 Message Text 否无许可评论内容续表4-5 字段名称数据类型主键自增许可为空描述 Examine Varchar(50) 否无许可评论审核 Reply Text 否无许可回复评论（6）视频表(Video)关键存放系统视频信息，如表4-6所表示。表 4-6 视频表字段名称数据类型主键自增许可为空描述 Id Int 是增1 不许可编号 Title Varchar(50) 否无许可视频标题 Vedio Varchar(100) 否无许可视频位置 Info Varchar(50) 否无许可视频内容（7）留言表(Contacts)关键存放系统留言信息，如表4-7所表示。表 4-7 留言表字段名称数据类型主键自增许可为空描述 Id Int 是增1 不许可编号 Time Datetime 否无许可留言时间 Name Varchar(50) 否无许可姓名 Tel Varchar(50) 否无许可联络电话 Message Text 否无许可留言内容（8）外链表(Extends)关键用于系统管理员对留言信息管理，如表4-8所表示。表 4-8 外链表字段名称数据类型主键自增许可为空描述 Id Int 是增1 不许可编号 Title Varchar(50) 否无许可链接标题 Link Varchar(300) 否无许可链接地址 4.3 程序设计整个微官网由HTML5标准进行设计。HTML5标准形式简练，最显著标志就是代码首行不带版本信息和其它内容网页申明，原先HTML网页申明是一串很长字符串。HTML5新标签使用和利用JQuery能够做出炫丽2D或3D效果美化网站，带给人一个耳目一新感觉。利用HTML5预加载功效进行设计。它能够针对指定地址预加载页面或页面中特定资源，利用浏览器空闲时间去先下载指定内容，放入缓存。这么，下次浏览这个页面时候,就能够直接从缓存中取出来，提升页面加载速度。而我将预加载图库页面和新闻页面，这么来提升图片和新闻页面加载速度。利用HTML5新标签进行页面设计。（1）meta标签，使用这个标签强制让文档和设备宽度保持1：1，适应所以设备显示。其中，初始缩放百分比initial-scale为1.0，也就代表网页初始大小占屏幕面积100%。（2）Header标签，用它来将页面首部进行定义，其中调用了custom.js和easing.js来实现导航栏滑动开关。（3）Nav标签，用它进行导航内容定义，愈加轻易被识别。（4）Footer标签，用它来将网页底部内容进行定义。其中，small标签被用来定义小字，用于解释网站底部正确版权信息。（5）section和article标签，它们能够相互嵌套使用。换句话说，它们之间没有上和下级联络。在section标签里能够嵌套article标签，article标签也能够包含section标签。它们全部全部能成为一个整体。然而，article标签代表文章，文章就是一段完整独立内容。某种意义上，section标签也能够看成html标准里面div块，不过比div更含有语义标签。利用HTML5新元素进行页面设计。（1）<figure>是HTML5中图形元素。当它和<figcaption>结合使用后，我们能够语义化地将图片和对应注释联络起来。我将在产品图片展示页面中使用，页面调用了photoswipe.js来实现图片展示。（2）支持多媒体播放是HTML5技术关键特色之一。HTML5中不单单有支持音频播放<audio>元素，而且还含有有支持视频播放<video>元素。然而，它和<audio>很相同，浏览器不一样效果也有所不一样。当用户访问页面时，在<video>元素中加上preload="preload" ，preload属性使得视频得以预载。为了渲染出播放控制条，我们必需在<video>元素内指定controls属性。这我将关键利用在视频展示页面。利用HTML5新属性进行页面设计，关键表现于表单验证。（1）pattern属性，它将无须服务器端检测，和正则表示式相结合，就能够判定多种输入文本格式，预防用户输入错误信息。（2）required属性，指定了输入信息必需性，当文本框被指定必需输入时候，假如空白话表单就不能被提交，输入框将被高亮红色显示。（3）Autofocus 属性，是HTML5新处理方案，能够起到和JavaScript一样效果。在通常情况下，假如提交表单信息有误，能够利用自动聚焦属性，自动对焦具体错误文本框。新元素关键利用于系统留言页面和管理员登录页面中。其中，管理员登录程序步骤图，图4-3所表示。图 4-3 管理员登录步骤图另外，还引用高德地图组件。它是基于HTML5实现轻应用产品，专门为移动端定制，能够实现位置标注、路线计划、周围搜索、地图选址等功效调用。响应速度飞快，支持iOS和Android操作系统，也适适用于PC浏览器。它关键经过URL形式调用该组件，用户可在URL根据不一样参数组合调用不一样功效。（1）dest参数，用于表示待标注点坐标。坐标格式为（经纬，纬度），小数点后不超出6位。（2）destName参数，用于表示待标注点文字描述。（3）hideRouteIcon参数，含有隐藏路线功效。假如需要路线指导，不选择此参数即可。以上程序设计具体代码，详见附录一。 5 系统测试系统测试是在完成系统多种设计以后进行很关键一个阶段。这并不是只要系统能够运行这么简单，系统需要经过严格测试，才能够最终投入使用。系统测试是使用正确或错误输入方法，深入验证输出结果是否和期望结果一致，从而来判定开发系统是否运行正常。本质上来讲，系统测试实际上是检测和发觉系统错误过程。本系统测试步骤，图5-1所表示。测试数据系统程序期望结果测试结果评价信息评价测试图 5-1 系统测试步骤图 5.1 系统测试关键性伴随互联网络高速发展，一个新见解被业界中越来越多人颇为认同。那就是每一个系统开发完成以后，要对开发系统进行测试。以此来尽可能争取系统功效实现全部能正确无误。不然，不一样错误有可能会相互影响，从而变成无法挽回错误。等到系统正式投入使用后，再发觉就为时已晚。对于整个系统开发来说，发觉错误是肯定会出现过程。就算利用最新语言和新方法进行系统开发，完全消亡错误也是几乎不可能做到事情。而这些错误发觉，还要从测试中找出来。系统中错误和正确比重，也要从测试里得到。全部专业研究基础上全部要有测试加入，系统开发也不例外。现在，系统测试已经成为了一门完整学科体系。在系统开发总成本之中，25%到50%被测试所消耗。假如，维护阶段也包含在内话，那将会更大缩短系统测试时间，维护工作就会很轻易数次发生。所以，我们必需对开发系统进行相对应二次测试甚至进行数次测试。所以说，从全方面角度考虑来看，系统测试还是必需要存在一个过程，也是必不可少过程。 5.2 测试实例研究和选择在系统测试方法中，我关键采取是黑盒测试法。在测试中，对指定功效测试其实现情况。下面仅仅只列举了部分功效模块测试用例设计。管理员登录功效关键是测试依据是管理员是否能够成功进入后台系统，对其出现多个情况进行测试，如表5-1所表示。表 5-1 管理员登录后台功效测试用例表功效描述管理员登录用例目标检测管理员是否能够正常登陆前提条件该管理员存在输入期望输出实际情况直接点击“登录”按钮登录不成功，弹出提醒框“请输入用户名和密码!” 和期望输出一致输入数据库中存在管理员账号和密码，点击“登录”按钮登录不成功，弹出提醒框“请输入验证码!” 登录不成功，弹出提醒框“验证码错误！” 输入存在管理员账号、密码，点击“登录”按钮登录成功，进入后台首页和期望输出一致针对视频管理模块中视频上传功效，可能出现多个情况对其进行功效测试，如表5-2所表示。表 5-2 视频上传功效测试用例表功效描述管理员上传视频用例目标检测视频是否上传成功前提条件该管理员存在输入期望输出实际情况管理员视频管理页：点击“添加视频”按钮，输入视频标题和具体内容，并选择视频，再点击“确定”按钮视频上传成功，显示视频信息和期望输出一致管理员视频管理页：点击“添加视频”按钮，未输入视频名称和具体内容，不选择视频，点击“确定”按钮上传不成功，显示提醒“名称不能为空”、“请选择视频”和“内容不能为空” 和期望输出一致续表5-2 输入期望输出实际情况管理员视频管理页：点击“添加视频”按钮，输入视频名称，点击“确定”按钮上传不成功，显示提醒 “请选择视频”和“内容不能为空” 和期望输出一致管理员视频管理页：点击“添加视频”按钮，输入具体内容，点击“确定”按钮上传不成功，显示提醒“名称不能为空”和“请选择视频” 和期望输出一致管理员视频管理页：点击添加视频按钮，选择视频，点击“确定”按钮添加不成功，显示提醒“名称不能为空” 和“内容不能为空” 和期望输出一致针对前台显示模块中用户留言功效，可能出现多个情况对其进行功效测试，如表5-3所表示。表 5-3 用户留言功效测试用例表功效描述用户进行留言操作用例目标检测视频是否上传成功前提条件出现留言页面输入期望输出实际情况未输入任何内容，直接点击 “提交留言”按钮称呼、手机和留言内容处出现“不能为空！”红字提醒和期望输出一致输入称呼，点击“提交留言”按钮留言和手机处出现“不能为空！”红字提醒和期望输出一致输入称呼，输入手机号为“你好”，输入留言，点击“提交留言”按钮手机处出现“输入号码不正确!”红字提醒和期望输出一致输入称呼为“123456”，电话号码和留言，点击“提交留言”按钮称呼处出现“请输入汉字名称”红字提醒和期望输出一致输入称呼、电话号码和留言信息后，点击“提交留言”按钮弹出“留言成功，我们会和您联络！”对话框和期望输出一致我使用安卓和苹果手机进行测试，经过系统测试，我期望能够达成以下目标：（1）在功效实现上，系统全部能满足用户功效需求。（2）在数据反馈上，对系统操作信息能够正常反馈到云服务器中。（3）在性能反应上，系统能够使手机用户有愈加好体验。 5.3 系统运行情况和评价我经过系统测试，全部需要测试项目全部已经经过测试。基础功效已经实现，该系统能够正常运行。对于微官网来说，系统评价是在系统公布在网络上去以后，对微官网在功效、速度和实用等等各个方面，进行反馈意见搜集。手机用户针对本微官网评价以下：（1）反应速度良好，访问各个页面很快速，节省了大量时间。（2）交互界面友好，满足移动用户观感和体验。（2）便捷服务，让用户能够愈加快和企业取得联络。 6 系统展示本系统用HTML5技术进行前端显示，ASP.NET作为后端信息管理开发，共有两大个模块，前台展示模块和后台管理模块。前台展示模块关键是对产品、视频、新闻和地图展示；后台管理模块包含管理员登录、产品管理、新闻管理、视频管理、评论管理和留言管理。 6.1 前台展示模块经过扫描二维码进入系统前台首页，首页关键展示企业介绍信息，图6-1所表示，点击左上角菜单图标，动态出现菜单列表，显示图6-2所表示。图 6-1 首页图 6-2 菜单点击菜单中视频选项，用户能够观看企业相关视频信息，图6-3所表示。图 6-3 视频页面点击菜单中新闻选项，用户能够看到新闻列表，图6-4所表示。点击图片进入新闻具体信息页面，图6-5所表示。图 6-4 新闻列表页面图 6-5 新闻具体内容页在新闻具体内容页面里能够进行新闻评论，填入具体评论信息，图6-6所表示。点击“提交评论”按钮后，弹出对话框，图6-7所表示。评论信息会提交至后台管理系统，等候管理员审核。图 6-6 填写评论信息图 6-7 提交评论提醒点击菜单中地图选项，用户定位企业具体地理位置，图6-8所表示。图 6-8 地图页面点击菜单中留言选项，用户能够进行留言，页面图6-9所表示。图 6-9 留言页面 6.2 后台管理模块管理员从后台对系统进行企业相关信息管理操作时，需要在登录界面输入正确管理员账号、管理员密码和验证码，图图6-10所表示。图 6-10 系统登录页面图 6-11 后台首页输入完成后，系统会对用户名密

展开阅读全文