-HTML5企业门户 - 图文

编 号：

审定成绩：

毕业设计（论文）

设计（论文）题目：

基于HTML5的企业门户网站

摘 要

随着科技的飞速发展，时代的不断变迁，人们对于信息的渴望程度日益剧增，对随时随地都能够获取信息更是充满期待，对获取的信息的真实性、安全性等的要求也是越来越高。伴随着人们的审美观念不断提高，对视觉效果上的追求也是越来越苛刻，传统的Web开发已不能满足人们的需求，对于前台开发者来说更是迫切需求一种全新的开发模式。至此一场前所未有，盛况空前的变革正在侵袭，那就是HTML5——新一代的Web标准。伴随着移动物联网行业高速发展，HTML5亦将对移动终端设备提供亲和式的支持，人们的生活方式将发生翻天覆地的变化，一场以“HTML5为中心”的大变革将带来难以预见的影响。

随着整个HTML5研发团队对HTML5标准的不断改进优化，HTML5技术已经变的相当的成熟与健壮，并且已发展成为了一种Web设计的潮流，HTML5丰富多彩的应用已经融入到我们周围触手可及的各个环境中，给我们带来了一种全新的不一样的Web体验。

本文完成了一个基于HTML5的企业网站的设计与实现。本文的研究工作主要是运用软件工程原理，对这个系统进行需求分析、设计、代码实现。

本文的前两部分介绍了课题背景和相关技术。在第三部分需求分析中，以用例模型为工具，分析了本系统的功能需求和非功能需求。第四部分介绍了本系统的设计与实现，是本文的重点，所有内容都是围绕这个主题来展开论述的。在这一部分中，详细介绍了基于HTML5的企业门户网站设计、实现和各个过程中存在的问题与解决方法。

通过对基于HTML5企业门户网站开发过程的介绍，可以了解到一个HTML5应用的开发过程。近年来，由于HTML5的异军突起，针对HTML5应用的开发将有着广阔的前景。

【关键词】HTML5 企业门户网站 ASP.NET

重庆邮电大学本科毕业设计（论文）

ABSTRACT

With the rapid development of science and technology, constantly changing times, people desire for increasing the degree of information whenever and wherever possible, to have access to information is full of expectations, authenticity, security, access to the information requirements is also more and more high. With the aesthetic concept of people continue to improve, more demanding of visual effect is also the pursuit of more traditional Web development, already cannot satisfy people's needs, for the developer is urgently needs a new development model. Thus a hitherto unknown, unprecedented changes are invasive, it is HTML5 -- a new generation of Web standards. With the rapid development of animal industry shift network, HTML5 will also be on the mobile terminal equipment to provide affinity support, people's way of life will be changes in turn the world upside down, with a \

Along with the HTML5 development team of HTML5 standard continuous improvement, maturity and strong HTML5 technology has changed, and has become a Web design flow, the application of HTML5 has been integrated into our rich and colorful of each environment around within reach, gives us a new and different Web experience.

This paper completed the design and implementation of HTML5 enterprise website based on a. The main research work of this paper is using the software engineering principle, carries on the demand analysis, the system design, code implementation.

The two part introduces the background and related technologies. In the third part of the demand analysis, use case model, analysis the system function requirements and non functional requirements. The fourth part introduces the design and Realization of the system, is the focus of this paper, all the contents are organized around the theme to discuss. In this part, a detailed introduction to the HTML5 enterprise portal based on the design, implementation and the existence of various problems and solutions during.

By HTML5-based enterprise portal development process introduction, you can learn a HTML5 application development process. In recent years, the sudden emergence of HTML5 for HTML5 application development will have a broad prospect.

【Key words】HTML5 Enterprise Portal ASP.NET

重庆邮电大学本科毕业设计（论文）

目 录

前 言 .................................................................................................................................................. 1 第一章 相关技术、工具分析与介绍 .............................................................................................. 2

第一节 企业门户网站 ................................................................................................................. 2

一、企业门户网站是什么 .................................................................................................... 2 二、建好企业网站的意义 .................................................................................................... 2 三、有关企业门户网站建设的问题 .................................................................................... 3 四、问题的解决 .................................................................................................................... 3 第二节 HTML5简介 ...................................................................................................................... 3

一、什么是HTML5？ ......................................................................................................... 3 二、HTML5有哪些新特性特性？ ..................................................................................... 4 三、HTML5应用 ................................................................................................................. 6 第三节 ASP.NET简介 .................................................................................................................. 7

