導(dǎo)語：Web技術(shù)農(nóng)產(chǎn)品網(wǎng)站設(shè)計與實現(xiàn)一文來源于網(wǎng)友上傳，不代表本站觀點，若需要原創(chuàng)文章可咨詢客服老師，歡迎參考。

1概述

以往，農(nóng)民將農(nóng)產(chǎn)品進(jìn)行生產(chǎn)，為了將這其轉(zhuǎn)化成商品，就必須將其向集散地進(jìn)行運(yùn)輸，產(chǎn)品銷售的成本非常高?，F(xiàn)在通過建立網(wǎng)站，能夠使農(nóng)民、商人不出門就可以在市場上進(jìn)行交易，產(chǎn)品也不需要運(yùn)輸。網(wǎng)站不單單能夠、查看信息，同時還可以進(jìn)行交易等，用戶利用網(wǎng)絡(luò)能夠?qū)鹘y(tǒng)交易中的采集信息、市場調(diào)查以及技術(shù)咨詢等工作直接完成，科學(xué)的網(wǎng)站結(jié)構(gòu)、作用等，能夠使商人以及現(xiàn)代農(nóng)民的需求有效地滿足。因此，高質(zhì)量網(wǎng)站的對農(nóng)業(yè)的發(fā)展起著至關(guān)重要的作用?；ヂ?lián)網(wǎng)技術(shù)的不斷發(fā)展與壯大，農(nóng)產(chǎn)品電子商務(wù)網(wǎng)站亦如春天剛發(fā)芽的小樹苗一樣茁壯成長起來。網(wǎng)站建設(shè)的方式很多，有基于ASP.NET的網(wǎng)站開發(fā)，基于PHP的網(wǎng)站開發(fā)，基于web前端技術(shù)的開發(fā)。基于Web前端的開發(fā)由于它的跨平臺以及自適應(yīng)性等，成為當(dāng)前網(wǎng)站開發(fā)的方向[1]。

2關(guān)鍵技術(shù)

2.1HTML5[2]HTML是一個超文本標(biāo)記語言，負(fù)責(zé)描繪網(wǎng)頁內(nèi)容架構(gòu)。HTML好像是修房子時候用的鋼筋水泥，給房子的整個架構(gòu)搭建起來。HTML用于構(gòu)建段落、標(biāo)簽、樣式、圖像、表格等信息。HTML5是HTML的最新版本，HTML5繼承了原先HTML的部分特征，添加了許多新的語法特性，比如語義特性、本地存儲特性、設(shè)備兼容性、連接性、網(wǎng)頁多媒體特性等。HTML4中元素不能把文檔結(jié)構(gòu)表示清楚，在HTML5中增加了與結(jié)構(gòu)相關(guān)的元素，使文檔結(jié)構(gòu)清楚，結(jié)構(gòu)更加語義化。HTML4在Web中應(yīng)用程序的功能受到限制，比如不允許同時上傳多個文件，HTML5提供了Web應(yīng)用程序使用的API。HTML5優(yōu)勢明顯，具有實現(xiàn)更新，在版本的時候能夠直接瀏覽到最新版。此外它還具有離線緩存、跨平臺、支持視頻和音頻的優(yōu)勢。2.2CSS3CSS層疊樣式表，負(fù)責(zé)如何顯示結(jié)構(gòu)層的有關(guān)內(nèi)容。CSS好比是裝修工程師，給我們的房子裝修，重點在HTML頁面里將文本內(nèi)容進(jìn)行設(shè)置，例如字體等，同時將圖形、頁面布局等進(jìn)行設(shè)置。對于CSS技術(shù)來說，其是以HTML為依托的，將多樣化的功能提供，例如顏色、邊框以及頁面編排等，同時其結(jié)合瀏覽器的不同，其樣式設(shè)置也是不一樣的。對于CSS3來說，其是CSS技術(shù)的改進(jìn)，這一語言開發(fā)開始向模塊化方向邁進(jìn)。CSS3被劃分為模塊。其中最重要的CSS3模塊包括：選擇器、框模型、背景和邊框、文本效果、2D/3D轉(zhuǎn)換、動畫、多列布局、用戶界面。CSS3對于簡單的動畫給予支持，能夠使開發(fā)效率有效提升。在CSS3中將新的內(nèi)容加入進(jìn)來，例如陰影、動畫等[2]。2.3JavaSript對于行為層JavaScript來說，其是目前在Web上使用的最主要的客戶端腳本語言，是Web語言的一個標(biāo)準(zhǔn)，可以對結(jié)構(gòu)層和表現(xiàn)層的內(nèi)容隨意進(jìn)行更改。比如人在修房子的時候，JS可以決定架構(gòu)怎么改變。對于ASP以及PHP等服務(wù)器語文來說，其要把命令向服務(wù)器進(jìn)行上傳，通過服務(wù)器處理，將處理結(jié)果進(jìn)行返回。對于JavaScript來說，能夠在HTML中嵌入，不必通過Web服務(wù)器來響應(yīng)用戶操作，從而使網(wǎng)頁和用戶交互得以實現(xiàn)；在將客戶端個人電腦資源有效應(yīng)用的過程中，要使服務(wù)器端的壓力降低，使用戶等待時間縮減。

