風電能源決策系統(tǒng)網站設計摘要本論文研究了如何實現一個風電能源決策網站的設計，將從某一地區(qū)獲得的用電信息在網站中進行分析與統(tǒng)計。前端使用了HTML和CSS以及Javascript來實現風電能源網站的布局，同時采用MYSQL數據庫來存儲用戶的用電數據，然后使用了PHP來進行功能的實現，對用戶的用電數據進行邏輯處理。將用戶的用電數據信息在網站中呈現出來，時刻關注這一地區(qū)用戶的實時用電情況，完成對該地區(qū)用戶在不同時間段用電情況的分布式監(jiān)控以及全局把控。本文的研究重點在風電能源決策網站的制作過程。網站的前端開發(fā)工具選擇的是HBuilder，后端選取了XAMPP來作為開發(fā)環(huán)境。對網站建設中所用到的幾個核心技術進行了主要分析，從網站的功能效果可以看出，通過多種技術的合理使用，可以幫助該地區(qū)的風電能源進行合理的分配，對保障電力系統(tǒng)經濟性運行有很大幫助。關鍵詞風電能源；網站設計；web前端；PHP；MYSQL目錄1緒論 21.1風電能源決策系統(tǒng)的設計背景與目的 21.2國內外研究現狀 31.3課題的研究方法 31.4研究內容與論文構成 31.4.1網站主要分為以下幾個功能模塊： 31.4.2論文主要由以下幾個章節(jié)構成： 32網站所用技術及相關開發(fā)軟件簡介 42.1開發(fā)環(huán)境簡介 42.1.1HBuilder 42.1.2XAMPP 42.2前端使用技術簡介 52.2.1HTML 52.2.2CSS 62.2.3JavaScript 72.3PHP簡介 73風電能源決策系統(tǒng)網站的頁面設計 83.1風電能源決策系統(tǒng)網站的設計思路 83.2風電能源決策系統(tǒng)網站的HTML設計 83.2.1登錄注冊界面的HTML設計 83.2.2網站主界面的HTML代碼實現 123.2.3網站的幾種功能的HTML設計 143.3風電能源決策系統(tǒng)網站的CSS代碼實現 143.3.1登錄注冊界面的CSS代碼 143.3.2主界面的CSS代碼 183.4風電能源決策網站的Javascript使用 183.5本章總結 194網站的數據交互與功能實現 194.1數據庫設計 194.2用電量收集功能的實現 204.3用電量的顯示與統(tǒng)計 214.4登錄注冊功能 215系統(tǒng)總結與展望 22參考文獻 25