一、什么是ASP.NET？ ......................................................................................................... 7 二、ASP.ENT的优点 ............................................................................................................. 7 三、ASP.NET应用 ............................................................................................................... 7 第四节 Microsoft SQL Server 2008 R2数据库 ......................................................................... 8 第五节 JavaScript脚本语言 ....................................................................................................... 8 第六节 本章小结 ......................................................................................................................... 8 第二章 基于HTML5构建企业门户网站设计的需求分析 .......................................................... 9

第一节

项目概述 ..................................................................................................................... 9

第二节 功能性需求 ................................................................................................................... 10

一、注册 .............................................................................................................................. 10 二、登陆 .............................................................................................................................. 10 三、查看信息 ...................................................................................................................... 10 四、留言 .............................................................................................................................. 10 五、个人设置 ...................................................................................................................... 10 第三节 非功能性需求 ............................................................................................................... 10

一、界面需求 ...................................................................................................................... 10 二、通用性需求 .................................................................................................................. 11 三、可靠性需求 .................................................................................................................. 11 四、可扩展性需求 .............................................................................................................. 11

重庆邮电大学本科毕业设计（论文）

五、异常处理 ...................................................................................................................... 11 第四节 项目用例图 ................................................................................................................... 11

一、普通用户 ...................................................................................................................... 11 二、管理员 .......................................................................................................................... 12 第五节 本章小结 ....................................................................................................................... 13 第三章 基于HTML5构建企业门户网站的设计与实现 ............................................................ 14

第一节 数据库设计 ................................................................................................................... 14 第二节 功能框架设计 ............................................................................................................... 16

一、注册模块。 .................................................................................................................. 16 二、登陆模块 ...................................................................................................................... 17 三、其它功能模块 .............................................................................................................. 17 第三节 项目起步 ....................................................................................................................... 17

一、搭建HTML5开发环境 .................................................................................................. 17 二、创建项目工程 .............................................................................................................. 18 第四节 前台页面及实现 ........................................................................................................... 19 第五节 主要模块实现 ............................................................................................................... 20

一、登陆 .............................................................................................................................. 20 二、注册 .............................................................................................................................. 22 第六节 本章小结 ....................................................................................................................... 23 结 论 ................................................................................................................................................ 24 参考文献 ............................................................................................................................................ 25

前 言

网站对于一个企业是不是必须的？对于深谋远虑的企业家来说那是必须的！但是往往很多人会忽略一个至关重要的问题：许多企业只是处在一个“有自己的网站”的尴尬阶段，或许他们并没有深刻的意识到一个界面粗制滥造、内容单调乏味、结构混乱不堪、安全性较差的网站，给访问者留下了一个极其不良的感觉，甚至严重破坏的企业的形象，影响企业的声誉。

那么什么样的网站才算是一个成功的网站呢？其实时代财富顾问公司在为众多的企业设计门户网站的过程中，已经总结出了一套系统完整、具有较高参考价值的标准——《企业网站评定标准》，他们期望通过这个标准来引起众多企业对自身网站建设的重视，使企业网站真正成为该企业管理、宣传、营销、推广的有效工具。

企业门户网站对于一个企业而言不可或缺，那它应该包括那些内容呢？企业门户网站是让外界了解本企业的一扇窗户，它能介绍企业文化、企业历史、企业的经营理念、企业的特色服务以及企业的发展状况等信息，通过它能够拓展客户市场，发现新的商机，增加企业与客户之间的交流，增进企业与客户之间的感情，提高企业的知名度，为企业今后的发展开辟一个良好的社会环境。企业门户网站应该建设成检索速度快、重点突出、条理清晰、查找方便、可靠性高、安全性好、成本低、易于维护、信息实时性强的一个功能完善的网站。这些优势能够极大地提高企业门户网站的效率，也是一个企业走向科学化、信息化，走向世界的必要条件。

正是基于以上情况，企业对构建自己的门户网站有着急切的需求。而针对其中不同的需求，HTML5的Web应用产生了丰富的市场。本课题正是基于以上背景，对基于HTML5的企业门户网站建设进行设计与研究。

第一章 相关技术、工具分析与介绍

第一节 企业门户网站

一、企业门户网站是什么

企业门户网站顾名思义就是一个企业连接外部，提升知名度，提供给企业员工、客户一个广阔的交流平台，它可以为外界提供一个单一的访问企业各种信息资源的入口，企业的员工、客户、合作伙伴和供应商等等都可以通过这个门户获得个性化的信息和服务。企业门户可以无缝地集成企业的内容、商务和社区：首先，通过企业门户，企业能够动态地发布存储在企业内部和外部的各种信息；其次，企业门户可以完成网上的交易；此外，企业门户还可以支持网上的虚拟社区，网站的用户可以相互讨论和交换信息。

构建一个完善有效地企业门户网站，可以在某种程度上把企业内部分散的各个模块有效地组织起来，给用户提供一个统一的信息服务平台，充分的把有用的信息展现给用户，使用户获得更好的体验。