3系統(tǒng)需求

3.1系統(tǒng)功能。網(wǎng)站的系統(tǒng)主要分為前臺管理和后臺管理兩大功能模快[3]。網(wǎng)站要體現(xiàn)以客戶為中心的理念。本網(wǎng)站系統(tǒng)的前臺模塊主要使系統(tǒng)和用戶的交互得以實現(xiàn)，要從用戶視角入手，結(jié)合用戶需求，從而設(shè)計出可以滿足用戶購物需求的功能。比如新用戶需要設(shè)計注冊功能，老用戶需要設(shè)計登錄功能。用戶需要瀏覽商品，當(dāng)商品分類下，找到商品時，需要有搜索功能。特別是在網(wǎng)上購物，用戶對交流溝通的需求非常迫切。經(jīng)過詳細(xì)的分析，這一購物系統(tǒng)中，前臺模塊包括注冊登錄、查看商品以及訂單模塊、用戶搜索模板等。網(wǎng)站后臺系統(tǒng)需要擁有強(qiáng)大的功能。在后臺系統(tǒng)中能夠及時上傳新商品、修改商品信息、下架的商品及時刪除。用戶下訂單后，要管理訂單。針對訪問用戶，要有統(tǒng)計工具分析用戶數(shù)據(jù)，更有針對性地營銷。經(jīng)過仔細(xì)的考慮和分析，本購物系統(tǒng)設(shè)計的后臺模塊中包含管理商品、訂單、信息以及統(tǒng)計等模塊。3.2非功能需求。從性能需求來看，系統(tǒng)一定要有相應(yīng)的實用性，正常運(yùn)行時間具有一定的合理性，24小時均可應(yīng)用。而且系統(tǒng)的吞吐量要與需求相符合，在訪問、并發(fā)量最大時，可以將服務(wù)器進(jìn)行增加，使需求得以滿足。從安全需求來看，前臺商城以及后臺管理系統(tǒng)均具有登錄的功能，在后臺系統(tǒng)里，必須進(jìn)行登錄方可實施操作，要不然是不能對系統(tǒng)頁面進(jìn)行訪問的。

4系統(tǒng)設(shè)計及實現(xiàn)

