面向用戶的電子廢棄物回收網(wǎng)站規(guī)劃與設(shè)計

陳愛嫵　劉永清

摘? 要：隨著電子信息產(chǎn)業(yè)的發(fā)展，電子廢棄物已成為亟待解決的環(huán)境問題之一。為拓寬電子廢棄物回收渠道，完善其回收體系，構(gòu)建一個面向用戶的電子廢棄物回收網(wǎng)站。通過HBuilder、MySQL等數(shù)據(jù)庫軟件進行開發(fā)，運用HTML、CSS、JavaScript及PHP等技術(shù)進行網(wǎng)站設(shè)計，實現(xiàn)了用戶對電子廢棄物信息的瀏覽、查找、分類、登錄、注冊等功能，進而實現(xiàn)對電子廢棄物回收、交易的目的。

關(guān)鍵詞：電子廢棄物；回收網(wǎng)站；網(wǎng)頁設(shè)計；面向用戶

中圖分類號：TP393? 文獻標識碼：A? 文章編號：2096-4706（2023）12-0010-04

Planning and Design of a User Oriented Electronic Waste Recycling Website

CHEN Aiwu1， LIU Yongqing2

（1.School of Mathematics and Computational Science， Hunan University of Science and Technology， Xiangtan? 411201， China;

2.School of Business， Hunan University of Science and Technology， Xiangtan? 411201， China）

Abstract： With the development of the electronic information industry， electronic waste has become one of the urgent environmental problems to be solved. To expand the channels for electronic waste recycling， improve its recycling system， and build a user oriented electronic waste recycling website. Use the database software such as HBuilder and MySQL for development， and use HTML， CSS， JavaScript， PHP and other technologies for website design， implement functions such as browsing， searching， classifying， logging in， and registering electronic waste information for users， thereby achieving the purpose of electronic waste recycling and trading.

Keywords： electronic waste; recycling website; website design; user oriented

0? 引? 言

隨著我國電子信息產(chǎn)業(yè)的迅猛發(fā)展，電子廢棄物的產(chǎn)生和堆積也大量增加。大量人群流行病學研究證明電子廢棄物暴露可導致多種健康危害效應，如肝腎損害、甲狀腺功能異常、肺功能退化以及致癌風險增高等[1]。2019年我國全年電子產(chǎn)品報廢量有近6億臺合計670多萬噸，經(jīng)預測，到2030年將達到2 722萬噸[2]。十九大提出關(guān)于“加快生態(tài)文明體制改革，建設(shè)美麗中國”中指出“加強固體廢棄物和垃圾處置”是必須“著力解決突出環(huán)境問題”之一。顯然，研究電子廢棄物回收系統(tǒng)，規(guī)劃與設(shè)計其回收網(wǎng)站，對完善我國電子廢棄物回收處理體系，有效發(fā)揮電子廢棄物的資源性，降低其環(huán)境危害性有著非常重要的現(xiàn)實意義。

1? 需求分析

1.1? 用戶需求分析

電子廢棄物作為人類一種正在日益迅速增長中的巨大潛在的資源，其主要特點也越來越容易被我們?nèi)祟愖陨硭私狻Ｕ陂_始逐步加強對電子廢棄物的處理和利用工作后，將逐步采取政策規(guī)范引導和相關(guān)行業(yè)的支持，進行廢舊電子產(chǎn)品所需的原料廢物的資源化處理利用。電子垃圾回收網(wǎng)站是更好實現(xiàn)電子產(chǎn)品回收產(chǎn)業(yè)的重要基礎(chǔ)。本電子垃圾回收網(wǎng)站研究可為從事電子產(chǎn)品回收的企業(yè)提供技術(shù)和理論支持。同時，根據(jù)我國電子產(chǎn)品回收現(xiàn)階段狀況，為政府制定電子產(chǎn)品回收立法提供重要參考。

1.2? 網(wǎng)站功能需求