综上所述，企业门户网站核心的功能就是将企业员工、合作伙伴、供应商、代理商等与企业生存发展有密切关系的人员紧密的联系起来，整合各种资源，为不同的社会人群提供他们想要的优质服务，这就是企业门户网站的价值所在。

二、建好企业网站的意义

企业门户网站建设最为重要的是对该网站进行长期的扩展与维护，而目前大多数企业网站的维护意识与当初域名申请和网站开通时的超前意识相比却显得十分不足与落后的。许多公司建立起网站后就在那里守株待兔了，既不管理又不更新，这显然是错误的。网站不及时更新，就不能正确反应公司的信息，这样宣传的效果不能达到反而会给企业形象带来负面的影响。

其次一个好的企业网站应具备以下几个内容：

① 企业的网站架构应该是以企业为核心的主题层次、内容分类、页面布局等所组成。由于每一个浏览者都有可能成为企业的客户，网站的主题应突出对企业的经营理念或企业可以提供给客户的优质服务的详尽说明，而企业规模、实力等方面的描述则只是对主题的烘托。 ② 企业网站另一个重要的作用就是体现出企业精神、理念以及企业文化，这些是企业的灵魂，在网站的建设中该部分也应该得到很好的体现。

③ 同时，在策划过程中还要兼顾企业产品营销理念和企业未来的发展规划。

三、有关企业门户网站建设的问题

随着我国经济高速增长,网络产品、网络技术等日益普及，网络用户也随之出现爆炸式的膨胀，网络信息发布的相关服务也越来越多。各个企业为了给用户提供更加快捷方便的服务，纷纷构建自己的官方网站，作为用户服务和信息发布的平台，专业的企业门户网站更是要求信息快速，准确的发布。

目前的企业门户网站构建主要采取三种形式：

① 手工更新：一些小企业门户网站还停留在完全使用人工制作新页面，更新信息等，这种方法不但效率低，而且容易出现错误。

② 动态网页技术：随着ASP、PHP、CGI等动态网页技术的兴起，使用这种技术构建的网站，大大提高了信息更新的效率。

③ 动态静态结合发布：这种技术与上面的动态网页技术没有本质上的区别，只是将静态页面和动态技术的优点结合起来！

四、问题的解决

在这里，我采用B/S模式来实现客户端对服务器端的调用，所谓B/S模式即浏览器/服务器模式，是一种从传统的C/S模式发展起来的新的网络结构模式。在B/S模式中，客户端运行浏览器软件，浏览器以超文本形式向Web服务器提出请求，Web服务器接受客户端请求后，将请求交给数据库服务器，数据库服务器得到请求后，验证其合法性，并进行数据处理，然后将处理后的结果返回给Web服务器。

而对于后台逻辑的处理，则是利用ASP.NET技术来解决。 简单地讲，ASP.NET是一个位于服务器端的脚本运行环境，通过这种环境，用户可以创建和运行动态的交互式Web服务器应用程序，如交互式动态网页，包括使用HTML表单收集和处理信息，上传与下载等等。

第二节 HTML5简介

一、什么是HTML5？

HTML5是什么？要回答这个问题，我们需要了解一下HTML是什么。HTML的英文全名为（Hyper Text Markup Language ），即超文本标记语言。HTML5是HTML的一个新版本，HTML5不是一种编程语言，而是一种标记语言（Markup Language），HTML5是 W3C与WHATWG合作的结果。HTML5是用于取代1999年所制定的 HTML 4.01 和 XHTML 1.0 标准的 HTML 标准版本，现在仍处于发展阶段，但大部分浏览器已经支持某些 HTML5 技术。

二、HTML5有哪些新特性特性？

1、语义特性

HTML5赋予网页更好的意义和结构，使整个页面更加简洁，富有条理，让SEO能够准确快速的收录网页。HTML4网页布局如图1.1所示，HTML5网页布局如图1.2所示，HTML5网页布局实例如图1.3所示：

图1.1 HTML4网页布局图

图1.2 HTML5网页布局图

图1.3 HMTL5网页布局实例图

2、本地存储特性

基于HTML5开发的网页APP拥有更短的启动时间，更快的联网速度，这些全得益于HTML5 APP Cache，以及本地存储功能，这些将对Web应用产生不可估量的影响。

3、设备兼容特性

从Geolocation功能的API文档公开以来，HTML5为网页应用开发者们提供了更多功能上的优化选择，带来了更多体验功能的优势。HTML5提供了前所未有的数据与应用接入开放接口。使外部应用可以直接与浏览器内部的数据直接相连，例如视频影音可直接与

Microphones及摄像头相联，与设备之间更加兼容。

4、连接特性

