《风电能源决策系统网站设计》13000字

风电能源决策系统网站设计摘要本论文研究了如何实现一个风电能源决策网站的设计，将从某一地区获得的用电信息在网站中进行分析与统计。前端使用了HTML和CSS以及Javascript来实现风电能源网站的布局，同时采用MYSQL数据库来存储用户的用电数据，然后使用了PHP来进行功能的实现，对用户的用电数据进行逻辑处理。将用户的用电数据信息在网站中呈现出来，时刻关注这一地区用户的实时用电情况，完成对该地区用户在不同时间段用电情况的分布式监控以及全局把控。本文的研究重点在风电能源决策网站的制作过程。网站的前端开发工具选择的是HBuilder，后端选取了XAMPP来作为开发环境。对网站建设中所用到的几个核心技术进行了主要分析，从网站的功能效果可以看出，通过多种技术的合理使用，可以帮助该地区的风电能源进行合理的分配，对保障电力系统经济性运行有很大帮助。关键词风电能源；网站设计；web前端；PHP；MYSQL目录1绪论 21.1风电能源决策系统的设计背景与目的 21.2国内外研究现状 31.3课题的研究方法 31.4研究内容与论文构成 31.4.1网站主要分为以下几个功能模块： 31.4.2论文主要由以下几个章节构成： 32网站所用技术及相关开发软件简介 42.1开发环境简介 42.1.1HBuilder 42.1.2XAMPP 42.2前端使用技术简介 52.2.1HTML 52.2.2CSS 62.2.3JavaScript 72.3PHP简介 73风电能源决策系统网站的页面设计 83.1风电能源决策系统网站的设计思路 83.2风电能源决策系统网站的HTML设计 83.2.1登录注册界面的HTML设计 83.2.2网站主界面的HTML代码实现 123.2.3网站的几种功能的HTML设计 143.3风电能源决策系统网站的CSS代码实现 143.3.1登录注册界面的CSS代码 143.3.2主界面的CSS代码 183.4风电能源决策网站的Javascript使用 183.5本章总结 194网站的数据交互与功能实现 194.1数据库设计 194.2用电量收集功能的实现 204.3用电量的显示与统计 214.4登录注册功能 215系统总结与展望 22参考文献 25