為了方便用戶完成電子廢棄物回收，本網(wǎng)站需要有三個功能部分。前端網(wǎng)頁負責吸引新用戶注冊，方便老用戶完成回收，同時更好地展示網(wǎng)站內(nèi)容；后端功能主要是完成前端到數(shù)據(jù)庫的數(shù)據(jù)傳輸，保證前端能夠正常調(diào)用數(shù)據(jù)庫數(shù)據(jù)。數(shù)據(jù)庫功能主要完成對于用戶、商品和訂單信息的添加，以及相關(guān)信息的搜索、更改和存儲。

2? 開發(fā)框架與技術(shù)體系

2.1? 開發(fā)模塊分析

從上面需求分析可知，本網(wǎng)站界面共分為三大部分：

1）游客模塊：用于游客瀏覽網(wǎng)站，游客具有注冊、瀏覽、查詢功能。

2）用戶模塊：用于用戶完成網(wǎng)站所提供的服務，為了滿足用戶的需求，它包括用戶登錄、信息瀏覽、信息查詢、信息搜索、選擇回收等功能。

3）數(shù)據(jù)庫模塊：用于儲存網(wǎng)站內(nèi)電子廢棄物信息和用戶信息的儲存。

對于以上三個模塊的設(shè)計，下面對每個部分給出主要頁面的設(shè)計思路以及實現(xiàn)其功能相關(guān)技術(shù)。

2.2? 相關(guān)技術(shù)

前端制作軟件采用HBuilder網(wǎng)頁開發(fā)軟件[3]，數(shù)據(jù)庫開發(fā)軟件采用MySQL小型關(guān)系式資料庫管理系統(tǒng)[4]；網(wǎng)頁設(shè)計采用了主流的編程語言HTML、JavaScript（JS）語言[3]、層疊樣式表（Cascading Style Sheets， CSS）語言[5]和PHP“超文本處理器”高級腳本語言[6]等技術(shù)。

3? 概要設(shè)計

3.1? 網(wǎng)頁總體結(jié)構(gòu)圖

本回收網(wǎng)站由游客、用戶和后臺三大模塊組成，其總體結(jié)構(gòu)圖如圖1所示。

其中，游客模塊和用戶模塊屬于前端部分，主要依靠HTML、CSS、JavaScript等編程語言在網(wǎng)頁中實現(xiàn)。后臺模塊屬于后端，依靠PHP和MySQL數(shù)據(jù)庫的相關(guān)技術(shù)實現(xiàn)。

3.2? 后臺數(shù)據(jù)信息ER圖

本回收網(wǎng)站的后臺數(shù)據(jù)信息主要由用戶、回收及物品三部分組成，其數(shù)據(jù)信息ER如圖2所示。

用戶：用戶名、密碼、電話號碼。

回收：訂單號、用戶名、編號、金額。

物品：編號、名稱、品牌、型號、功能、數(shù)量、運單號、尺寸、外觀、使用年限。

3.3? 網(wǎng)頁配色

網(wǎng)頁的配色主要采用白色、灰色、黃色、橙色這樣一種配色。黃色的光譜是處于紅橙色與藍綠色光譜中間地帶的一種色彩，帶給人一種愉悅，充滿著希望與生命的感受。黃色是一種可見性佳的顏色，所以通常會被用作電子產(chǎn)品或相關(guān)網(wǎng)站內(nèi)；并且顯示在網(wǎng)頁背景中也比較容易吸引人眼球，給用戶帶來一種較好的體驗。而白色和灰色主要為背景顏色，白色和灰色的搭配簡潔而又可以突出重點。

4? 詳細設(shè)計與實現(xiàn)

4.1? 主頁設(shè)計

網(wǎng)站主頁是整個網(wǎng)頁導航設(shè)計過程中非常關(guān)鍵的一部分，所反映的信息是完整網(wǎng)頁內(nèi)容的外觀，圍繞整個網(wǎng)頁內(nèi)容的特定主題顯示與內(nèi)容相關(guān)的一些消息。它可以使網(wǎng)絡(luò)瀏覽器在互聯(lián)網(wǎng)上第一時間欣賞到導航網(wǎng)頁本身的特點?；厥站W(wǎng)站首頁的前端部分主要包含了除后臺數(shù)據(jù)庫在外的其他部分，只需要用DIV+CSS就可以完成全部的網(wǎng)頁模塊，包含了登錄模塊、導航欄、宣傳欄和底部鏈接等模塊。