更有效的连接工作效率，使得基于页面的实时聊天，更快速的网页游戏体验，更优化的在线交流得到了实现。HTML5拥有更有效的服务器推送技术，Server-Sent Event和WebSockets就是其中的两个特性，这两个特性能够帮助我们实现服务器将数据“推送”到客户端的功能。

5、网页多媒体特性

支持网页端的Audio、Video等多媒体功能，之前要实现在网页中播放一段视频，那是要花很大的功夫的，可是现在一个标签就可以让您轻松播放您本地上的视频资源。

6、三维、图形及特效特性

基于SVG、Canvas、WebGL及CSS3的3D功能，HTML5集这些强大功能于一身，利用这些技术可以快速开发出以前难以想象的3D特效效果，用户必定会惊叹于在浏览器中所呈现的惊人的完美视觉效果。

7、性能与集成特性

没有用户会永远等待你的Loading——HTML5会通过XMLHttpRequest2等技术，帮助您的Web应用和网站在多样化的环境中更快速的工作，带给用户一个全新、方便、快速的友好体验。

8、CSS3特性

在不牺牲性能和语义结构的前提下，CSS3中提供了更多的风格和更强的效果。此外，较之以前的Web排版，Web的开放字体格式（WOFF）也提供了更高的灵活性和控制性。

三、HTML5应用 1、移动领域

这是 HTML5 最热门的运行场所。iPhone 可以和很多程序集成，将你的程序显示在它的今日桌面(这里有一个教程)，Android 也支持需要的 HTML5 API，但集成不够好。未来几年，支持 HTML5 的移动浏览器将如雨后春笋，将你的应用向 HTML5 迁移是很明智的，因为 HTML5 将很好地运行在这些设备上。

2、游戏领域

利用HTML5可以开发出许多小巧但又妙趣横生的网页小游戏；不仅如此，在大型的网页游戏方面HTML5也有自己独特的一面，它将给整个游戏领域带来翻天覆地的变化，游戏玩家们将会体验到不一样的游戏体验。

第三节 ASP.NET简介

一、什么是ASP.NET？

ASP.NET是微软流行的动态WEB编程技术（ASP）的最新版本，但它远不是传统ASP简单升级。ASP.NET和ASP的最大区别在于编程思维的转换，ASP.NET是真正的面向对象（Object-Oriented），而不仅仅在于功能的增强。

在ASP.NET中，Web 窗体页由两部分组成： ① .aspx结尾的文件存放页面结构代码。 ② .aspx.cs结尾的文件存放后台逻辑处理代码。

二、ASP.ENT的优点

1、威力和灵活性

由于 ASP.NET 基于公共语言运行库，因此 Web 应用程序开发人员可以利用整个平台的威力和灵活性。.NET 框架类库、消息处理和数据访问解决方案都可从 Web 无缝访问。ASP.NET 也与语言无关，所以可以选择最适合应用程序的语言，或跨多种语言分割应用程序。

2、简易性

ASP.NET 使执行常见任务变得容易，从简单的窗体提交和客户端身份验证到部署和站点配置，且公共语言运行库利用托管代码服务(如自动引用计数和垃圾回收)等简化了开发。

3、可管理性

ASP.NET 采用基于文本的分层配置系统，简化了将设置应用于服务器环境和 Web 应用程序。由于配置信息是以纯文本形式存储的，因此可以在没有本地管理工具帮助的情况下应用新设置，这样使得整个应用程序更加简单、可行。

三、ASP.NET应用

ASP.NET在网站建设上有自己独到的优势，其实现门槛比较低，且实现起来也比较容易。ASP.NET用于创建动态网页的服务器端技术，它允许用户使用.NET支持的任何一种编程语言，且用ASP.NET技术构建起来的网站维护相当方便，随着开发团队对ASP.NET的不断优化和改进，ASP.NET已经变得十分安全与健壮。

第四节 Microsoft SQL Server 2008 R2数据库

Microsoft SQL Server 2008 R2 是微软推出的一款数据库软件，它提供完整的企业级技术与工具，帮助您以最低的成本获得最有价值的信息。SQL Server 2008 R2引进了一系列新功能帮助各种规模的业务从信息中获取更多价值。经过改进的SQL Server 2008 R2增强了开发能力，提高了可管理性，强化了商业智能及数据仓库。

第五节 JavaScript脚本语言

JavaScript是一种基于对象和事件驱动并具有相对安全性的客户端脚本语言。同时也是一种广泛用于客户端Web开发的脚本语言，常用来给HTML网页添加动态功能，比如响应用户的各种操作。它最初由网景公司（Netscape）的Brendan Eich设计，是一种动态、弱类型、基于原型的语言，内置支持类。JavaScript是Sun公司的注册商标。Ecma国际以JavaScript为基础制定了ECMAScript标准。JavaScript也可以用于其他场合，如服务器端编程。完整的JavaScript实现包含三个部分：ECMAScript，文档对象模型，字节顺序记号。