1绪论1.1风电能源决策系统的设计背景与目的利用风能和太阳能等类型的可再生清洁能源代替石油等不可再生的常规能源，解决人类所面临的能源和环境问题，实现经济和社会的可持续发展，已经受到人们的广泛关注。相比其他的清洁能源，风能是大自然中可以用来进行大规模发电的几种主要清洁能源之一。风力发电技术在刚刚使用时因为技术的原因成本比普通价格更高一些，但随着技术的发展，风电的成本已经有了显著的下降。目前的风力发电技术的研究也越来越成熟，因为我国广袤的土地，风力发电也拥有许多理想的地理位置，我国最早开发风电是在风能资源最好的是“三北”地区（我国的东北、华北和西北地区），这些地方现在风电的总体装机规模已经达到了比较高的水平，在开发与商业化发展中拥有着非常不错的前景。我国所拥有的风力资源十分丰富。从最开始的使用到现在，我国一直十分重视风力发电技术的研发和创新。风力发电总量不断提升，目前全国累计装机已经达到2.1亿千瓦以上。但是风力资源很容易受天气、季节等多种因素影响，所以发电量会时不时发生变化。还有用户季节性的用电量也有所不同，然后就要对常规的发电量进行调整。在风电开始使用接入电力系统后，电网系统就对其时刻进行关注。如果当地电网接纳能力不足、风电不稳定的问题不能及时得到解决就会导致的部分风电场风机暂停的现象，这样大量的浪费了风资源。因此需要通过建立一个完善的系统来对利用风力生产的电能进行高效的分配，在保障电力系统平稳运行的同时良好的消纳风电资源，推动风力资源的可持续开发。从风能转化为电能再到用户的使用，还要好几个环节要通过，这中间有一个漫长的过程。在大多数情况下，发电设备与用电用户处于较远距离，电能并不能进行大量储存，因此发电量与用户的用电量必须尽可能的达到一个大致的平衡。电力系统要实现其功能，就必须在各个环节、不同层次设置可靠、迅速、灵敏的信息收集、决策、控制系统，以便对电能的生产、输送、消费等过程进行有效测量、调节、控制，确保用户使用安全、优质、经济的电能。1.2国内外研究现状如今在很多省份都有着风力发电的项目，所以都需要一个良好的系统来保障风电能源的使用，对用户用电量的统计还有分析在系统中起着至关重要的作用。本文所研究的网站为一个响应式的网站，基于HTML5所设计的网站，有着以下的优势，第一个是跨平台性能比较好，在如今各种各样的显示设备上都能做到较好的显示效果，虽然还有少数不支持H5标准的浏览器有些功能不能给顺利使用，但在绝大多数设备上都能够更加顺畅的使用，因此响应式设计是网站设计未来的主要趋势。1.3课题的研究方法风电能源决策网站的设计主要需要HTML、CSS以及PHP相关知识，因此需要了解其涉及到的基础知识，然后再选择相应的开发环境。在这里选择的是HBuilder和XAMPP，来一步步完成对网站的页面设计，数据处理。1.4研究内容与论文构成主要研究如何完成一个风电能源决策网站，具有统计用电量的功能，通过相关的技术对用户的用电数据进行统计、分析和逻辑处理，然后在网站上对处理的数据进行展示。1.4.1网站主要分为以下几个功能模块：登录/注册模块。收集用户用电数据。实时显示用电数据。统计用户各季度用电数据。统计用户每年用电的数据。1.4.2论文主要由以下几个章节构成：第一章：绪论，主要叙述风电能源决策系统的背景以及所具有的作用，然后论文在整个系统中所需要实现的部分功能，以及完成网站设计的方法和研究途径。第二章：对网站所用的开发环境以及相关技术的简介。详细讲解了本文设计时所用到的开发环境，还有几种关键的技术。第三章：对网站相关功能的分析以及实现过程的介绍。详细讲解了如何通过几种相关的技术一步步实现相关的功能。第四章：对网站功能的验证以及分析。2网站所用技术及相关开发软件简介2.1开发环境简介2.1.1HBuilderHbuilder是一个国产的绿色软件，即不需要安装，解压就可以使用，H即代表HTML5。虽然相比VSCode的高级功能要少一点，但同样是一个非常强大的软件，可以满足我们的使用。只需在官网上下载就可以使用。HBuilser上可以创建多种文件，我们所使用的HTML、CSS和PHP的代码都能够在上面进行编写。并且还有内置浏览器来实时观看我们所设计的页面，便于我们的修改和调整。2.1.2XAMPP在windows系统下可以使用Apache安装PHP应用程序，在网站中有一种十分流行的架构是LAMP（Linux+Apache+Mysql+PHP），但这一个需要使用linux系统，在这里我选用的是XAMPP建站环境。首先安装好XAMPP建站环境，打开后进入到浏览器中输入或者localhost就可以访问我们的服务器，Apache以HTTP协议为基准，默认的端口号是80，但是在有些时候端口号会出现冲突的情况，在这种情况下可以对原始参数进行修改来确保服务器的顺利使用，第一处修改的地方为Apache的Config命令里面的端口，第一个可以改为一个不冲突的端口号如8080。第二个要改的是默认的443，可以改为4430。然后有部分版本的上传限制会比较小，如果遇到的话也需要将其进行修改。通过对端口的配置的修改后，基本上不会遇到问题，可以保证网站平台无冲突的运行。这也是很多人购买虚拟主机的原因，在一个纯净的环境里网站的运行会更加顺畅。Apache服务器是基于web服务端的软件，绝大多数的开发者基本都用过。有数据表明，Apache服务器长期占据了大部分的服务器市场，这是一款可以跨平台使用的软件，有着免费、可移植性较好等一系列的优点。所以在平时的使用中，越来越多的开发者在其中添加着自己新开发的功能，Apache也成为了很多人选择的代理服务器。Apache主要通过四个步骤来进行工作：以本文的设计为例，首先我们需要在XAMPP软件中打开Apache，然后就是浏览器与服务器的连接，在浏览器中输入：8080或者是localhost:8080都可以进入我们的服务器。第二就是向服务器请求网站的主页资源，这个需要通过以.html或者是.php为后缀的文件来进行请求。如果需要打开我们的注册界面，可以通过login.html来访问我们所设计的登录界面。第三步就是服务器的应答，服务器会将我们编写的网站页面发送到浏览器上。第四步是在传送完我们的数据后关闭TCP连接。MYSQL数据库主要为互联网提供数据服务。它非常适合中小型网站的数据存储，由于其免费开源属性，其市场份额已经超过了微软的SQLSERVER数据库[4]。并且性能表现优异。由于SQL语言并没有形成一套强制性的标准，MYSQL采用的是尽可能兼容其他SQL语言的方案，无论是数据类型还是增删改查语句，都尽量做到统一。这样比较方便其他数据库的开发人员迅速转移到MYSQL中来，数据迁移也会很方便，也不容易出错，有效降低了维护成本。也深得开发者们的支持与喜爱。2.2前端使用技术简介2.2.1HTML在网上看到的一个web页面通常有以下三个主要的构成元素，即HTML（结构和样式）+CSS（样式）+JavaScript（动效和交互）。这是三种不同的技术也是三种不同的文件。HTML的全称叫做超文本标记语言（HyperTextMarkupLanguage）。HTML的版本更跌如图2-1所示：版本时间HTML1991HTML+1993HTML2.01995HTML3.21995HTML4.011999HTML52012图2-1HTML版本更迭图在1991年的时候HTML语言就已经诞生，在往后平均每两年就进行一次更新，一直到2012年的HTML5的诞生，这一次版本历时了十二年，经过了一次比较大的变革。HTML5相对于HTML4来说，有着显著的特点和优势。对媒体元素支持更强，进一步简化样式标记，CSS能实现的，尽量通过CSS实现。对数据本地存储、表单等方面进行了加强。新增了表单组件，数据处理更细化。可以肯定的是，HTML5标准对网页设计开发有着更好的支持，标准本身也更全面。更强大HTML是一种包裹型的语法，使用了语意化的标记来帮助我们去了解，一些常见的语意化的标签有：header,footer;section,article;nav,aside,figure;ol,ul,dl;table,tr,th,td;现在浏览器中的领跑者Google浏览器已经开始不支持flash插件，在各大视频网站中，都已经将原有的Flash播放器转为Html5播放器，如在百度上搜索优酷HTML可以看到优酷网页版并不需要使用flash插件了。HTML的基本结构分为四个部分：文档声明<!DOCTYPEhtml>,这个很简单，就是告诉编译器这是一个HTML页面。HTML标签<html></html>正如HTML中的标签的结束与开始一样，HTML标签就是告诉浏览器，页面的内容也是在这个标签里面。head标签即网页的头部，在这个标签里面可以定义那些特殊的内容，一般这里面的内容都不是作为网页内容显示给使用者的。最后就是网页的body了，这里面就是网页上所展示的内容。2.2.2CSSCSS是指层叠式样式表（StyleCascadingSheet）。它是用来为这里的网页内容添加样式的一种语言。CSS的发展历史如下图2-2所示：CSS11996年成为推荐标准CSS21998年成为推荐标准CSS2.12002年修订CSS32012年开始普遍使用图2-2CSS发展史CSS3就是我们当前使用的版本。逻辑、数据、样式构成了网页制作的三大要素。数据内容与外在展示的分离是当前大多数网页所采用的方案。通过CSS来约束控制页面具体展示，可以在不破坏内容数据的情况下，达到最便捷的效果。DIV+CSS是网页制作中的基础，这是一种特别简单高效的设计方式。即通过DIV为页面构建层，然后用CSS为DIV指定样式。CSS技术最新版本为CSS3，它进一步提取了HTML中关于展示的元素，如文字、颜色、位置、动画等，都可以通过CSS3进行设置。CSS的语法也并不复杂，以一个简单的语法来举例：H1{color:orange;text-align:center;}这段代码也十分容易理解，h1就是相应的操作对象，color就是要操作对象的属性，将文字颜色变为橘黄色,而text-align就是文本位置的意思，后面的center就代表文字居中。2.2.3JavaScriptJavaScript是一种脚本语言。在开始的时候也是被应用在HTML网页上，通过相关的功能来实现开发者想要的动态效果。在本次网站设计中也有几处动态交互的设计，如登录界面与注册界面的左右切换，以及网站几种功能的切换。2.3PHP简介PHP的全称为HyperrextPreprocessor。这是一种特别适用于web开发的脚本语言，已经完成的代码甚至可以嵌入到HTML代码中来发挥它的作用。它还具有开源的特性，这一特性受到广大开网站发者的青睐。使用者能在PHP官网上找到很多的技术资料，上面有最新的帮助文件，还有别人分享的代码模块。在众多开发人员的参与下，很多东西也都越来越完善。PHP和MySQL数据库配合使用时有着良好的效果，PHP拥有数百种函数库，使用者可以很便利的在里面寻找自己需要的功能。在编写代码时可以直接进行调用，不用编写额外的PHP代码。如其中与数据库相关的几种函数，使用者可以直接使用对数据库里面的表进行增删改查等一系列操作。而且不只是MySQL，其他几种主流数据库PHP也都对其进行了考虑，都有相对应的函数来实现和数据库的配合。PHP的语法比较简单，很方便开发者使用。PHP脚本语言是在C、Perl、Javascript的基础上进行归纳总结，然后推出的一种语言，很多熟悉其他语言的程序员也能很快的掌握PHP的基本使用，也能较快的建立出一个具有简单交互功能的web动态页面。PHP代码是嵌入在HTML中执行的，在我们设计一个页面的过程中，我们可以随时通过调整代码来查看相应的效果，对代码的维护也变得更加的简单快捷。3风电能源决策系统网站的页面设计3.1风电能源决策系统网站的设计思路基于人工智能的风电能源决策系统的网站的工作流程的设计思路为：首先需要对用户的用电数据进行采集，然后将数据传送到系统的数据库中，对数据进行储存，然后对用电数据进行逻辑处理，最后将所得到的结果显示出来。用户的用电数据部分主要由相应的硬件部分来采集，现在的智能电表都可以自动收集用户的用电信息并上传到相应的储存位置。因此我们只需要对其进行调用就可以了。3.2风电能源决策系统网站的HTML设计3.2.1登录注册界面的HTML设计登录注册界面的HTML代码编写：在这个登录注册界面我们需要用到HTML、CSS以及Javascript。在HTML代码的编写中，我们需要用到很多的标签，在这之中使用最多的就是div,它的使用语法是<div></div>这个标签的作用就是划分出一个HTML结构，如果仅仅是书写一句话一段文字的话，它的作用可能是和标签p是一样的。但div标签是一个块级标签，在这个标签里面还可以加入其他的HTML元素的组合，所以如果在少量代码的时候看起来没有太大作用，但是在代码的数量达到一定程度时，我们就会发现div所起到的划分结构的作用，同时还让我们的代码更具备逻辑性。如果在div标签中使用id和class来进行标记，同时配合CSS来使用，你就会发现这个标签是多么的巧妙。在登录与注册的界面中我们就首先将登录与注册的两个表单用一个div包裹起来，然后对两个表单都进行div的包裹，设置好它们的id和class，以便于在后面通过CSS进行整体的设计。在这里我们首先直接用一个div来展示出我们登录界面的标题栏，然后就需要一个表单来完成我们登录与注册信息的数据收集，如图3-1所示图3-1登录信息收集界面代码在HTML里面，一共有form、input、textarea、select、option五种表单标签，这五种标签有着不同的用法。而所有的表单标签都需要放到form标签内部来使用。在这段代码中，首先使用了一个form标签来给想要上传到服务器的信息进行一个表单域的划分，也就是说，在<form></form>之间的各种表单元素都会被提交给服务器。form标签属性如图3-2所示；属性值说明action提交地址method提交方式name表单名称target打开方式enctype编码方式 图3-2form的标签属性下面将结合上面的登录界面代码，对这几个属性进行分析：如图3-2中所说明的，action的作用就是在我们在表单中填入信息后，将信息发送到action指定的服务器程序的url地址。上面我们所填写的地址为”login.php”,因此，我们所填写的登录信息会传递到相应的php程序进行处理。然后就是第二个属性method,它的作用在于选择一个表单数据的http提交方式，可供选择的方式有两种，分别是get和post。在这个网站的开发过程中，都是选择post方式，因为post在安全性方面要优于get。在一个页面出现两个或者更多表单的时候，就可以用name来指定表单的名称，来对它们进行区分。在这个表单之中，我们需要输入两个登录所需要的信息，即登录邮箱和密码，因此需要用到的是input标签，input标签同样有着六种不同的属性，接下来通过不同的属性在浏览器中的实际效果来对几种属性进行描述。如图3-3所示：通过图3-3第一到第六行我们可以看出在intput标签中type的属性取值不同的时候的不同效果：图3-3input的几种属性效果我们在登录界面有输入邮箱文本框，它的属性是text,具体的代码如图3-1中的第一个input标签中的代码所示。而单行文本框同样也有属性需要进行设置，具体如图3-4所示：属性解释说明Value设置默认情况下文本框显示的文字Size设置文本框的高度Maxlength设置文本框中最多可以输入的字符数图3-4text文本框属性如果想要在单行文本框的空白输入区域加上默认的显示文字，就可以在value属性中加入相应的文字，如图3-3中的第一个文本框内的风电能源。size属性是用来调整文本框的大小，但这个功能一般不会使用，而是用CSS来进行调整。在很多网站的注册过程中，通常会提示用户的用户名最多可以输入多少个字，如果字数达到了就无法再输入进去。这个功能就可以用maxlength来实现。在网站的登录界面的第二个输入的内容就是我们的密码，图3-1中第二个input就是这个文本框的代码，它的type类型为password,在图3-2的第二行也可以看到它的效果，在这个文本框里输入fengdiannegnyuan并不能直接看到。通俗的来讲，密码文本框就是一种特殊的单行文本框，对比图3-2中的两个文本框就可以知道，密码文本框里输入的字符被小圆点所取代，是不可见的，但这仅仅只能让自己旁边的人看不到你所输入的内容，然后现在的网络直播是实时的，一些主播在登录过程中输入密码的时候这种功能还是比较实用。但这个功能并不能提高我们的数据安全性，它并不能对我们的数据进行加密，我们的数据也不是在这里进行传输。在网站打开后，我们就会出现登录的界面，但如果有工作人员并没有账号，这个时候就需要注册，在这里我们使用了input标签中的radio单选框给使用者提供一个登录与注册的选择。然后与lable标签，CSS的相关设计，以及Javascript的配合使用，达到一个动态的效果。然后需要对radio中的name属性和vlaue属性进行设置，name主要是为了区别单选按钮所在的组名，但value属性的取值需要和按钮所代表的内容一样，虽然不加的话显示效果没有任何的区别，但是在后面会使用Javascript来对其进行操作，所以还是加上更有利于我们的操作。如果想要给出一个默认的选择，只需要在给出一个checked属性来实现就可以了。在我们使用单选框的时候关于name属性是着重需要注意的，在同一组的单选框中一定要加上相同的name。在图3-5中就是我们关于登录与注册进行二选一的HTML代码。图3-5登录与注册的单选相关代码注册页面相比与登录界面，增加了一个确认密码的文本框，这一个form标签的action指定的服务器程序的url地址为”sigup.php”,在那里我们会对用户的注册信息进行一系列的处理，然后传输到数据库中。最后的效果如图3-6所示：图3-6两表单完成后界面3.2.2网站主界面的HTML代码实现在注册以及登录成功之后，通过PHP代码，网页就会跳转到网站的主要功能界面。在这个页面首先需要呈现给用户的就是网站的标题，在这里就用一个h1标签来实现。HTML的标题标签有六种，分别从h1、h2到h6。这六个标签主要是从重要程度来区分，因此网站的标题使用h1。一般一个网站只会使用一个h1标签。然后其余的标签可以有多个。标签的级别也是与字体的大小相呼应，因此可以根据自己的需要来使用。而我们需要注意的是标题标签的作用不仅仅是为了让我们在网页上观看这么简单，它还影响搜索引擎对我们网页的搜索效果，搜索引擎主要就是通过标题来为网页中所包含的内容编写出一个索引。因此在制作的过程之中还是应该准确使用标题来编辑网页内容。在网站标题编写好之后直接使用一个<hr>标签将它与下面的内容分割开来，使整个页面更加层次分明。然后在网页的头部还有一个显示当前时间的标签：<divclass="showTime">2021年4月25-20时35分16秒</div>HTML代码中的时间会通过加入Javascript的相关代码来实现对这个时间的实时刷新。以上就是页面的header区域的内容，接下来就是网页的main部分，在HTML代码中将网页所包含的几个功能通过左侧竖向导航栏的形式呈现出来，然后通过Javascript代码的配合，只要用户点击左侧相应的导航栏，在右边的页面中就可以出现相应的功能来提供给用户操作。相关的代码如图3-7所示：图3-7导航栏部分代码在这里主要写了四个li标签来让用户使用这四个功能。在HTML中li列表标签有三种，在这里使用的是无序列表。在li标签之中，这里还使用了一个a标签。在很多网页之中，都会有超链接的存在，基本上是网页中最常见的元素之一。超链接分为文本超链接和图片超链接，具体的使用方式就如命名一样。它使用起来十分简单，只要用鼠标点击一下，就可以跳转到它所指定的页面。在HTML中创建超链接很简单，只需要将被链接的对象用a标签进行包裹，如：<ahref=“链接地址”>全年用电量</a>那么在网站之中点击查看全年用电量这个功能的时候就可以跳转到这个功能的详细页面。在上面代码中的a标签的a指的是anchor，即锚点。这里面的href则是用来指定链接目标的url地址。在默认的情况下，超链接都是在正在使用的页面直接打开新页面，但也可以通过对其target属性的设置来在一个新的窗口打开新页面。target的属性值有四个，如图3-8所示，通常使用的就是第二个，也就是在新窗口打开。属性值作用_seld默认方式，在原窗口打开_blank在新窗口打开_parent在父窗口打开_top在顶层窗口打开图3-8target属性值同时还有一种使用较多的链接为锚点链接，举一个简单的例子就是点击目录到达相应的章节，想要实现这个功能需要来设置想要准确到达位置的id，然后再将a标签的href属性指向该id。然后分别使用四个span标签来写出风电能源决策网站的四个功能。span标签在一个区块内加入时，如果不另外对它进行特别的样式设计，它不会有固定的格式表现。因此在人们想要对一个区块内的某部分内容进行特别的样式设计时，就可以使用span标签。这个时候只需要给span加上相应的id或者class属性，就可以十分便利的进行样式的调整。在HTML代码中，只需要通过Javascript的配合，就可以上面导航栏中的四个标题与相应的四个功能相联系起来。3.2.3网站的几种功能的HTML设计在设计的风电能源决策网站主要功能中，首先需要实现的是对用户用电量的收集，在这里就需要一个录入用户用电量的输入框，然后还可以选择对应的时间，便于统计用户在不同时间段的用电量。在这里选择的是使用一个form表单用两个个不同type的input来录入这两项数据，再传输到数据库的相应表单中。然后就是对用户用电量的统计以及在网页上的显示，这个需要使用PHP来调用数据库中的内容，然后用可以用一个表格来进行显示。在主界面也加入了对用户的的管理，即在后台修改用户的资料，注销用户。3.3风电能源决策系统网站的CSS代码实现3.3.1登录注册界面的CSS代码在通过HTML写好前面登录界面的大致内容之后，通过相关CSS代码的编写，可以让网站的样式看起来更加的舒适。CSS的样式分为三种，在本次的设计都都有使用到。在风电能源决策系统网站的登录注册界面主要采用了外部式CSS样式，即将相对应的CSS代码都写在了一个单独的CSS文件中。在HTML文件的head部分，可以看到这样的一行代码：<linkrel="stylesheet"href="login.css">这里采用link标签来声明使用了login.css这个外接的代码。其中属性rel的作用是为了设定这两个文件的关系，stylesheet就代表这是定义了一个外部加载的样式表。在这里需要将在login.css这个文件中对login.html中的文本框、按钮、标题等一系列的目标元素进行样式设计，那么就要用到CSS中的选择器。它是能将这两部分联系起来的样式规则部分。虽然CSS中有好几种不同的选中元素的方式，选择方式可能也有些许的不同，但它们所能起到的作用是完全相同的，即选择然后进行样式的定义。在CSS中*是一个通用选择器，在文件的开头，使用*做了一个全局声明，这样HTML中所以的标签都继承了里面的属性。在这里设置了margin即在元素框边的空白区域，这里的参数设置为0，第二个进行的设置为padding即元素边框的内边距，这里的参数设置同样为0，然后就是对字体的选择。以上的样式的选择在网页的所有的标签都可以使用，因此在下面的代码中除非有别的需求，不然不需要再进行特别的设计。然后就是对主要的两个表单部分的设计，相关代码如图3-9所示，首先对这两个界面使用网格化的设计，让我们的登录也注册界面能够进行左右的排列，一步步通过按钮点击来实现一个简单的动画效果，让界面在不跳转的情况下可以实现两种功能，但让人看到的只有一个。同时调整封装过后的输入框位置为居中以及页面的背景颜色为渐变。图3-9输入框界面在网页里面有时候我们选中文本一般都是默认的蓝色，但这个颜色其实是可以进行更改的在这里只需要使用::selection就可以对其进行设置。在这里将background和color都改为#00ffff,就可以看到选中的颜色变为青色。下一步就是对登录与注册界面的整体封装与布局，在这里将overflow设定为hidden,即在这个登录与注册整体的div盒子之中的内容在超出边界之后被裁剪掉，配合HTML界面在登录与注册所做的单选操作，从而达到两个功能用户只会看到一个的效果。然后就是对这个封装的大小设计让其达到正好显示出一个功能的大小。通过CSS对这个封装的操作的选择这里使用的是class选择器，class相比于id不同的是，可以在一个页面上设置多个相同的class,在操作时只需要在CSS中输入“.class”就可以对拥有相同class属性的元素进行操作，这样的话如果有需要对多个元素进行相同的操作，就可以一步到位，减少重复的代码，提高效率。需要注意的是，class在命名的时候可以先字母后数字但不能先数字后字母。要注意命名的规范。在接下来的代码中，就是对整体的登录注册的封装后里面的元素的样式的设计，如图3-9所示,这一段代码就是对单选的登录和注册两个按钮的CSS样式设计，“.slide_controls”是这两个单选按钮和里面所包含内容的类，因此接下来的代码对这个整体都产生效果。由图3-10中的代码可以看出对这一部分做了以下的设计：首先是这登录注册两按钮的位置是设置为relative,即相对位置，这样不会出现重叠的情况，然后可以通过元素默认的定位对其位置进行调整；通过flex布局来让这两个按钮进行排列；这两个按钮的高度为50px；宽度设置为100%，与下面的内容保持对齐；通过overflow来隐藏超出父级元素的内容，在进行了这个参数设定之后，在下面只需要对登录与注册的宽度设置与父级一样，就能达到二者显示一个的效果；通过margin将按钮周围的空白区域进行设置，分别为30px010px0；将两按钮设置为两端对齐让页面看起来更加对称；边框为1px的lightgrey色实线；图3-10登录注册按钮CSS按钮样式设计然后就是对两个按钮进行背景颜色以及大小、的设计。但如果要在点击到按钮是才让其拥有背景颜色，这个时候就要用到“display:none”这个语法。display:none的作用是让用户在点击按钮时就只能看到当前按钮的背景色而隐藏另一个，达到便于观察的效果。它不为被隐藏的对象保留物理空间，让其直接在页面上消失。同样这个元素在网页上也不会再占任何的位置。对登录与注册两个表单的整体设计需要注意的是宽度的设计为width:200%,这样子元素的宽度会超过父级元素，而在之前就将两个功能进行了左右排列，因此在现在只能看到登录这一个功能的界面，再通过Javascript来实现网页的左右动态效果。图3-11登录界面效果在对下面的几个文本框以及提交按钮的设置与上面类似，只需要进行同样样式的设置就可以达到相应的效果。如在网页的背景和按钮颜色的选择上，都采用了渐变的颜色，背景色为：background:-webkit-linear-gradient(left,#9facb2,#e5faee);按钮的颜色的变化为：background:-webkit-linear-gradient(left,#a78ab2,#d53efa);在加入CSS代码后，网站的登录注册界面就变成了图3-11所示：3.3.2主界面的CSS代码除了在上一个界面所使用的外部样式表，在HTML中引入CSS还有内部样式表和行内样式表两种方式。在主要界面的设计中，这里将网页的标题以及网页的footer部分通过内部样式表进行设计。内部样式表的CSS代码是放在HTML文件之中的，然后需要将CSS代码放到style标签之中，style标签在HTML文件中的位置是head标签内部。行内样式表的使用则是较少，因为是写入在div标签的内部来改变标签内容，这样些效率很低，改动起来也特别麻烦，还不易与后面维护者的阅读。 主界面需要进行样式设定的主要是对几个功能的显示区域的设置，以及导航栏的样式和位置的设置。然后在这里也是用“display:none”然后配合javascript来实现页面的动态效果。3.4风电能源决策网站的Javascript使用 在HTML中引入Javascript有两种方式，在设计中因为使用的并不算多，因此都是使用引入内部Javascript的方式。即在HTML文件的body区域引入Javascript的代码。在登录注册的界面之中首先使用const进行了五个变量的声明，页面上的标题、页面里的两个表单和三个按钮，通过document.querySelector()决定了在点击相应按钮后要返回的元素。signupBtn.onclick=(()=>{ loginForm.style.marginLeft="-50%"; loginText.style.marginLeft="-50%";});这段代码就是在点击相应的按钮后，将表单的左外边距设置为-50%，右边的注册表单就显示出来。当点击登录按钮时，表单左外边距为0%，就还是显示登录界面。在CSS中对左右移动的速度进行了调整，由此达到了左右平滑移动的效果。另一个用到Javascript脚本的就是主界面中的时间设置，在这里首先声明了一个变量t，使用一个定时器“t=setTimeout(time,500);”并开始运行，让时间每隔500毫秒刷新一次，再使用一个函数来获取时间并刷新，具体年月日以及时间只需要通过系统进行调用就可以了。将个时间的变量组合起来就可以的出当前的具体时间，再通过一个定时器让这一段代码循环运行，就可以得出实时的时间。3.5本章总结本章主要讲述的系统的前端界面的一步步的实现过程，风电能源决策网站经过HTML、CSS以及javascript三种文件的加入之后的变化在一点点的呈现出来。4网站的数据交互与功能实现4.1数据库设计 因为设计使用了XAMPP，所以在这里是用mysql来作为数据库储存数据。在这里需要做的就是在数据库中创建出符合我们功能需求的数据表来存储数据，然后再通过相应的代码对数据表中的数据进行交互，如获取、更新、修改数据库存储的数据。本系统中包含两张数据表，具体的详情如下：使用者信息表（user_password）：用来存储网站使用者的基本信息。使用者的基本信息包含的数据项有：邮箱以及密码以及备注。其中邮箱为表的主键，具体的详情如表4-1所示。字段名称字段说明字段类型字段大小备注email邮箱nvarchar30主键，不可为空password密码nvarchar30不可为空remark备注nvarchar30可为空图4-1使用者信息表用电量统计表（statistics）：用来存储录入的用电信息。其中包含的数据有，录入用电量的时间。具体的统计表如图4-2所示。字段名称字段说明字段类型字段大小备注data录入时间Datetime8不可为空Count用电量int10不可为空图4-2用电数据存储表一般网站的数据都会通过以下几个步骤来进行处理：传参→通过PHP语言进行处理→数据库存取数据→显示数据。在这里面不可或缺的一部分就是与数据库的连接，因此在这里创建了一个conn.php文件来实现与数据库的连接，通过模块化的设计来让其它的PHP文件可以十分方便的引用，来提高效率。具体代码如下图4-3所示。图4-3数据库连接代码在这里首先对开发环境的数据库的基本信息进行定义，在后面通过相关的代码对数据库’phptest’进行连接。4.2用电量收集功能的实现在网页的form表单中填入数据后，就需要通过对应的PHP代码进行获取，这里使用的是$_POST[]，只需要将form表单的action和method属性正确设置，就可以顺利的获得相关的数据。如需要获取相应的用电量：$count=$_POST['count'];而将数据通过php代码存入数据库也十分的简单,如图4-4，图4-4存储数据PHP代码在这里还对数据插入数据表的结果进行了一个查询，然后通过一个if判断，在页面上显示相对的输出结果。4.3用电量的显示与统计在页面上显示用户输入的用电信息，首先就是需要调用之前的conn.php来连接数据库，然后直接在HTML文件中引用来连接数据库，在通过sql代码来查询数据表中的数据，再就只需要遍历表中的内容对其进行输出就可以了。相关功能部分代码如图4-5所示，图4-5数据显示代码4.4登录注册功能注册的时候同样是要将用户的注册信息存储到数据库中，在将用户的注册邮箱输入到数据库之前需要对其进行判断，看看邮箱是否已经被使用，还需要判断用户的邮箱和密码是否规范，具体的代码如图4-6所示，用户在进入网站时首先进入登录界面，等待用户输入邮箱和密码，然后再到数据库中比较邮箱和密码是否正确，如果邮箱和密码和数据库中相对应，登录通过后加入相关的链接就可以跳转到主要的功能界面。相关的PHP代码如图4-7所示，图4-6注册信息判断图4-7登录界面代码5系统总结与展望本文主要介绍了所做的风电能源网站的实现的基本过程： 1.对所使用的几种技术进行了详细的分析，在使用的过程中也进行了详细的描述。 2.页面的前端的设计与实现，在HBuilder上使用HTM