登錄模塊處于頁面左上角位置，同時顏色與普通文字有區(qū)分，讓用戶一眼就能看出點擊此處即可進入登錄頁面；導航欄位于頁面中部位置，將鼠標移至導航欄上即可顯示更多選項；宣傳欄和底部鏈接為靜態(tài)展示，展示的信息可以樹立網(wǎng)站的整體形象，了解與網(wǎng)站相關(guān)的信息。DIV標記是用來控制代碼的遞歸次序，CSS樣式可以控制其他變化，如在網(wǎng)頁上顯示的代碼的方向和顏色。

列表的側(cè)拉功能通過float實現(xiàn)，次列表通過hover隱藏。使用position控制導航欄背景色的定位方式，通過調(diào)試每種樣式的長度、寬度、高度、厚度、分詞、字體大小和間距，可以達到更舒適、更美觀的效果。其中主要分為兩個列表，通過HTML中的UL、LI標簽來實現(xiàn)。第一個列表為電子廢棄物類別，有家居類、電池電源類、手機、電腦四個分類，用于給用戶初步選擇；第二個列表需要鼠標移動至第一個列表選項上自動展開，展開后為該類具體的電子廢棄物品種，給用戶進行選擇，如電視、冰箱等。這樣設(shè)計的好處是在既能夠?qū)⒄緝?nèi)的信息有效地進行引導展示的同時，又不會因為一次展示所有的商品項目而導致用戶眼花繚亂。

4.2? 登錄界面設(shè)計

回收網(wǎng)站的登錄界面設(shè)計如圖3所示。用戶進入首頁后，若點擊左上方登錄按鈕，則會進入至登錄界面，在此頁面可以進行登錄，也可以點擊下方兩側(cè)“忘記密碼”“注冊”按鈕，進入更改密碼頁面和注冊頁面。其登錄設(shè)計流程圖如圖4所示。

4.3? 注冊頁面設(shè)計

點擊登錄頁面上的注冊按鈕后，用戶將進入注冊頁面；注冊頁面擬輸入的信息為：“請輸入賬號”“請輸入密碼”

“請再次輸入密碼”等內(nèi)容。每次輸入信息后，點擊注冊按鈕，首先判斷內(nèi)容是否為空。如果為空，則會提示賬戶或密碼不能為空；如果輸入不為空，將首先比較輸入前后的密碼。如果密碼不同，會彈出提示：兩次輸入的密碼不同，請重試！如果兩個密碼相同，賬戶和密碼數(shù)據(jù)將提交到后臺，后臺將提取存儲在數(shù)據(jù)庫中的用戶信息進行比較。如果用戶信息存在，將彈出一條錯誤消息：用戶已經(jīng)存在。如果用戶信息尚未存儲在數(shù)據(jù)庫中，則注冊成功并返回登錄頁面。

其中，代碼主要實現(xiàn)的是判斷賬號密碼輸入是否為空，用戶名是否符合規(guī)定，密碼和確認密碼是否相同，以及確認用戶名是否存在，無誤則寫入數(shù)據(jù)庫。

4.4? 商品下單頁設(shè)計

以家電類電視機為例，其商品信息選擇實現(xiàn)圖包括品牌、尺寸、外觀、功能、已使用年限、型號、數(shù)量等。從主頁或者搜索框進入商品下單頁后，用戶根據(jù)自己所需回收的電子廢棄物信息，選擇好品牌、尺寸、外觀等關(guān)鍵信息，并將該頁數(shù)據(jù)帶到確認下單頁，以供用戶在下頁確認信息有無錯誤。選擇好相關(guān)信息后，點擊“確認”后得商品信息選擇圖（略）如圖5所示。

該頁主要用于用戶進行對自己產(chǎn)品相關(guān)屬性的選擇和確認，做好確認下單的準備。其中l(wèi)ocalStorage.setItem（）可以將本頁關(guān)鍵數(shù)據(jù)：品牌、尺寸、外觀、功能、已使用年限、型號、數(shù)量存儲到本地，利用var value=document.name.value來獲取表單值，以供后面的頁面用于展示數(shù)據(jù)信息、存入數(shù)據(jù)庫等步驟。