第六节 本章小结

本章节主要详细介绍了构建HTML5企业门户网站所涉及到的各种知识及工具，使人一目了然对上述所介绍的技术和工具有一个简单大致的熟悉。通过本章的介绍，可以清晰地知道我是采用HTML5+ASP.NET+AJAX+SQL Server 2008 R2来构建企业门户网站的。HTML5用来搭建前端页面框架；ASP.NET用来后台处理用户请求和连接数据库，传输数据等；SQL Server 2008 R2用来存储本企业门户网站所用到相关信息（包括用户信息、企业信息、产品信息、站内公告信息等）。

第二章 基于HTML5构建企业门户网站设计的需

求分析

第一节 项目概述

如今，互连网对企业来说已经不再是新鲜的事物了，大多数的企业都已经建立了自己的网站。企业通过自己构建的门户网站给外面及内部员工之间搭建了一个互动的平台。

企业网站是一个可以发布企业信息、提供顾客服务，以及在线销售的平台；而在开发设计人员看来，企业网站无非使一些功能模块，通过网页的形式将前台和后台结合起来。一个完整的企业网站，无论多么复杂或多么简单，都要划分为四个组成部分：结构、内容、服务、功能。

系统从功能上来划分主要分为5大功能模块：用户模块，产品模块，案例模块，信息模块，其他模块。如图2.1所示：

① 用户模块包括：注册，登陆，修改个人信息。

② 产品模块包括：发布产品，查看产品，修改产品，删除产品。 ③ 案例模块包括：发布案例，查看案例，修改案例，删除案例。 ④ 信息模块包括：发布信息，查看信息，修改信息，删除信息。 ⑤ 其它模块包括：留言，招聘，建议管理。

HTML5企业门户网站用户产品成功案例企业信息其它注册登陆修改个人信息发布产品查看产品修改产品删除产品发布案例查看案例修改案例删除案例发布信息查看信息修改信息删除信息招聘信息留言管理建议管理图2.1 项目功能模块图

第二节 功能性需求

一、注册

对于任何一个网站而言，这都是不可或缺的一个功能，用户填写相关信息，注册成为该网站用户，注册成功后才拥有浏览本网站内的一些信息，发表言论等权限。

二、登陆

用户注册成功后，能够通过注册的账号登陆网站，浏览本网站相关信息，查看公司文化、公司发展历史、查看详细产品信息、发布留言等。

三、查看信息

当用户进入公司网站后，可以浏览公司信息、站内公告、产品信息、公司历史、公司文化、公司所获荣誉信息、公司成功案例、公司合作伙伴等信息。

四、留言

用户进入公司网站后，可以提出自己对公司网站的一些建议可看法。当用户未登陆时，则会以匿名用户的身份发送留言到数据库，用户已登陆则会以当前用户的身份发送留言信息到数据库并入库。

五、个人设置

用户登陆网站后，可以对自己的信息进行综合的管理，包括增加自己的详细，更改个人的信息等。

第三节 非功能性需求

一、界面需求

首要要求是界面友好，界面布局合理，风格保持一致。用户除必要的自主输入外，其余操作均可在系统的提示下选择完成，增加可用性。

二、通用性需求

用户通过不同的浏览器都应该访问到本网站，如果遇到特殊情况应该给用户一个友好的提示，在程序设计方面，统一编程规范，留下可以扩展的程序接口，以便日后扩展功能。

三、可靠性需求

本软件要保证运行的稳定可靠，主要包括数据的可靠性和系统的稳定性。数据可靠性包括数据个人独享、安全可靠等；系统稳定性要求软件系统能够持续无故障运行。

四、可扩展性需求

要求采用开放的标准的体系架构、模块化设计，能实现功能、性能的简单、方便的扩展和改造。

五、异常处理

1、页面请求出错时

当用户访问一个不存在该网站内的一个页面时，给用户一个明确醒目的提示，告知用户检查网址是否输入合理。

2、内容异常

用户输入用户名或规定格式的相关信息以外的内容时，向用户发出提醒，表明输入无效。

3、结果异常

在当前服务器信息下，查看信息、留言等获取任何结果时，能够向用户发出提醒，并保持操作开始前的状态。

第四节 项目用例图

一、普通用户

普通用户通过互联网浏览到本网站时，可以浏览本网站相关信息（包括产品信息、案例信息、公告信息、公司动态信息、公司历史、公司文化）等，出此之外，当用户有特定需求时还可以在本网站上注册成为该网站的用户，注册成功后，用户可以使用之前注册成功的账号登陆到该网站，用户还可以对该网站的一些不足提出自己的意见。具体如图2.2所示：

