陳愛(ài)嫵　劉永清

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

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

中圖分類號(hào)：TP393? 文獻(xiàn)標(biāo)識(shí)碼：A? 文章編號(hào)：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? 引? 言

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

1? 需求分析

1.1? 用戶需求分析

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

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

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

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

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

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

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

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

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

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

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

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

3? 概要設(shè)計(jì)

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

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

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

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

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

用戶：用戶名、密碼、電話號(hào)碼。

回收：訂單號(hào)、用戶名、編號(hào)、金額。

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

3.3? 網(wǎng)頁(yè)配色

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

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

4.1? 主頁(yè)設(shè)計(jì)

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

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

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

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

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

4.3? 注冊(cè)頁(yè)面設(shè)計(jì)

點(diǎn)擊登錄頁(yè)面上的注冊(cè)按鈕后，用戶將進(jìn)入注冊(cè)頁(yè)面；注冊(cè)頁(yè)面擬輸入的信息為：“請(qǐng)輸入賬號(hào)”“請(qǐng)輸入密碼”

“請(qǐng)?jiān)俅屋斎朊艽a”等內(nèi)容。每次輸入信息后，點(diǎn)擊注冊(cè)按鈕，首先判斷內(nèi)容是否為空。如果為空，則會(huì)提示賬戶或密碼不能為空；如果輸入不為空，將首先比較輸入前后的密碼。如果密碼不同，會(huì)彈出提示：兩次輸入的密碼不同，請(qǐng)重試！如果兩個(gè)密碼相同，賬戶和密碼數(shù)據(jù)將提交到后臺(tái)，后臺(tái)將提取存儲(chǔ)在數(shù)據(jù)庫(kù)中的用戶信息進(jìn)行比較。如果用戶信息存在，將彈出一條錯(cuò)誤消息：用戶已經(jīng)存在。如果用戶信息尚未存儲(chǔ)在數(shù)據(jù)庫(kù)中，則注冊(cè)成功并返回登錄頁(yè)面。

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

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

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

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

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

4.5? 后臺(tái)設(shè)計(jì)

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

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

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

5? 結(jié)? 論

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

參考文獻(xià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年中國(guó)廢棄電器電子產(chǎn)品回收處理市場(chǎng)發(fā)展前景預(yù)測(cè)及投資戰(zhàn)略咨詢報(bào)告 [R/OL].[2023-11-18].https：//www.huaon.com/channel/proenv/684134.html.

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

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

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

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

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

收稿日期：2023-01-05

基金項(xiàng)目：湖南省社科基金重點(diǎn)項(xiàng)目資助（21ZDB020）