1緒論1.1風電能源決策系統(tǒng)的設計背景與目的利用風能和太陽能等類型的可再生清潔能源代替石油等不可再生的常規(guī)能源，解決人類所面臨的能源和環(huán)境問題，實現經濟和社會的可持續(xù)發(fā)展，已經受到人們的廣泛關注。相比其他的清潔能源，風能是大自然中可以用來進行大規(guī)模發(fā)電的幾種主要清潔能源之一。風力發(fā)電技術在剛剛使用時因為技術的原因成本比普通價格更高一些，但隨著技術的發(fā)展，風電的成本已經有了顯著的下降。目前的風力發(fā)電技術的研究也越來越成熟，因為我國廣袤的土地，風力發(fā)電也擁有許多理想的地理位置，我國最早開發(fā)風電是在風能資源最好的是“三北”地區(qū)（我國的東北、華北和西北地區(qū)），這些地方現在風電的總體裝機規(guī)模已經達到了比較高的水平，在開發(fā)與商業(yè)化發(fā)展中擁有著非常不錯的前景。我國所擁有的風力資源十分豐富。從最開始的使用到現在，我國一直十分重視風力發(fā)電技術的研發(fā)和創(chuàng)新。風力發(fā)電總量不斷提升，目前全國累計裝機已經達到2.1億千瓦以上。但是風力資源很容易受天氣、季節(jié)等多種因素影響，所以發(fā)電量會時不時發(fā)生變化。還有用戶季節(jié)性的用電量也有所不同，然后就要對常規(guī)的發(fā)電量進行調整。在風電開始使用接入電力系統(tǒng)后，電網系統(tǒng)就對其時刻進行關注。如果當地電網接納能力不足、風電不穩(wěn)定的問題不能及時得到解決就會導致的部分風電場風機暫停的現象，這樣大量的浪費了風資源。因此需要通過建立一個完善的系統(tǒng)來對利用風力生產的電能進行高效的分配，在保障電力系統(tǒng)平穩(wěn)運行的同時良好的消納風電資源，推動風力資源的可持續(xù)開發(fā)。從風能轉化為電能再到用戶的使用，還要好幾個環(huán)節(jié)要通過，這中間有一個漫長的過程。在大多數情況下，發(fā)電設備與用電用戶處于較遠距離，電能并不能進行大量儲存，因此發(fā)電量與用戶的用電量必須盡可能的達到一個大致的平衡。電力系統(tǒng)要實現其功能，就必須在各個環(huán)節(jié)、不同層次設置可靠、迅速、靈敏的信息收集、決策、控制系統(tǒng)，以便對電能的生產、輸送、消費等過程進行有效測量、調節(jié)、控制，確保用戶使用安全、優(yōu)質、經濟的電能。1.2國內外研究現狀如今在很多省份都有著風力發(fā)電的項目，所以都需要一個良好的系統(tǒng)來保障風電能源的使用，對用戶用電量的統(tǒng)計還有分析在系統(tǒng)中起著至關重要的作用。本文所研究的網站為一個響應式的網站，基于HTML5所設計的網站，有著以下的優(yōu)勢，第一個是跨平臺性能比較好，在如今各種各樣的顯示設備上都能做到較好的顯示效果，雖然還有少數不支持H5標準的瀏覽器有些功能不能給順利使用，但在絕大多數設備上都能夠更加順暢的使用，因此響應式設計是網站設計未來的主要趨勢。1.3課題的研究方法風電能源決策網站的設計主要需要HTML、CSS以及PHP相關知識，因此需要了解其涉及到的基礎知識，然后再選擇相應的開發(fā)環(huán)境。在這里選擇的是HBuilder和XAMPP，來一步步完成對網站的頁面設計，數據處理。1.4研究內容與論文構成主要研究如何完成一個風電能源決策網站，具有統(tǒng)計用電量的功能，通過相關的技術對用戶的用電數據進行統(tǒng)計、分析和邏輯處理，然后在網站上對處理的數據進行展示。1.4.1網站主要分為以下幾個功能模塊：登錄/注冊模塊。收集用戶用電數據。實時顯示用電數據。統(tǒng)計用戶各季度用電數據。統(tǒng)計用戶每年用電的數據。1.4.2論文主要由以下幾個章節(jié)構成：第一章：緒論，主要敘述風電能源決策系統(tǒng)的背景以及所具有的作用，然后論文在整個系統(tǒng)中所需要實現的部分功能，以及完成網站設計的方法和研究途徑。第二章：對網站所用的開發(fā)環(huán)境以及相關技術的簡介。詳細講解了本文設計時所用到的開發(fā)環(huán)境，還有幾種關鍵的技術。第三章：對網站相關功能的分析以及實現過程的介紹。詳細講解了如何通過幾種相關的技術一步步實現相關的功能。第四章：對網站功能的驗證以及分析。2網站所用技術及相關開發(fā)軟件簡介2.1開發(fā)環(huán)境簡介2.1.1HBuilderHbuilder是一個國產的綠色軟件，即不需要安裝，解壓就可以使用，H即代表HTML5。雖然相比VSCode的高級功能要少一點，但同樣是一個非常強大的軟件，可以滿足我們的使用。只需在官網上下載就可以使用。HBuilser上可以創(chuàng)建多種文件，我們所使用的HTML、CSS和PHP的代碼都能夠在上面進行編寫。并且還有內置瀏覽器來實時觀看我們所設計的頁面，便于我們的修改和調整。2.1.2XAMPP在windows系統(tǒng)下可以使用Apache安裝PHP應用程序，在網站中有一種十分流行的架構是LAMP（Linux+Apache+Mysql+PHP），但這一個需要使用linux系統(tǒng)，在這里我選用的是XAMPP建站環(huán)境。首先安裝好XAMPP建站環(huán)境，打開后進入到瀏覽器中輸入或者localhost就可以訪問我們的服務器，Apache以HTTP協(xié)議為基準，默認的端口號是80，但是在有些時候端口號會出現沖突的情況，在這種情況下可以對原始參數進行修改來確保服務器的順利使用，第一處修改的地方為Apache的Config命令里面的端口，第一個可以改為一個不沖突的端口號如8080。第二個要改的是默認的443，可以改為4430。然后有部分版本的上傳限制會比較小，如果遇到的話也需要將其進行修改。通過對端口的配置的修改后，基本上不會遇到問題，可以保證網站平臺無沖突的運行。這也是很多人購買虛擬主機的原因，在一個純凈的環(huán)境里網站的運行會更加順暢。Apache服務器是基于web服務端的軟件，絕大多數的開發(fā)者基本都用過。有數據表明，Apache服務器長期占據了大部分的服務器市場，這是一款可以跨平臺使用的軟件，有著免費、可移植性較好等一系列的優(yōu)點。所以在平時的使用中，越來越多的開發(fā)者在其中添加著自己新開發(fā)的功能，Apache也成為了很多人選擇的代理服務器。Apache主要通過四個步驟來進行工作：以本文的設計為例，首先我們需要在XAMPP軟件中打開Apache，然后就是瀏覽器與服務器的連接，在瀏覽器中輸入：8080或者是localhost:8080都可以進入我們的服務器。第二就是向服務器請求網站的主頁資源，這個需要通過以.html或者是.php為后綴的文件來進行請求。如果需要打開我們的注冊界面，可以通過login.html來訪問我們所設計的登錄界面。第三步就是服務器的應答，服務器會將我們編寫的網站頁面發(fā)送到瀏覽器上。第四步是在傳送完我們的數據后關閉TCP連接。MYSQL數據庫主要為互聯(lián)網提供數據服務。它非常適合中小型網站的數據存儲，由于其免費開源屬性，其市場份額已經超過了微軟的SQLSERVER數據庫[4]。并且性能表現優(yōu)異。由于SQL語言并沒有形成一套強制性的標準，MYSQL采用的是盡可能兼容其他SQL語言的方案，無論是數據類型還是增刪改查語句，都盡量做到統(tǒng)一。這樣比較方便其他數據庫的開發(fā)人員迅速轉移到MYSQL中來，數據遷移也會很方便，也不容易出錯，有效降低了維護成本。也深得開發(fā)者們的支持與喜愛。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來說，有著顯著的特點和優(yōu)勢。對媒體元素支持更強，進一步簡化樣式標記，CSS能實現的，盡量通過CSS實現。對數據本地存儲、表單等方面進行了加強。新增了表單組件，數據處理更細化。可以肯定的是，HTML5標準對網頁設計開發(fā)有著更好的支持，標準本身也更全面。更強大HTML是一種包裹型的語法，使用了語意化的標記來幫助我們去了解，一些常見的語意化的標簽有：header,footer;section,article;nav,aside,figure;ol,ul,dl;table,tr,th,td;現在瀏覽器中的領跑者Google瀏覽器已經開始不支持flash插件，在各大視頻網站中，都已經將原有的Flash播放器轉為Html5播放器，如在百度上搜索優(yōu)酷HTML可以看到優(yōu)酷網頁版并不需要使用flash插件了。HTML的基本結構分為四個部分：文檔聲明<!DOCTYPEhtml>,這個很簡單，就是告訴編譯器這是一個HTML頁面。HTML標簽<html></html>正如HTML中的標簽的結束與開始一樣，HTML標簽就是告訴瀏覽器，頁面的內容也是在這個標簽里面。head標簽即網頁的頭部，在這個標簽里面可以定義那些特殊的內容，一般這里面的內容都不是作為網頁內容顯示給使用者的。最后就是網頁的body了，這里面就是網頁上所展示的內容。2.2.2CSSCSS是指層疊式樣式表（StyleCascadingSheet）。它是用來為這里的網頁內容添加樣式的一種語言。CSS的發(fā)展歷史如下圖2-2所示：CSS11996年成為推薦標準CSS21998年成為推薦標準CSS2.12002年修訂CSS32012年開始普遍使用圖2-2CSS發(fā)展史CSS3就是我們當前使用的版本。邏輯、數據、樣式構成了網頁制作的三大要素。數據內容與外在展示的分離是當前大多數網頁所采用的方案。通過CSS來約束控制頁面具體展示，可以在不破壞內容數據的情況下，達到最便捷的效果。DIV+CSS是網頁制作中的基礎，這是一種特別簡單高效的設計方式。即通過DIV為頁面構建層，然后用CSS為DIV指定樣式。CSS技術最新版本為CSS3，它進一步提取了HTML中關于展示的元素，如文字、顏色、位置、動畫等，都可以通過CSS3進行設置。CSS的語法也并不復雜，以一個簡單的語法來舉例：H1{color:orange;text-align:center;}這段代碼也十分容易理解，h1就是相應的操作對象，color就是要操作對象的屬性，將文字顏色變?yōu)殚冱S色,而text-align就是文本位置的意思，后面的center就代表文字居中。2.2.3JavaScriptJavaScript是一種腳本語言。在開始的時候也是被應用在HTML網頁上，通過相關的功能來實現開發(fā)者想要的動態(tài)效果。在本次網站設計中也有幾處動態(tài)交互的設計，如登錄界面與注冊界面的左右切換，以及網站幾種功能的切換。2.3PHP簡介PHP的全稱為HyperrextPreprocessor。這是一種特別適用于web開發(fā)的腳本語言，已經完成的代碼甚至可以嵌入到HTML代碼中來發(fā)揮它的作用。它還具有開源的特性，這一特性受到廣大開網站發(fā)者的青睞。使用者能在PHP官網上找到很多的技術資料，上面有最新的幫助文件，還有別人分享的代碼模塊。在眾多開發(fā)人員的參與下，很多東西也都越來越完善。PHP和MySQL數據庫配合使用時有著良好的效果，PHP擁有數百種函數庫，使用者可以很便利的在里面尋找自己需要的功能。在編寫代碼時可以直接進行調用，不用編寫額外的PHP代碼。如其中與數據庫相關的幾種函數，使用者可以直接使用對數據庫里面的表進行增刪改查等一系列操作。而且不只是MySQL，其他幾種主流數據庫PHP也都對其進行了考慮，都有相對應的函數來實現和數據庫的配合。PHP的語法比較簡單，很方便開發(fā)者使用。PHP腳本語言是在C、Perl、Javascript的基礎上進行歸納總結，然后推出的一種語言，很多熟悉其他語言的程序員也能很快的掌握PHP的基本使用，也能較快的建立出一個具有簡單交互功能的web動態(tài)頁面。PHP代碼是嵌入在HTML中執(zhí)行的，在我們設計一個頁面的過程中，我們可以隨時通過調整代碼來查看相應的效果，對代碼的維護也變得更加的簡單快捷。3風電能源決策系統(tǒng)網站的頁面設計3.1風電能源決策系統(tǒng)網站的設計思路基于人工智能的風電能源決策系統(tǒng)的網站的工作流程的設計思路為：首先需要對用戶的用電數據進行采集，然后將數據傳送到系統(tǒng)的數據庫中，對數據進行儲存，然后對用電數據進行邏輯處理，最后將所得到的結果顯示出來。用戶的用電數據部分主要由相應的硬件部分來采集，現在的智能電表都可以自動收集用戶的用電信息并上傳到相應的儲存位置。因此我們只需要對其進行調用就可以了。3.2風電能源決策系統(tǒng)網站的HTML設計3.2.1登錄注冊界面的HTML設計登錄注冊界面的HTML代碼編寫：在這個登錄注冊界面我們需要用到HTML、CSS以及Javascript。在HTML代碼的編寫中，我們需要用到很多的標簽，在這之中使用最多的就是div,它的使用語法是<div></div>這個標簽的作用就是劃分出一個HTML結構，如果僅僅是書寫一句話一段文字的話，它的作用可能是和標簽p是一樣的。但div標簽是一個塊級標簽，在這個標簽里面還可以加入其他的HTML元素的組合，所以如果在少量代碼的時候看起來沒有太大作用，但是在代碼的數量達到一定程度時，我們就會發(fā)現div所起到的劃分結構的作用，同時還讓我們的代碼更具備邏輯性。如果在div標簽中使用id和class來進行標記，同時配合CSS來使用，你就會發(fā)現這個標簽是多么的巧妙。在登錄與注冊的界面中我們就首先將登錄與注冊的兩個表單用一個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的作用就是在我們在表單中填入信息后，將信息發(fā)送到action指定的服務器程序的url地址。上面我們所填寫的地址為”login.php”,因此，我們所填寫的登錄信息會傳遞到相應的php程序進行處理。然后就是第二個屬性method,它的作用在于選擇一個表單數據的http提交方式，可供選擇的方式有兩種，分別是get和post。在這個網站的開發(fā)過程中，都是選擇post方式，因為post在安全性方面要優(yōu)于get。在一個頁面出現兩個或者更多表單的時候，就可以用name來指定表單的名稱，來對它們進行區(qū)分。在這個表單之中，我們需要輸入兩個登錄所需要的信息，即登錄郵箱和密碼，因此需要用到的是input標簽，input標簽同樣有著六種不同的屬性，接下來通過不同的屬性在瀏覽器中的實際效果來對幾種屬性進行描述。如圖3-3所示：通過圖3-3第一到第六行我們可以看出在intput標簽中type的屬性取值不同的時候的不同效果：圖3-3input的幾種屬性效果我們在登錄界面有輸入郵箱文本框，它的屬性是text,具體的代碼如圖3-1中的第一個input標簽中的代碼所示。而單行文本框同樣也有屬性需要進行設置，具體如圖3-4所示：屬性解釋說明Value設置默認情況下文本框顯示的文字Size設置文本框的高度Maxlength設置文本框中最多可以輸入的字符數圖3-4text文本框屬性如果想要在單行文本框的空白輸入區(qū)域加上默認的顯示文字，就可以在value屬性中加入相應的文字，如圖3-3中的第一個文本框內的風電能源。size屬性是用來調整文本框的大小，但這個功能一般不會使用，而是用CSS來進行調整。在很多網站的注冊過程中，通常會提示用戶的用戶名最多可以輸入多少個字，如果字數達到了就無法再輸入進去。這個功能就可以用maxlength來實現。在網站的登錄界面的第二個輸入的內容就是我們的密碼，圖3-1中第二個input就是這個文本框的代碼，它的type類型為password,在圖3-2的第二行也可以看到它的效果，在這個文本框里輸入fengdiannegnyuan并不能直接看到。通俗的來講，密碼文本框就是一種特殊的單行文本框，對比圖3-2中的兩個文本框就可以知道，密碼文本框里輸入的字符被小圓點所取代，是不可見的，但這僅僅只能讓自己旁邊的人看不到你所輸入的內容，然后現在的網絡直播是實時的，一些主播在登錄過程中輸入密碼的時候這種功能還是比較實用。但這個功能并不能提高我們的數據安全性，它并不能對我們的數據進行加密，我們的數據也不是在這里進行傳輸。在網站打開后，我們就會出現登錄的界面，但如果有工作人員并沒有賬號，這個時候就需要注冊，在這里我們使用了input標簽中的radio單選框給使用者提供一個登錄與注冊的選擇。然后與lable標簽，CSS的相關設計，以及Javascript的配合使用，達到一個動態(tài)的效果。然后需要對radio中的name屬性和vlaue屬性進行設置，name主要是為了區(qū)別單選按鈕所在的組名，但value屬性的取值需要和按鈕所代表的內容一樣，雖然不加的話顯示效果沒有任何的區(qū)別，但是在后面會使用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。這六個標簽主要是從重要程度來區(qū)分，因此網站的標題使用h1。一般一個網站只會使用一個h1標簽。然后其余的標簽可以有多個。標簽的級別也是與字體的大小相呼應，因此可以根據自己的需要來使用。而我們需要注意的是標題標簽的作用不僅僅是為了讓我們在網頁上觀看這么簡單，它還影響搜索引擎對我們網頁的搜索效果，搜索引擎主要就是通過標題來為網頁中所包含的內容編寫出一個索引。因此在制作的過程之中還是應該準確使用標題來編輯網頁內容。在網站標題編寫好之后直接使用一個<hr>標簽將它與下面的內容分割開來，使整個頁面更加層次分明。然后在網頁的頭部還有一個顯示當前時間的標簽：<divclass="showTime">2021年4月25-20時35分16秒</div>HTML代碼中的時間會通過加入Javascript的相關代碼來實現對這個時間的實時刷新。以上就是頁面的header區(qū)域的內容，接下來就是網頁的main部分，在HTML代碼中將網頁所包含的幾個功能通過左側豎向導航欄的形式呈現出來，然后通過Javascript代碼的配合，只要用戶點擊左側相應的導航欄，在右邊的頁面中就可以出現相應的功能來提供給用戶操作。相關的代碼如圖3-7所示：圖3-7導航欄部分代碼在這里主要寫了四個li標簽來讓用戶使用這四個功能。在HTML中l(wèi)i列表標簽有三種，在這里使用的是無序列表。在li標簽之中，這里還使用了一個a標簽。在很多網頁之中，都會有超鏈接的存在，基本上是網頁中最常見的元素之一。超鏈接分為文本超鏈接和圖片超鏈接，具體的使用方式就如命名一樣。它使用起來十分簡單，只要用鼠標點擊一下，就可以跳轉到它所指定的頁面。在HTML中創(chuàng)建超鏈接很簡單，只需要將被鏈接的對象用a標簽進行包裹，如：<ahref=“鏈接地址”>全年用電量</a>那么在網站之中點擊查看全年用電量這個功能的時候就可以跳轉到這個功能的詳細頁面。在上面代碼中的a標簽的a指的是anchor，即錨點。這里面的href則是用來指定鏈接目標的url地址。在默認的情況下，超鏈接都是在正在使用的頁面直接打開新頁面，但也可以通過對其target屬性的設置來在一個新的窗口打開新頁面。target的屬性值有四個，如圖3-8所示，通常使用的就是第二個，也就是在新窗口打開。屬性值作用_seld默認方式，在原窗口打開_blank在新窗口打開_parent在父窗口打開_top在頂層窗口打開圖3-8target屬性值同時還有一種使用較多的鏈接為錨點鏈接，舉一個簡單的例子就是點擊目錄到達相應的章節(jié)，想要實現這個功能需要來設置想要準確到達位置的id，然后再將a標簽的href屬性指向該id。然后分別使用四個span標簽來寫出風電能源決策網站的四個功能。span標簽在一個區(qū)塊內加入時，如果不另外對它進行特別的樣式設計，它不會有固定的格式表現。因此在人們想要對一個區(qū)塊內的某部分內容進行特別的樣式設計時，就可以使用span標簽。這個時候只需要給span加上相應的id或者class屬性，就可以十分便利的進行樣式的調整。在HTML代碼中，只需要通過Javascript的配合，就可以上面導航欄中的四個標題與相應的四個功能相聯(lián)系起來。3.2.3網站的幾種功能的HTML設計在設計的風電能源決策網站主要功能中，首先需要實現的是對用戶用電量的收集，在這里就需要一個錄入用戶用電量的輸入框，然后還可以選擇對應的時間，便于統(tǒng)計用戶在不同時間段的用電量。在這里選擇的是使用一個form表單用兩個個不同type的input來錄入這兩項數據，再傳輸到數據庫的相應表單中。然后就是對用戶用電量的統(tǒng)計以及在網頁上的顯示，這個需要使用PHP來調用數據庫中的內容，然后用可以用一個表格來進行顯示。在主界面也加入了對用戶的的管理，即在后臺修改用戶的資料，注銷用戶。3.3風電能源決策系統(tǒng)網站的CSS代碼實現3.3.1登錄注冊界面的CSS代碼在通過HTML寫好前面登錄界面的大致內容之后，通過相關CSS代碼的編寫，可以讓網站的樣式看起來更加的舒適。CSS的樣式分為三種，在本次的設計都都有使用到。在風電能源決策系統(tǒng)網站的登錄注冊界面主要采用了外部式CSS樣式，即將相對應的CSS代碼都寫在了一個單獨的CSS文件中。在HTML文件的head部分，可以看到這樣的一行代碼：<linkrel="stylesheet"href="login.css">這里采用link標簽來聲明使用了login.css這個外接的代碼。其中屬性rel的作用是為了設定這兩個文件的關系，stylesheet就代表這是定義了一個外部加載的樣式表。在這里需要將在login.css這個文件中對login.html中的文本框、按鈕、標題等一系列的目標元素進行樣式設計，那么就要用到CSS中的選擇器。它是能將這兩部分聯(lián)系起來的樣式規(guī)則部分。雖然CSS中有好幾種不同的選中元素的方式，選擇方式可能也有些許的不同，但它們所能起到的作用是完全相同的，即選擇然后進行樣式的定義。在CSS中*是一個通用選擇器，在文件的開頭，使用*做了一個全局聲明，這樣HTML中所以的標簽都繼承了里面的屬性。在這里設置了margin即在元素框邊的空白區(qū)域，這里的參數設置為0，第二個進行的設置為padding即元素邊框的內邊距，這里的參數設置同樣為0，然后就是對字體的選擇。以上的樣式的選擇在網頁的所有的標簽都可以使用，因此在下面的代碼中除非有別的需求，不然不需要再進行特別的設計。然后就是對主要的兩個表單部分的設計，相關代碼如圖3-9所示，首先對這兩個界面使用網格化的設計，讓我們的登錄也注冊界面能夠進行左右的排列，一步步通過按鈕點擊來實現一個簡單的動畫效果，讓界面在不跳轉的情況下可以實現兩種功能，但讓人看到的只有一個。同時調整封裝過后的輸入框位置為居中以及頁面的背景顏色為漸變。圖3-9輸入框界面在網頁里面有時候我們選中文本一般都是默認的藍色，但這個顏色其實是可以進行更改的在這里只需要使用::selection就可以對其進行設置。在這里將background和color都改為#00ffff,就可以看到選中的顏色變?yōu)榍嗌Ｏ乱徊骄褪菍Φ卿浥c注冊界面的整體封裝與布局，在這里將overflow設定為hidden,即在這個登錄與注冊整體的div盒子之中的內容在超出邊界之后被裁剪掉，配合HTML界面在登錄與注冊所做的單選操作，從而達到兩個功能用戶只會看到一個的效果。然后就是對這個封裝的大小設計讓其達到正好顯示出一個功能的大小。通過CSS對這個封裝的操作的選擇這里使用的是class選擇器，class相比于id不同的是，可以在一個頁面上設置多個相同的class,在操作時只需要在CSS中輸入“.class”就可以對擁有相同class屬性的元素進行操作，這樣的話如果有需要對多個元素進行相同的操作，就可以一步到位，減少重復的代碼，提高效率。需要注意的是，class在命名的時候可以先字母后數字但不能先數字后字母。要注意命名的規(guī)范。在接下來的代碼中，就是對整體的登錄注冊的封裝后里面的元素的樣式的設計，如圖3-9所示,這一段代碼就是對單選的登錄和注冊兩個按鈕的CSS樣式設計，“.slide_controls”是這兩個單選按鈕和里面所包含內容的類，因此接下來的代碼對這個整體都產生效果。由圖3-10中的代碼可以看出對這一部分做了以下的設計：首先是這登錄注冊兩按鈕的位置是設置為relative,即相對位置，這樣不會出現重疊的情況，然后可以通過元素默認的定位對其位置進行調整；通過flex布局來讓這兩個按鈕進行排列；這兩個按鈕的高度為50px；寬度設置為100%，與下面的內容保持對齊；通過overflow來隱藏超出父級元素的內容，在進行了這個參數設定之后，在下面只需要對登錄與注冊的寬度設置與父級一樣，就能達到二者顯示一個的效果；通過margin將按鈕周圍的空白區(qū)域進行設置，分別為30px010px0；將兩按鈕設置為兩端對齊讓頁面看起來更加對稱；邊框為1px的lightgrey色實線；圖3-10登錄注冊按鈕CSS按鈕樣式設計然后就是對兩個按鈕進行背景顏色以及大小、的設計。但如果要在點擊到按鈕是才讓其擁有背景顏色，這個時候就要用到“display:none”這個語法。display:none的作用是讓用戶在點擊按鈕時就只能看到當前按鈕的背景色而隱藏另一個，達到便于觀察的效果。它不為被隱藏的對象保留物理空間，讓其直接在頁面上消失。同樣這個元素在網頁上也不會再占任何的位置。對登錄與注冊兩個表單的整體設計需要注意的是寬度的設計為width:200%,這樣子元素的寬度會超過父級元素，而在之前就將兩個功能進行了左右排列，因此在現在只能看到登錄這一個功能的界面，再通過Javascript來實現網頁的左右動態(tài)效果。圖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標簽的內部來改變標簽內容，這樣些效率很低，改動起來也特別麻煩，還不易與后面維護者的閱讀。 主界面需要進行樣式設定的主要是對幾個功能的顯示區(qū)域的設置，以及導航欄的樣式和位置的設置。然后在這里也是用“display:none”然后配合javascript來實現頁面的動態(tài)效果。3.4風電能源決策網站的Javascript使用 在HTML中引入Javascript有兩種方式，在設計中因為使用的并不算多，因此都是使用引入內部Javascript的方式。即在HTML文件的body區(qū)域引入Javascript的代碼。在登錄注冊的界面之中首先使用const進行了五個變量的聲明，頁面上的標題、頁面里的兩個表單和三個按鈕，通過document.querySelector()決定了在點擊相應按鈕后要返回的元素。signupBtn.onclick=(()=>{ loginForm.style.marginLeft="-50%"; loginText.style.marginLeft="-50%";});這段代碼就是在點擊相應的按鈕后，將表單的左外邊距設置為-50%，右邊的注冊表單就顯示出來。當點擊登錄按鈕時，表單左外邊距為0%，就還是顯示登錄界面。在CSS中對左右移動的速度進行了調整，由此達到了左右平滑移動的效果。另一個用到Javascript腳本的就是主界面中的時間設置，在這里首先聲明了一個變量t，使用一個定時器“t=setTimeout(time,500);”并開始運行，讓時間每隔500毫秒刷新一次，再使用一個函數來獲取時間并刷新，具體年月日以及時間只需要通過系統(tǒng)進行調用就可以了。將個時間的變量組合起來就可以的出當前的具體時間，再通過一個定時器讓這一段代碼循環(huán)運行，就可以得出實時的時間。3.5本章總結本章主要講述的系統(tǒng)的前端界面的一步步的實現過程，風電能源決策網站經過HTML、CSS以及javascript三種文件的加入之后的變化在一點點的呈現出來。4網站的數據交互與功能實現4.1數據庫設計 因為設計使用了XAMPP，所以在這里是用mysql來作為數據庫儲存數據。在這里需要做的就是在數據庫中創(chuàng)建出符合我們功能需求的數據表來存儲數據，然后再通過相應的代碼對數據表中的數據進行交互，如獲取、更新、修改數據庫存儲的數據。本系統(tǒng)中包含兩張數據表，具體的詳情如下：使用者信息表（user_password）：用來存儲網站使用者的基本信息。使用者的基本信息包含的數據項有：郵箱以及密碼以及備注。其中郵箱為表的主鍵，具體的詳情如表4-1所示。字段名稱字段說明字段類型字段大小備注email郵箱nvarchar30主鍵，不可為空password密碼nvarchar30不可為空remark備注nvarchar30可為空圖4-1使用者信息表用電量統(tǒng)計表（statistics）：用來存儲錄入的用電信息。其中包含的數據有，錄入用電量的時間。具體的統(tǒng)計表如圖4-2所示。字段名稱字段說明字段類型字段大小備注data錄入時間Datetime8不可為空Count用電量int10不可為空圖4-2用電數據存儲表一般網站的數據都會通過以下幾個步驟來進行處理：傳參→通過PHP語言進行處理→數據庫存取數據→顯示數據。在這里面不可或缺的一部分就是與數據庫的連接，因此在這里創(chuàng)建了一個conn.php文件來實現與數據庫的連接，通過模塊化的設計來讓其它的PHP文件可以十分方便的引用，來提高效率。具體代碼如下圖4-3所示。圖4-3數據庫連接代碼在這里首先對開發(fā)環(huán)境的數據庫的基本信息進行定義，在后面通過相關的代碼對數據庫’phptest’進行連接。4.2用電量收集功能的實現在網頁的form表單中填入數據后，就需要通過對應的PHP代碼進行獲取，這里使用的是$_POST[]，只需要將form表單的action和method屬性正確設置，就可以順利的獲得相關的數據。如需要獲取相應的用電量：$count=$_POST['count'];而將數據通過php代碼存入數據庫也十分的簡單,如圖4-4，圖4-4存儲數據PHP代碼在這里還對數據插入數據表的結果進行了一個查詢，然后通過一個if判斷，在頁面上顯示相對的輸出結果。4.3用電量的顯示與統(tǒng)計在頁面上顯示用戶輸入的用電信息，首先就是需要調用之前的conn.php來連接數據庫，然后直接在HTML文件中引用來連接數據庫，在通過sql代碼來查詢數據表中的數據，再就只需要遍歷表中的內容對其進行輸出就可以了。相關功能部分代碼如圖4-5所示，圖4-5數據顯示代碼4.4登錄注冊功能注冊的時候同樣是要將用戶的注冊信息存儲到數據庫中，在將用戶的注冊郵箱輸入到數據庫之前需要對其進行判斷，看看郵箱是否已經被使用，還需要判斷用戶的郵箱和密碼是否規(guī)范，具體的代碼如圖4-6所示，用戶在進入網站時首先進入登錄界面，等待用戶輸入郵箱和密碼，然后再到數據庫中比較郵箱和密碼是否正確，如果郵箱和密碼和數據庫中相對應，登錄通過后加入相關的鏈接就可以跳轉到主要的功能界面。相關的PHP代碼如圖4-7所示，圖4-6注冊信息判斷圖4-7登錄界面代碼5系統(tǒng)總結與展望本文主要介紹了所做的風電能源網站的實現的基本過程： 1.對所使用的幾種技術進行了詳細的分析，在使用的過程中也進行了詳細的描述。 2.頁面的前端的設計與實現，在HBuilder上使用HTM