留言<>登陆<>查看产品注册<>查看新闻<><><><><><>普通用户<><><>公司动态提出意见招聘信息查看案例公司历史公司文化联系我们

图2.2 普通用户用例图

二、管理员

管理员具有相对普通用户而言更多的权限，当管理员登录到网站后，他能够对产品、案例、信息等进行管理（发布、修改、删除）等。管理员还有对用户管理的权限，当用户提交注册信息时，管理员可以看见用户提交的信息，待管理员认证后，该用户才能够使用自己注册的账号登陆本网站。具体如图2.3所示：

信息管理<>产品管理<><>建议管理<><>管理员<>留言管理<><><>发布<>操作<><><>修改<>删除案例管理<>用户管理认证

图2.3 管理员用例图

第五节 本章小结

对于开发者来说，要开发出一个良好的软件系统，首先要明确该系统的需求。需求分析是用户与软件设计人员之间的桥梁。对项目需求的分析越透彻，在功能实现上越能满足用户的需求。因此，在本章中，主要完成了对构建HTML5企业网站需求的分析，分别对系统的功能需求（包括登陆、注册、查看、留言、设置等）和非功能需求逐一做了描述，明确了系统的功能，为接下来的设计和实现提供了依据。下一章就在本章的需求分析基础上，具体讲本系统的设计。

第三章 基于HTML5构建企业门户网站的设计与

实现

第一节 数据库设计

数据存储方式有几种，分别可以是把数据存储在文件系统中，或者数据库中。在本系统中我采用SQL Server 2008 R2数据实现数据的存储。

系统中使用到的表如图3.1所示：

图3.1 数据库表图

以下我将对几张重要的表进行详细说明：T_Users（用户表）、T_Products（产品表）、T_Suggests（建议表）。

用户表各个字段的详细介绍如表3.2所示：

表3.2 T_Users（用户信息表）

字段名 FUserId FUserName FUserPwd FUserEmail FUserAddress FUserQuestion FUserAnswer FUserType 字段类型 Int nvarchar(24) varchar(16) varchar(38) nvarchar(168) nvarchar(168) nvarchar(168) Int 字段说明 用户ID，用户的唯一标识，自增字段。 用户昵称 用户密码 用户邮箱 用户地址 用户密保安全问题 用户密保安全问题答案 用户类型（1：代表管理员；2：代表普通用户） 用户是否通过管理员的认证（true：通过认证；false：未通过认证） 用户注册时间 是否为空 NOT NULL NOT NULL NOT NULL NOT NULL NOT NULL NOT NULL NOT NULL NOT NULL FIsAuditing FRegTime

Bit datetime NOT NULL NOT NULL 产品表各个字段的详细介绍如表3.3所示：

表3.3 T_Products（产品信息表） 字段名 FProductId FProductName FProductInfo FClickCount FPupTime

字段类型 Int nvarchar(50) nvarchar(3688) Int datetime 字段说明 产品ID，产品的唯一标识，自增字段。 产品名称 产品详细说明 产品浏览次数 产品发布时间 是否为空 NOT NULL NOT NULL NOT NULL NOT NULL NOT NULL 建议信息表各个字段的详细介绍如表3.4所示：

表3.4 T_Suggests（建议信息表） 字段名 FSuggestId FSuggestTitle FSuggestPerName FSuggestPerAddress FSuggestPerPhone FSuggestPerEmail FSuggestCon FSuggestTime

字段类型 Int nvarchar(68) nvarchar(50) nvarchar(128) char(11) varchar(50) nvarchar(688) datetime 字段说明 建议信息ID，建议信息的唯一标识，自增字段。 建议信息主题 建议提出者姓名 建议提出者住址 建议提出者电话 建议提出者邮箱 建议详细内容 建议提出时间 是否为空 NOT NULL NOT NULL NOT NULL NOT NULL NOT NULL NOT NULL NOT NULL NOT NULL

protected void btnLogin_Click(object sender, EventArgs e) {

//步骤一：获取网页数据

string userName = Request.Params[\]; string userPwd = Request.Params[\]; //步骤二：处理数据 //步骤三：封装数据 //步骤四：运行逻辑代码

DataSet loginDs = new DataSet();

loginDs = UserBao.UserLogin(userName, userPwd); //步骤五：处理返回结果

if (loginDs.Tables[0].Rows.Count < 1) { //错误信息

showError.InnerHtml = \用户名或密码错误，请检查后重新输入！\;

showError.Style[\] = \; showError.Style[\] = \; Session[\] = null; Session[\] = null; Session[\] = null; } else {

Session[\] = userName;

showHidden.Value = userName;

Session[\] = loginDs.Tables[0].Rows[0][\].ToString(); Session[\] = loginDs.Tables[0].Rows[0][\].ToString(); if (Convert.ToInt32(loginDs.Tables[0].Rows[0][\]) == 1) {

Response.Redirect(\ + userName); } else {

Response.Redirect(\ + userName); } } }