用上述相似的方法，對更改密碼頁、確認下單頁、搜索模塊及個人中心頁面等模塊進行設(shè)計。

4.5? 后臺設(shè)計

1）用戶信息表由id（用戶編號）、username（用戶名）、password（密碼）、phone num（電話號碼）構(gòu)成，其中id為主鍵。用戶在注冊本網(wǎng)站賬戶時填寫username、password、phone num等信息，注冊成功后這三個信息將存入數(shù)據(jù)庫，同時自動生成用戶編號，其數(shù)據(jù)庫內(nèi)設(shè)計表如表1所示。

2）物品表由no（物品編號）、name（物品名稱）、size（尺寸）、appearance（外觀）、function（功能）、time（使用年限）、model（設(shè)備型號）、num（數(shù)量）、waybill（運單號）構(gòu)成，其中num為主鍵。當用戶在下單時選擇name、size、appearance、function、time、model、num、waybill各項數(shù)據(jù)后，頁面會將數(shù)據(jù)存入數(shù)據(jù)庫，并自動生成物品編號，其數(shù)據(jù)庫內(nèi)設(shè)計表如表2所示。

3）訂單表由order（訂單號）、id（用戶編號）、num（物品編號）、money（交易金額）構(gòu)成，由管理員自行根據(jù)庫內(nèi)物品和用戶信息填寫id和num，以及根據(jù)對用戶回收的電子廢棄物進行評估后的價格寫入money，訂單號自動生成，其數(shù)據(jù)庫內(nèi)設(shè)計表如表3所示。

5? 結(jié)? 論

電子廢棄物回收網(wǎng)站是基于HTML、CSS、JavaScript、PHP和MySQL等技術(shù)，完成了用戶登錄、更改密碼、新用戶注冊、用戶下單、搜索、查看訂單信息以及相關(guān)聯(lián)的數(shù)據(jù)庫設(shè)計而實現(xiàn)，對各個組成部分的視覺設(shè)計和功能設(shè)計進行探索，將各個模塊界面相互聯(lián)系，并且能夠?qū)崿F(xiàn)相應的功能。當用戶需要回收電子廢棄物時，進入本網(wǎng)站完成用戶注冊或者登錄，然后找到相關(guān)電子廢棄物類型、填寫相應的信息并進行下單，完成回收用戶的訂單信息，解決用戶的實際需求。

參考文獻：

[1] GRANT K，GOLDIZEN F C，SLY P D，et al．Health consequences of exposure to e-waste：a systematic review [J].Lancet Global Health，2013（6）：e350-e361.

[2] 華經(jīng)產(chǎn)業(yè)研究院.2021—2026年中國廢棄電器電子產(chǎn)品回收處理市場發(fā)展前景預測及投資戰(zhàn)略咨詢報告 [R/OL].[2023-11-18].https：//www.huaon.com/channel/proenv/684134.html.

[3] 莫振杰.從0到1HTML+CSS+JavaScript快速上手：微視頻版 [M].北京：人民郵電出版社，2019．

[4] 卜耀華，石玉芳.MySQL數(shù)據(jù)庫應用與實踐教程 [M].北京：清華大學出版社，2017.

[5] 祝紅濤，張欽.CSS網(wǎng)絡(luò)大講堂 [M].北京：清華大學出版社，2013.

[6] 劉洋.基于PHP語言的行業(yè)網(wǎng)站建設(shè)實踐分析 [J].現(xiàn)代信息科技，2018，2（12）：101-102．

作者簡介：陳愛嫵（1967—），女，漢族，湖南湘潭人，助理實驗師，大專學歷，研究方向：計算機應用、計算機軟件維護；通訊作者：劉永清（1963—），男，漢族，湖南婁底人，教授，碩士生導師，本科，研究方向：管理信息系統(tǒng)、逆向物流系統(tǒng)及供應鏈管理與優(yōu)化。

收稿日期：2023-01-05

基金項目：湖南省社科基金重點項目資助（21ZDB020）