面向用戶的電子廢棄物回收網站規劃與設計

陳愛嫵　劉永清

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

關鍵詞：電子廢棄物；回收網站；網頁設計；面向用戶

中圖分類號：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? 引? 言

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

1? 需求分析

1.1? 用戶需求分析

電子廢棄物作為人類一種正在日益迅速增長中的巨大潛在的資源，其主要特點也越來越容易被我們人類自身所了解。政府在開始逐步加強對電子廢棄物的處理和利用工作后，將逐步采取政策規范引導和相關行業的支持，進行廢舊電子產品所需的原料廢物的資源化處理利用。電子垃圾回收網站是更好實現電子產品回收產業的重要基礎。本電子垃圾回收網站研究可為從事電子產品回收的企業提供技術和理論支持。同時，根據我國電子產品回收現階段狀況，為政府制定電子產品回收立法提供重要參考。

1.2? 網站功能需求

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

2? 開發框架與技術體系

2.1? 開發模塊分析

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

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

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

3）數據庫模塊：用于儲存網站內電子廢棄物信息和用戶信息的儲存。

對于以上三個模塊的設計，下面對每個部分給出主要頁面的設計思路以及實現其功能相關技術。

2.2? 相關技術

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

3? 概要設計

3.1? 網頁總體結構圖

本回收網站由游客、用戶和后臺三大模塊組成，其總體結構圖如圖1所示。

其中，游客模塊和用戶模塊屬于前端部分，主要依靠HTML、CSS、JavaScript等編程語言在網頁中實現。后臺模塊屬于后端，依靠PHP和MySQL數據庫的相關技術實現。

3.2? 后臺數據信息ER圖

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

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

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

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

3.3? 網頁配色

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

4? 詳細設計與實現

4.1? 主頁設計

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

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

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

4.2? 登錄界面設計

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

4.3? 注冊頁面設計

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

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

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

4.4? 商品下單頁設計

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

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

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

4.5? 后臺設計

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

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

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

5? 結? 論

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

參考文獻：

[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] 華經產業研究院.2021—2026年中國廢棄電器電子產品回收處理市場發展前景預測及投資戰略咨詢報告 [R/OL].[2023-11-18].https：//www.huaon.com/channel/proenv/684134.html.

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

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

[5] 祝紅濤，張欽.CSS網絡大講堂 [M].北京：清華大學出版社，2013.

[6] 劉洋.基于PHP語言的行業網站建設實踐分析 [J].現代信息科技，2018，2（12）：101-102．

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

收稿日期：2023-01-05

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