运行效果如图3.19所示：

图3.19 登陆效果图

二、注册

后台主要代码：

//步骤一：获取页面数据

string userName = Request.Params[\].ToString().Trim(); string userPwd = Request.Params[\].ToString().Trim(); string userEmail = Request.Params[\].ToString().Trim(); string userAddress = Request.Params[\].ToString().Trim(); string userQuestion = Request.Params[\].ToString().Trim(); string userAnswer = Request.Params[\].ToString().Trim(); //步骤二：处理数据 //步骤三：封装数据

Person newUser = new Person() {

UserName = userName, UserPwd = userPwd, UserEmail = userEmail, UserAddress = userAddress, SecurityQuestion = userQuestion, SecurityAnswer = userAnswer,

UserType = 2, //1代表超级用户，2代表普通用户 IsAuditing = 0,//1表示通过管理员认证，0代表未通认证 RegTime = DateTime.Parse(DateTime.Now.ToString(\

hh:mm:ss\))//ToString(\形如：2013-05-06 周一 09:56:53

};

//步骤四：逻辑处理用户注册

int registerResult = UserBao.UserRegister(newUser);

运行效果如图3.20所示：

图3.20 注册效果图

第六节 本章小结

本章在前一章需求分析的基础上，展示了基于HTML5企业网站这一项目的设计和主要功能的实现。其中第一节介绍了系统的总体设计，第二节和第三节如何在Visual Studio 2010开发环境中创建自己的工程。然后又分别介绍了数据存储等模块、界面、用户模块的设计与实现。

结 论

本文介绍了基于HTML5企业网站的设计与实现。该网站基本实现了市场上同类网站的普遍功能，包括注册、登陆、查看信息等等。作为一个软件类的工程实践，本人在本项目中承担了出去部分测试外的全部的开发任务。

在系统的完成过程中，本人经历了从理论到实践的过程，这对本人的学习方法是一次考验。尤其是刚接触HTML5，从最简单的基础知识的学习，到一个界面一个界面的实现，到逻辑模块的接入，再到最后的整合，加上论文的编写，本人对HTML5经历了从一无所知到知其然不知其所以然再到最后的初步理解原理的过程，也算是对HTML5略有所懂入了门了。同时，本人对软件工程的概念有了进一步的理解，对如何以系统和全局的角度分析和解决问题也有了更深的认识，这些将会在今后的工作学习中发挥积极的作用。

除此之外，开发的过程中，本人深刻认识到对HTML5、JavaScript、C#等API文档学习的重要性。有相当一部分实现，本人开始并不知道如何在HTML5中完成，甚至求助于网络也没能解决问题。后来得到指点，通过对HTML5文档更深一步的学习，最终解决了出现的问题或者利用更好的特性完成了原本的任务。这给了本人一个很大的启发：在面对一项新技术时，首要的是要把开发文档理解透，这样才能充分地利用好它。

总之，整个开发过程，对于本人的技术生涯，具有相当大的启发作用，可谓获益匪浅。 由于时间有限，本系统在很多方面存在不足，很多部分需进一步完善。可以做的工作还相当多，可以改进优化的地方也很多。

HTML5作为当下热门的、完全开放的Web新标准，具备相当好的前景。利用HTML5技术的人越来越多，越来越大众化，引起了无数大公司的重视。而作为HTML5应用中相当重要的网站建设，它的发展前景是非常美好的，值得进一步的关注和探讨。

参考文献

[1] Peter Lubbers，Brian Albers，Frank Salim 著，李杰，柳靖等译．HTML5高级程序设计．北京：人民邮电出版社，2011．

[2] Mark Pilgrim 著，常可，胡金埔，赵静译．HTML5揭秘．北京：电子工业出版社，2012．

[3] Eric A.Meye 著，尹志忠，候研译．CSS3权威指南第三版．北京：中国电力出版社，2007．

[4] Nicholas C.Zakas著，李松峰，曹力译．JavasSript高级程序设计(第三版)．北京：人民邮电出版社，2012．

[5] Matthew MacDonald著，李松峰，朱巍译．HTML5秘籍．北京：人民邮电出版社，2012．

[6] Michael Bowers，Dionysios Synodinos，Victor Summer著，曹少宁译.HTML5与CSS3设计模式．北京：人民邮电出版社，2013．