4.1體系結(jié)構(gòu)。京東的客服可以在線實時咨詢，阿里的客服需要客服需要下載阿里客服端才能夠?qū)崿F(xiàn)。阿里巴巴屬于C/S模式，京東屬于B/S模式。B/S模式越來越多地被使用。B/S只需要借助瀏覽器就可以進(jìn)行網(wǎng)絡(luò)的操作，不需要安裝任何的軟件。客戶端零安裝零維護(hù)。本網(wǎng)站采用B/S體系架構(gòu)應(yīng)用，在這一結(jié)構(gòu)中，軟件在服務(wù)器端運(yùn)行，在終端處用戶對服務(wù)器進(jìn)行訪問，能夠?qū)⑵湫枰臄?shù)據(jù)獲取，從而將計算機(jī)資源進(jìn)行有效的節(jié)約[4]。4.2開發(fā)環(huán)境。基于農(nóng)產(chǎn)品的購物網(wǎng)站需要安全穩(wěn)定、維護(hù)成本、快速迭代等。在服務(wù)器端，軟件服務(wù)平臺選用Linx操作系統(tǒng)，選用Apache做為Web服務(wù)器。Apache是世界使用排名第一的Web服務(wù)器軟件，其能夠在全部的計算機(jī)平臺中運(yùn)行，因為它的跨平臺特點使得其得到廣泛推廣，是目前最流行的Web服務(wù)器軟件。PHP軟件選用PHP5。數(shù)據(jù)庫選用MySQL，MySQL可以適用中小型企業(yè)。開發(fā)工具可以選用：AppServ8.4.0、DreamweaverCS6，AppServer是PHP網(wǎng)頁框架工具組合包，包含了：Apache、PHP、MySQL、phpMyAdmin，能夠快速地完成PHP開發(fā)環(huán)境的搭建。4.3前臺功能。[5]注冊登錄：用戶需通過Web中的表單完成注冊后登錄網(wǎng)站。搜索功能：用戶想查找相關(guān)商品，可通過網(wǎng)站首頁的搜索框來完成，通過搜索該商品的名稱來實現(xiàn)對商品的查詢。個人中心：設(shè)置個人資料、添加收獲地址、查看訂單信息、物流信息等。購物功能：商品添加到購物車，進(jìn)入結(jié)算頁面，選擇收貨和支付方式，確認(rèn)訂單。4.4后臺功能。商品管理：包括商品分類、商品規(guī)格、添加、編輯商品信息，對商品進(jìn)行上下架管理。內(nèi)容管理：包括廣告的編輯、網(wǎng)站文章的修改。訂單管理：包括查詢訂單、處理訂單、能進(jìn)行發(fā)貨、填寫物流信息。物流管理：添加物流公司，修改支持的物流公司。支付管理：添加修改支持的支付方式。統(tǒng)計分析：統(tǒng)計銷售數(shù)據(jù)、商品數(shù)據(jù)等。4.5首頁。網(wǎng)站首頁是網(wǎng)站服務(wù)器收到用戶瀏覽器請求時，默認(rèn)返回的第一個文檔。用戶在瀏覽器輸入網(wǎng)站域名，然后呈現(xiàn)出來的第一個頁面，就是網(wǎng)站的首頁。首頁是網(wǎng)站留給用戶的第一印象，體現(xiàn)著公司和網(wǎng)站的形象；同時首頁作為網(wǎng)站的入口，主要用來展示網(wǎng)站最重要的內(nèi)容和功能，引導(dǎo)用戶繼續(xù)瀏覽使用其余頁面的索引和目錄。因此首頁策劃工作在網(wǎng)站策劃設(shè)計中非常重要。農(nóng)商網(wǎng)首頁策劃從內(nèi)容策劃、功能策劃、結(jié)構(gòu)策劃進(jìn)行。內(nèi)容策劃要將各個功能概括成網(wǎng)站的欄目名稱。農(nóng)商網(wǎng)的網(wǎng)站欄目劃分為7個部分：首頁的功能模塊包括商品展示模塊、商品分類模塊、新聞動態(tài)更新模塊、商品搜索模塊、促銷廣告展示模塊。網(wǎng)頁布局就是以最合適瀏覽的方式將圖片和文字排放在頁面的不同位置，為了滿足欄目設(shè)置的要求需要進(jìn)行的網(wǎng)頁模板規(guī)劃。網(wǎng)站的首頁面如圖1所示。

5系統(tǒng)測試

對于網(wǎng)站性能測試來說，其主要有兩種技術(shù)：（1）黑盒技術(shù)，（2）白盒技術(shù)，對于白盒測試來說，必須具有內(nèi)部算法的相關(guān)數(shù)據(jù)，其實就是測試程序員的編程。對于黑盒測試來說，其對系統(tǒng)的要求較低，僅可以利用窮舉技術(shù)，就能夠測試今后網(wǎng)站會出現(xiàn)的情況，不必以網(wǎng)站和邏輯結(jié)構(gòu)為依托，對其進(jìn)行分析。所以，以黑盒測試為基礎(chǔ)，按照使用步驟對輸入的數(shù)據(jù)進(jìn)行實驗，對設(shè)計的基于Web技術(shù)的農(nóng)產(chǎn)品網(wǎng)站的功能以及性質(zhì)實施測試[6]，如表1所示。

6結(jié)語

與傳統(tǒng)的Web開發(fā)框架進(jìn)行比較，HTML5的優(yōu)勢是不可否認(rèn)的，其在多媒體實現(xiàn)、跨平臺應(yīng)用以及用戶體驗上是十分突出的。前端使用HTML5+CSS3設(shè)計基礎(chǔ)頁面，它為大多數(shù)標(biāo)準(zhǔn)的界面設(shè)計提供了用戶友好、跨瀏覽器的解決方案，極大地提高了Web前端的開發(fā)效率，并且能夠建立具有較強(qiáng)兼容性的網(wǎng)站，使人們能夠不出門就能夠輕松地購買農(nóng)產(chǎn)品，促進(jìn)了農(nóng)產(chǎn)品交易，豐富了人們的生活方式。

作者:唐滔 單位:江蘇財會職業(yè)學(xué)院信息系