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

1概述

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

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

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

3系統(tǒng)需求

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

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

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

5系統(tǒng)測(cè)試

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

6結(jié)語(yǔ)

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

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