[7] Zacbary Kession著，陈升想，汪奋进译．HTML5应用开发实践指南．北京：机械工业出版社，2013．

[8] Ben Frain著，王永强译．响应式Web设计HTML5和CSS3实战．北京：人民邮电出版社，2013．

[9] 蒋宇捷，罗睿著．论道HTML5．北京：人民邮电出版社，2012．

[10] Ryan Asleson，Nathaniel T.Schutta著，金灵等译．Ajax基础教程．北京：人民邮电出版社，2006．

[11] Matthew MacDonald，Adam Freeman，Mario Szpuszta著，博斯工作室译．ASP.NET 高级程序设计(第4版)．北京：人民邮电出版社，2011．

[12] 马伟著．ASP.NET 4 权威指南．北京：机械工业出版社，2011． [13] 郑耀东著．ASP.NET从入门到实践．北京：清华大学出版社，2009． [14] 唐植华，陈建伟，宋武著．ASP.NET 4.0 动态网站开发基础教程．北京：清华大学出版社，2012．

[15] Scott Millett著，杨明军译．ASP.NET设计模式 ．北京：清华大学出版社，2011． [16] 魏汪洋，张建林，郑玉晖著．零基础学ASP.NET．北京：机械工业出版社，2012．

数据库部分重要的E-R图如图3.5，3.6所示：

N N 浏览 访问者 各种信息

N N 注册 访问者 普通用户

普通用户 N 1 N 发送 N 留言信息 在线用户 登陆

图3.5 普通用户E-R图 1 1 1 N 管理 各种信息 管理员 在线管理员 登陆 1 1 1 N 认证 注册用户 普通用户 在线管理员 登陆 图3.6 管理员E-R图

第二节 功能框架设计

一、注册模块。

当用户利用浏览器通过互联网访问到本网站时，用户可以填写相关注册信息注册成为本网的用户。如图3.7所示：

用户 注册 图3.7 用户注册功能图

二、登陆模块

当用户注册成功后，用户可以通过注册的账号登陆到本网站，登陆后可以获得更多详细全面的信息。如图3.8所示：

用户 登陆 图3.8 用户登陆功能图

三、其它功能模块

用户通过浏览器访问到本网站时可以浏览本网站内的所有发布的信息，包括（公司信息、产品信息、站内公告）等，用户还可以修改自己的信息，提出自己对网站的建议等。如图3.9所示：

用户 提出意见 图3.9 其他功能图 修改信息

查看信息 第三节 项目起步

一、搭建HTML5开发环境

1、安装Visual Studio 2010

从微软官网上下载Visual Studio 2010并解压至本地合适位置（如D:\\Program Files(x86)\\Microsoft\\ Visual Studio 2010）。

安装过程稍微有点偏长，尽量在没得什么重要的时候安装，点击下一步，直至安装成功。(安装前要安装.NET4.0组件；安装成功后需要安装VS2010SP1补丁----安装后可支持HTML5)。

2、安装SQL Server 2008 R2

从微软官网上下载SQL Server 2008 R2并解压至本地合适位置（如D:\\Program Files(x86)\\Microsoft\\ SQL Server 2008 R2）。

安装过程基本上就是傻瓜式的安装，点击下一步，直至安装成功。(在这里要说明一点，安装中可能要检查电脑配置是否适合安装，这里可以跳过；安装中注意要选择Windows身份认证和SQL Server身份认证混合模式，并要给sa用户指定一个自己记得住且比较安全的密码，安装后要启用sa用户。)

二、创建项目工程

在搭建好HTML5开发环境后，就可以进行HTML5开发了。

通过文件(F) -> 新建(N)-> 项目(P) 菜单，建立新项目\。在新建对话框中选择空白解决方案，然后再新建的空白解决方案下新增一个ASP.NET空Web应用程序，如图3.11所示：

图3.11 新建HTML5项目图

由于本项目使用了HTML5，故在添加新项目的右边选择栏上选中ASP.NET 空 Web 应用程序（空的应用程序不会出现许多对于项目而言没多大意义的文件及文件夹）。

第四节 前台页面及实现

本项目中主要的界面有：主界面、个人设置界面、关于界面、查看信息界面、公司简介界面、公司历史界面等，其中大部分界面相对而言都比较简单，我就不做过多的介绍，整个企业网站的页面布局如图3.17所示：

图3.17 整个网站页面布局图

主界面采用Win8标签式的设计风格，颜色搭配丰富，给人耳目一新的感觉。整个页面高度在一个屏幕内，以适应移动终端上的浏览效果。具体布局如图3.18所示：

图3.18 网站首页图

第五节 主要模块实现

一、登陆

后台页面代码：

本文来源：https://www.bwwdw.com/article/lx02.html