外貿(mào)詢盤網(wǎng)站的設(shè)計(jì)與實(shí)現(xiàn)中文摘要外貿(mào)企業(yè)宣傳公司及產(chǎn)品信息方式的多樣化。一般由電子畫冊(cè)（HTML5網(wǎng)址方式）或者PDF文檔方式發(fā)送給客戶。不管是電子畫冊(cè)還是PDF文檔都是由圖片構(gòu)成的，都會(huì)在后期更新工作量大。特別是PDF文檔更新后客戶還得再獲取一次新版本。本文研究了市面上外貿(mào)商城訂單網(wǎng)站（WordPress博客WooCommerce插件方式、自研MVC方式、OpenCart系統(tǒng)、Magento系統(tǒng)、Shopify商城SaaS平臺(tái)）、外貿(mào)展示網(wǎng)站。國(guó)內(nèi)的外貿(mào)企業(yè)對(duì)外銷售產(chǎn)品一般是定制訂單的，主要是以定制批量為主，所以針對(duì)不同的需求，客戶對(duì)產(chǎn)品的品類、數(shù)量、單價(jià)、出貨周期等需要進(jìn)行郵件溝通確認(rèn)。所以展示產(chǎn)品加產(chǎn)品郵件建立溝通在解決這類外貿(mào)企業(yè)的網(wǎng)站需求是非常必要。國(guó)內(nèi)一些軟件公司采用的是數(shù)據(jù)庫和Cookie來實(shí)現(xiàn)詢盤產(chǎn)品記錄的增刪改查,這種采用后臺(tái)與數(shù)據(jù)庫繁雜模式不利于網(wǎng)站同類需求的復(fù)用，對(duì)于以前老網(wǎng)站增加詢盤功能也是比較麻煩。本文采用PHP+MySQL、LessCSS預(yù)處理語言、Bootstrap4響應(yīng)式框架、JavaScript、jQuery來實(shí)現(xiàn)外貿(mào)詢盤網(wǎng)站。HTMLlocalStorage本地存儲(chǔ)來保存詢盤數(shù)據(jù)增冊(cè)改查，確認(rèn)詢盤產(chǎn)品列表后最好郵件發(fā)送到網(wǎng)站瀏覽者和網(wǎng)站詢盤管理者雙方郵箱。關(guān)鍵詞：展示網(wǎng)站，商城系統(tǒng)，外貿(mào)企業(yè)

DesignandImplementationofForeignTradeInquiryWebsiteAbstractDiversifiedwaysforforeigntradeenterprisestopromotetheircompaniesandproductinformation.Usuallysenttocustomersviaelectronicbrochure(HTML5website)orPDFdocumentformat.BothelectronicbrochuresandPDFdocumentsarecomposedofimagesandrequirealargeamountofupdatingworkinthelaterstages.EspeciallyafterthePDFdocumentisupdated,customersneedtoobtainanewversionagain.Thisarticlestudiesforeigntrademallorderwebsites(WordPressblogWooCommercepluginmethod,self-developedMVCmethod,OpenCartsystem,Magentosystem,ShopifymallSaaSplatform)andforeigntradedisplaywebsitesonthemarket.Domesticforeigntradeenterprisesgenerallysellproductsthroughcustomizedorders,mainlyinbulk.Therefore,accordingtodifferentneeds,customersneedtocommunicateandconfirmtheproductcategory,quantity,unitprice,andshippingcyclethroughemail.Soitisnecessarytodisplayproductsandestablishcommunicationthroughproductemailstoaddressthewebsiteneedsofsuchforeigntradeenterprises.SomesoftwarecompaniesinChinausedatabasesandcookiestoadd,delete,modify,andsearchinquiryproductrecords.Thiscomplexbackendanddatabasemodelisnotconducivetothereuseofsimilarneedsonwebsites,andaddinginquiryfunctionstooldwebsitesisalsoquitetroublesome.ThisarticleusesPHP+MySQL,LessCSSpreprocessinglanguage,Bootstrap4responsiveframework,JavaScript,andjQuerytoimplementaforeigntradeinquirywebsite.HTMLlocalstorageisusedtostoreinquirydata,addvolumes,modifyqueries,andconfirmthelistofinquiryproducts.Itisbesttosendanemailtoboththewebsiteviewerandwebsiteinquirymanager'semailaddresses.Keywords:displaywebsite,mallsystem,foreigntradeenterprise

第一章緒論1.1背景及意義在沒有外貿(mào)網(wǎng)站的時(shí)候，外貿(mào)公司通過郵件或者在線溝通軟件把企業(yè)的信息通過PDF或者圖片方式發(fā)送給客戶。信息的更新需要再次推送，造成人力物力的浪費(fèi)。圖片弄成PDF也不是件容易的事情，半年前我給客戶做過產(chǎn)品PDF文檔，做下來感覺比做個(gè)簡(jiǎn)單的網(wǎng)站還要花時(shí)間和精力。雖然有些客戶做了英文網(wǎng)站，網(wǎng)站一般由首頁、公司簡(jiǎn)介也許公司簡(jiǎn)介下面有子欄目、產(chǎn)品中心、新聞資訊、案例或者產(chǎn)品應(yīng)用、聯(lián)系我們等。這類網(wǎng)站只有信息的展示，如果客戶對(duì)哪個(gè)產(chǎn)品感興趣需要復(fù)制產(chǎn)品URL匯集起來，然后找網(wǎng)站的聯(lián)系郵箱進(jìn)行溝通。誰能方便于客戶的溝通就能提高獲得客戶機(jī)率從而擴(kuò)大市場(chǎng)占有率。本論文分析外貿(mào)公司網(wǎng)站定位，得出一般外貿(mào)公司網(wǎng)站主要還是信息的展示與產(chǎn)品咨詢。至于說下單購買不現(xiàn)實(shí)，零售客戶都是走Amazon等零售平臺(tái)，外貿(mào)公司的客戶都是批量定制產(chǎn)品的，是不零賣的。定制必然需要溝通，同時(shí)外貿(mào)交貨中也涉及物流、貼標(biāo)等一系列工作都需要確認(rèn)。本文采用PHP+MySQL、LessCSS預(yù)處理語言、Bootstrap4響應(yīng)式框架、JavaScript、jQuery、多語翻譯插件來實(shí)現(xiàn)外貿(mào)詢盤網(wǎng)站。HTMLlocalStorage本地存儲(chǔ)來保存詢盤數(shù)據(jù)增冊(cè)改查，確認(rèn)詢盤產(chǎn)品列表后最好郵件發(fā)送到網(wǎng)站瀏覽者和網(wǎng)站詢盤管理者雙方郵箱。數(shù)據(jù)庫存儲(chǔ)詢盤產(chǎn)品信息還是比較繁重，如果采用Cookies

來存儲(chǔ)容易出錯(cuò)（Cookies的默認(rèn)大小約為4KB）。采用HTMLlocalStorage易移植到其它外貿(mào)展示網(wǎng)站為公司帶來營(yíng)業(yè)額增長(zhǎng)，同時(shí)客戶也喜歡外貿(mào)詢盤網(wǎng)站這種方案。

1.2國(guó)內(nèi)外研究概況 隨著國(guó)內(nèi)外貿(mào)經(jīng)濟(jì)的不斷發(fā)展，中國(guó)外貿(mào)網(wǎng)站進(jìn)入了一個(gè)難得的高峰發(fā)展時(shí)期，這使得國(guó)內(nèi)外眾多公司紛紛轉(zhuǎn)向外貿(mào)網(wǎng)站市場(chǎng)。然而，之前外貿(mào)網(wǎng)站存在的不足和客戶新需求的提出，使得一些外貿(mào)網(wǎng)站得到了很大改進(jìn)。雖然與外貿(mào)展示網(wǎng)站一同產(chǎn)生的外貿(mào)商城網(wǎng)站老早也存在，也在不斷的發(fā)展，外貿(mào)商城是面向有零售需求的外貿(mào)公司。很多外貿(mào)公司是不做零售的，他們也只是希望自己的網(wǎng)站有客戶咨詢時(shí)方便點(diǎn)，并且咨詢時(shí)能帶上相關(guān)產(chǎn)品信息?；谕赓Q(mào)客戶的這個(gè)需求一個(gè)新的研究領(lǐng)域—外貿(mào)詢盤網(wǎng)站誕生了。外貿(mào)詢盤網(wǎng)站在B2B國(guó)際電商平臺(tái)會(huì)員網(wǎng)站做的還是很完美的。把外貿(mào)產(chǎn)品詢盤這個(gè)做到企業(yè)官網(wǎng)上并且采用localStorage本地存儲(chǔ)還是比較少的，很多的實(shí)現(xiàn)不是數(shù)據(jù)庫保存記錄就是Cookies來保存記錄。

1.3研究的內(nèi)容目前許多外貿(mào)公司要么沒有自己的官方網(wǎng)站，要么自己的官方網(wǎng)站僅僅是單語展示，與客戶的交互不方便，不能有效與客戶建議連接。本選題則旨在通過PHP+MySQL、Bootstrap4響應(yīng)式框架、LessCSS預(yù)編譯技術(shù)、Emmet提升編寫HTML/CSS代碼效率的文本編輯器插件實(shí)現(xiàn)外貿(mào)詢盤網(wǎng)站的各種功能，從而解決外貿(mào)網(wǎng)站溝通不便問題。詳細(xì)內(nèi)容介紹，將在以下六章中詳細(xì)闡述：第一章、緒論，介紹了研究課題選擇的背景及意義、研究現(xiàn)狀，簡(jiǎn)要介紹了本文的章節(jié)內(nèi)容。第二章、引入技術(shù)知識(shí)，通過引入關(guān)鍵技術(shù)進(jìn)行開發(fā)，向系統(tǒng)中涉及直觀表達(dá)的技術(shù)知識(shí)。第三章、重點(diǎn)分析了系統(tǒng)的分析，從系統(tǒng)的客戶需求出發(fā)，對(duì)系統(tǒng)開發(fā)的可行性，系統(tǒng)流程以及系統(tǒng)性能和功能進(jìn)行了探討。第四章、介紹了系統(tǒng)的詳細(xì)設(shè)計(jì)方案，網(wǎng)站系統(tǒng)結(jié)構(gòu)設(shè)計(jì)和網(wǎng)站數(shù)據(jù)庫設(shè)計(jì)。第五章、系統(tǒng)設(shè)計(jì)的實(shí)現(xiàn)，通過對(duì)系統(tǒng)功能設(shè)計(jì)的詳細(xì)說明，論證了系統(tǒng)的結(jié)構(gòu)。第六章、系統(tǒng)的整體測(cè)試，評(píng)判系統(tǒng)是否可以上線運(yùn)行。

第二章關(guān)鍵技術(shù)的研究2.1相關(guān)技術(shù)外貿(mào)詢盤網(wǎng)站是在PHP+MySQL+IIS開發(fā)環(huán)境的基礎(chǔ)上開發(fā)的。PHP是一種服務(wù)器端腳本語言，易于學(xué)習(xí)（面向過程和面像對(duì)像都支持），移植性好，可以運(yùn)行于Windows/Linux系統(tǒng)下，PHP是市面上最好找維護(hù)人員的服務(wù)器腳本語言。并且IIS/Apache/Nginx三種Web服務(wù)器軟件下都可以運(yùn)行，后期的部署是最方便的。MySQL是一個(gè)數(shù)據(jù)庫管理系統(tǒng)，因?yàn)樗捏w積小但速度快，成本低，或者開源受到中小型網(wǎng)站的青睞，在Access數(shù)據(jù)庫表越過5000行記錄讀取慢，而MySQL幾十萬條記錄依舊快速響應(yīng)，。因此，PHP+MySQL作為一個(gè)成熟的開發(fā)環(huán)境，可以滿足外貿(mào)詢盤網(wǎng)站設(shè)計(jì)和開發(fā)所需的穩(wěn)定性，安全性和可擴(kuò)展性要求。圖2-1MySQL單表幾萬條記錄圖2.2PHP技術(shù)PHP語言是WEB應(yīng)用最廣泛的開發(fā)語言這一。PHP可以在多種平臺(tái)上運(yùn)用的，兼容性比較強(qiáng)，適應(yīng)市面上大多數(shù)操作系統(tǒng)，適應(yīng)于市面上大多數(shù)Web服務(wù)器。在互聯(lián)網(wǎng)高速發(fā)展的今天，PHP的應(yīng)用范圍非常廣泛，具體如下。企業(yè)展示網(wǎng)站、企業(yè)商城網(wǎng)站開發(fā)、中小型WEB應(yīng)用系統(tǒng)開發(fā)、大型網(wǎng)站的業(yè)務(wù)邏輯結(jié)果展示、多媒體系統(tǒng)開發(fā)、OA管理系統(tǒng)、企業(yè)級(jí)應(yīng)用開發(fā)、硬件管控軟件GUI、移動(dòng)互聯(lián)網(wǎng)開發(fā)、電子商務(wù)應(yīng)用。PHP由于會(huì)的技術(shù)人員多、以及采用的項(xiàng)目多造成中小型項(xiàng)目采用PHP的成為首選WEB開發(fā)語言。據(jù)統(tǒng)計(jì)，全世界有超過2200萬個(gè)網(wǎng)站和1.5萬家公司在使用PHP語言，包括百度、雅虎、Facebook、淘寶、騰訊、新浪、搜狐等著名網(wǎng)站，也包括漢莎航空電子訂票系統(tǒng)、德意志銀行的網(wǎng)上銀行、華爾街在線的金融信息發(fā)布系統(tǒng)等，甚至部分軍隊(duì)系統(tǒng)也選擇使用PHP語言，同時(shí)PHP和Python作為現(xiàn)在API接口必備的示例程序語言。PHP相對(duì)其它語言來說，比較簡(jiǎn)單，開發(fā)起來更方便一些，開源安全性良好。不完全統(tǒng)計(jì)，現(xiàn)在全世界大約有60%以上網(wǎng)站使用它，PHP即可以混合html使用，也可以MVC使用。2.3MySQL數(shù)據(jù)庫網(wǎng)站應(yīng)用數(shù)據(jù)的保存少不了數(shù)據(jù)庫，MySQL作為免費(fèi)開源數(shù)據(jù)庫性能遠(yuǎn)超Access，性能足夠一般中小型項(xiàng)目使用。對(duì)于后期數(shù)據(jù)量的增大慢查詢修改還可以優(yōu)化，同時(shí)配合Redis和Memcache改善項(xiàng)目中的數(shù)據(jù)庫頻繁操作，足夠大部分中型項(xiàng)目使用。本論文作為小型項(xiàng)目選擇MySQL數(shù)據(jù)庫來存儲(chǔ)數(shù)據(jù)。2.4Bootstrap4響應(yīng)式框架從以前的PC+WAP演進(jìn)成現(xiàn)在的響應(yīng)式，響應(yīng)式網(wǎng)站采用Bootstrap是非常方便。一般的外貿(mào)企業(yè)網(wǎng)站都是著重電腦版，但也是不能沒有手機(jī)版的，針對(duì)這種需求，采用Bootstrap4排版網(wǎng)站前臺(tái)頁面，在排好電腦版之后針對(duì)手機(jī)版進(jìn)行稍調(diào)即可。簡(jiǎn)直是企業(yè)網(wǎng)站開發(fā)的革命性操作。Bootstrap4不支持IE9及以下，采用flex彈性布局，更細(xì)致的柵格系統(tǒng)，采用Bootstrap4來布局網(wǎng)站前端只需要排版好后針對(duì)設(shè)置細(xì)調(diào)下即可完成前端版面實(shí)現(xiàn)，實(shí)屬高效，蹤合考慮采用Bootstrap4。2.5LessCSS預(yù)編譯Less是一門CSS預(yù)處理語言，它擴(kuò)充了CSS語言，增加了諸如變量、混合（mixin）、函數(shù)等功能，讓CSS更易維護(hù)、方便制作主題、擴(kuò)充。Less可以運(yùn)行在Node.js或?yàn)g覽器端或者采用Less編譯工具koala(考拉)編譯成CSS，但我本論文覺得直接瀏覽器運(yùn)行后期維護(hù)更方便。2.6IISWeb服務(wù)器軟件IIS是Windows內(nèi)置的一款WEB服務(wù)器軟件，是用來運(yùn)行ASP、ASP.NETWEB應(yīng)用的，IIS不光可以運(yùn)行ASP、ASP.NET應(yīng)用還可以運(yùn)行PHP運(yùn)用。為什么使用IIS而不是Apache、Nginx？因?yàn)槲覀兪褂玫碾娔X都是Windows系統(tǒng)居多，IIS自帶并且切換PHP版本方便，可以切換PHP5.2—PHP8中的任何一個(gè)版本，而不像一些PHP集成環(huán)境切換版本不方便，由于PHP的移植性好，移植到其它WEB服務(wù)器軟件下運(yùn)行只需要注意下偽靜態(tài)等即可。2.7JavaScriptJavaScript是web開發(fā)者必學(xué)的語言之一。JavaScript對(duì)網(wǎng)頁行為進(jìn)行編程,網(wǎng)頁的交互少不了JavaScript，從最早的表單驗(yàn)證，發(fā)展到JavaScript操作頁面動(dòng)畫樣式再到現(xiàn)一些移動(dòng)應(yīng)用是以JavaScript為核心開發(fā)語言。更有甚者后端直接是JavaScriptNode.js實(shí)現(xiàn)，JavaScript在WEB中是絕對(duì)不可不用的。2.8Pano2VR是一個(gè)全景圖像轉(zhuǎn)換應(yīng)用軟件Pano2VR是一個(gè)全景圖片制作生成全景360度VR軟件。把全景圖片轉(zhuǎn)換成的HTML5、Flash、QuickTimeVR及的功能，可定制皮膚，您可還以選擇的用戶界面有英語，漢語，法語，日語，德語，波斯語，俄語，西班牙語，土耳其語和瑞典。通過Pano2VR把全景圖片生成VR可以比傳統(tǒng)的圖片展示更生動(dòng)，更能顯示網(wǎng)站的專業(yè)以及更佳的用戶體驗(yàn)。

第三章系統(tǒng)分析3.1系統(tǒng)設(shè)計(jì)目標(biāo) 外貿(mào)詢盤網(wǎng)站主要是為了外貿(mào)公司方便對(duì)網(wǎng)站的公司簡(jiǎn)介、聯(lián)系方式、產(chǎn)品信息、文章信息、產(chǎn)品應(yīng)用信息進(jìn)行增刪改查，前臺(tái)訪客瀏覽網(wǎng)站公司簡(jiǎn)介、聯(lián)系方式、產(chǎn)品信息、文章信息、產(chǎn)品應(yīng)用信息，以及前臺(tái)訪客對(duì)網(wǎng)站產(chǎn)品單個(gè)和多個(gè)產(chǎn)品的詢盤。全球眾多語種如何解決。對(duì)市面上存在的系統(tǒng)進(jìn)行分析來確定本論文系統(tǒng)模塊，遵循開發(fā)的系統(tǒng)優(yōu)化的原則，經(jīng)過全面的調(diào)查和研究。系統(tǒng)所要實(shí)現(xiàn)的功能分析，滿足用戶對(duì)于外貿(mào)公司產(chǎn)品和相關(guān)信息的瀏覽，中意產(chǎn)品的詢盤的生成，電腦手機(jī)瀏覽的良好的用戶體驗(yàn)，VR樣品間，多語言的實(shí)現(xiàn)（考慮到多語內(nèi)容的工作量），系統(tǒng)的穩(wěn)定快速運(yùn)行。3.2系統(tǒng)可行性分析 PHP+MySQL組合可以運(yùn)行于市面上絕大多數(shù)環(huán)境，而且本論文網(wǎng)站使用的是HTMLPHP混合面向過程為主開發(fā)模式，對(duì)PHP版本適應(yīng)性更強(qiáng)。（1）硬件可行性分析現(xiàn)在電腦和手機(jī)普及率高，網(wǎng)站采用Bootstrap4響應(yīng)式框架在電腦和手機(jī)上都方便的瀏覽信息。PHP+MySQL的網(wǎng)站可以說是不用考慮服務(wù)器硬件要求的，為了滿足用戶打開系統(tǒng)順暢度，建議選擇帶寬大點(diǎn)的服務(wù)器。外貿(mào)詢盤網(wǎng)站一般訪問低頻、知曉度低所以攻擊的機(jī)率低，選擇中等安全性的服務(wù)器也是可以的。（2）軟件可行性分析采用面向?qū)ο笈c面向過程結(jié)合方式開發(fā)，底層采用面向?qū)ο蠓绞?，此外，可以使用PHP語言輕松實(shí)現(xiàn)模塊化和存儲(chǔ)信息。另外，代碼重用，也可以很好地反映出來。因此，考慮到系統(tǒng)的實(shí)際情況，通過以上分析，系統(tǒng)的設(shè)計(jì)和實(shí)現(xiàn)在軟件中是可行的。因此，我們從兩個(gè)方面進(jìn)行了可行性研究，可以看出系統(tǒng)的開發(fā)沒有問題。3.3系統(tǒng)功能分析和描述 外貿(mào)詢盤網(wǎng)站分為前臺(tái)訪問用戶和后臺(tái)信息維護(hù)二個(gè)子模塊前臺(tái)訪問用戶的功能主要有：前臺(tái)信息的游覽與產(chǎn)品詢盤的增刪改查郵件提交。后臺(tái)信息維護(hù)功能有：首頁相關(guān)信息維護(hù)、公司簡(jiǎn)介、產(chǎn)品分類、產(chǎn)品視頻、新聞、聯(lián)系我們等信息的維護(hù)。3.4系統(tǒng)功能分析 3.4.1后臺(tái)功能 后臺(tái)用戶登錄后可進(jìn)行，后臺(tái)管理員的功能如圖3-1所示。圖3-1網(wǎng)站后臺(tái)功能圖3.4.2前臺(tái)功能 前臺(tái)打開后主要是信息的展示，首頁、產(chǎn)品中心、推薦產(chǎn)品、為什么選擇我們、關(guān)于我們、新聞、聯(lián)系我們、相關(guān)IM聊天軟件帳號(hào)、社媒鏈接、詢盤列表的維護(hù)及提交前臺(tái)用例如圖3-2所示。圖3-2網(wǎng)站前臺(tái)功能圖3.5系統(tǒng)流程分析 3.5.1添加信息流程 后臺(tái)管理員登錄系統(tǒng)后選擇相關(guān)類型信息進(jìn)行添加，填入相關(guān)信息確認(rèn)信息提交保存。添加信息流程如圖3-3所示。圖3-3后臺(tái)添加信息流程圖3.5.2操作流程 后臺(tái)管理想進(jìn)入網(wǎng)站管理信息，首先進(jìn)入網(wǎng)站登錄界面，通過正確的用戶名密碼登錄網(wǎng)站，系統(tǒng)會(huì)檢查登錄信息是否正確，只有能正確的信息才能登錄網(wǎng)站。網(wǎng)站后臺(tái)操作流程如圖3-4所示。圖3-4網(wǎng)站后臺(tái)操作流程3.5.3刪除信息流程 網(wǎng)站后臺(tái)管理員登錄后選擇要?jiǎng)h除的信息，網(wǎng)站提示是否刪除信息。如果用戶選擇是，將會(huì)把信息標(biāo)記為刪除標(biāo)識(shí)進(jìn)入相應(yīng)內(nèi)容回收站，后期想恢復(fù)也是可以的，如果想徹底刪除去相應(yīng)信息內(nèi)容回收站刪除即可，單頁信息在欄目管理里刪除，沒有回收站一旦刪除就是徹底刪除。刪除信息流程圖如圖3-5所示。圖3-5網(wǎng)站后臺(tái)刪除相應(yīng)內(nèi)容

第四章系統(tǒng)設(shè)計(jì)4.1系統(tǒng)體系結(jié)構(gòu) 外貿(mào)詢盤網(wǎng)站的結(jié)構(gòu)圖4-1所示：網(wǎng)網(wǎng)絡(luò)服務(wù)器和程序管理員前臺(tái)訪客模塊包括主界面；后臺(tái)首頁信息一覽、系統(tǒng)管理、內(nèi)容管理（單頁、列表、圖片、產(chǎn)品的內(nèi)容管理）、幫助與更新，前臺(tái)直接瀏覽相應(yīng)信息。這些功能模塊可以滿足外貿(mào)詢盤網(wǎng)站的大部分需求。此網(wǎng)站功能較為全面如下圖所示，網(wǎng)站功能結(jié)構(gòu)如圖4-2所示。圖4-2外貿(mào)詢盤網(wǎng)站整站架構(gòu)圖4.2數(shù)據(jù)庫設(shè)計(jì) 根據(jù)開發(fā)慣例，數(shù)據(jù)庫名稱采用相關(guān)域名中間部分或者相關(guān)項(xiàng)目的英文命名，編碼為utf8_general_ci。數(shù)據(jù)庫表名采用相關(guān)信息英文+其它構(gòu)成，如數(shù)據(jù)庫產(chǎn)品表名為goods,數(shù)據(jù)庫產(chǎn)品品牌表名則為goodsbrand，其它以則類推。每個(gè)表都有id字段，并且id字段為主鍵自增。4.3數(shù)據(jù)表表4-1wz_admin管理員表字段類型空默認(rèn)idsmallint(5)否usernamevarchar(30)否passwordchar(32)否nicknamechar(32)否questiontinyint(1)否answervarchar(50)否levelnametinyint(1)否checkadminenum('true','false')否loginipchar(20)否logintimeint(10)否表4-2wz_admingroup管理員組表字段類型空默認(rèn)idtinyint(3)否groupnamevarchar(30)否descriptiontext否groupsitevarchar(30)否checkinfoset('true','false')否

表4-3wz_adminnotes管理員記事便簽表字段類型空默認(rèn)unamevarchar(30)否bodymediumtext否posttimeint(10)否postipvarchar(30)否表4-4wz_adminprivacy管理員組權(quán)限表字段類型空默認(rèn)groupidtinyint(3)否siteidtinyint(1)否modelvarchar(30)否classidint(10)否actionvarchar(10)否表4-5wz_failedlogin管理員登錄失敗記錄表字段類型空默認(rèn)usernamechar(30)否ipchar(15)否timeint(10)否numtinyint(1)否isadmintinyint(1)否表4-6wz_goods產(chǎn)品表字段類型空默認(rèn)idint(10)否classidsmallint(5)否parentidsmallint(5)否parentstrvarchar(80)否typeidsmallint(5)否typepidsmallint(5)否typepstrvarchar(80)否brandidsmallint(5)否brandpidsmallint(5)否brandpstrvarchar(80)否titlevarchar(200)否colorvalchar(10)否boldvalchar(10)否flagvarchar(30)否goodsidvarchar(30)否payfreightenum('0','1')否weightvarchar(10)否attrstrtext否marketpricechar(10)否salespricechar(10)否housenumsmallint(5)否housewarnenum('true','false')否warnnumsmallint(5)否moqint(11)否integralchar(10)否sourcevarchar(50)否authorvarchar(50)否linkurlvarchar(255)否keywordsvarchar(250)否descriptionvarchar(255)否contentmediumtext否picurlvarchar(100)否picarrtext否hitsint(10)否orderidint(10)否posttimeint(10)否checkinfoenum('true','false')否delstateset('true')否deltimeint(10)否表4-7wz_goodsattr產(chǎn)品分類屬性表字段類型空默認(rèn)idmediumint(8)否goodsidsmallint(5)否attrnamevarchar(30)否orderidmediumint(8)否checkinfoenum('true','false')否表4-8wz_goodsbrand產(chǎn)品品牌表字段類型空默認(rèn)idmediumint(8)否parentidmediumint(8)否parentstrvarchar(50)否classnamevarchar(30)否picurlvarchar(100)否linkurlvarchar(255)否orderidmediumint(10)否checkinfoenum('true','false')否表4-9wz_goodsflag產(chǎn)品標(biāo)簽表字段類型空默認(rèn)idsmallint(5)否flagvarchar(30)否flagnamevarchar(30)否orderidsmallint(5)否

表4-10wz_goodstype產(chǎn)品分類表字段類型空默認(rèn)idmediumint(8)否parentidmediumint(8)否parentstrvarchar(50)否classnamevarchar(30)否picurlvarchar(255)是NULLlinkurlvarchar(255)是NULLorderidmediumint(8)否checkinfoenum('true','false')否表4-11wz_info單頁信息表字段類型空默認(rèn)idsmallint(5)否classidsmallint(5)否mainidsmallint(5)否picurlvarchar(100)否contentmediumtext否posttimeint(10)否

表4-12wz_infoclass列表信息分類表字段類型空默認(rèn)idsmallint(5)否siteidsmallint(5)否1parentidsmallint(5)否parentstrvarchar(50)否infotypetinyint(1)否classnamevarchar(30)否linkurlvarchar(255)否picurlvarchar(100)否picwidthvarchar(5)否picheightvarchar(5)否seotitlevarchar(80)否keywordsvarchar(50)否descriptionvarchar(255)否orderidsmallint(5)否checkinfoenum('true','false')否表4-13wz_infoflag列表信息標(biāo)簽表字段類型空默認(rèn)idsmallint(5)否flagvarchar(30)否flagnamevarchar(30)否orderidsmallint(5)否表4-14wz_infoimg圖片信息表字段類型空默認(rèn)idint(10)否siteidsmallint(5)否1classidsmallint(5)否parentidsmallint(5)否parentstrvarchar(80)否mainidsmallint(5)否mainpidsmallint(5)否mainpstrvarchar(80)否titlevarchar(80)否colorvalchar(10)否boldvalchar(10)否flagvarchar(30)否sourcevarchar(50)否authorvarchar(50)否linkurlvarchar(255)否keywordsvarchar(50)否descriptionvarchar(255)否contentmediumtext否picurlvarchar(100)否picarrtext否hitsmediumint(8)否orderidint(10)否posttimeint(10)否checkinfoenum('true','false')否delstateset('true')否deltimeint(10)否表4-15wz_infolist列表信息分類表字段類型空默認(rèn)idint(10)否siteidsmallint(5)否1classidsmallint(5)否parentidsmallint(5)否parentstrvarchar(80)否mainidsmallint(5)否mainpidsmallint(5)否mainpstrvarchar(80)否titlevarchar(80)否colorvalchar(10)否boldvalchar(10)否flagvarchar(30)否sourcevarchar(50)否authorvarchar(50)否linkurlvarchar(255)否videovarchar(200)否productsvarchar(20)否keywordsvarchar(50)否descriptionvarchar(255)否contentmediumtext否picurlvarchar(100)否picarrtext否hitsmediumint(8)否orderidint(10)否posttimeint(10)否checkinfoenum('true','false')否delstateset('true')否deltimeint(10)否表4-16wz_diyfield自定義字段表字段類型空默認(rèn)idsmallint(6)否infotypetinyint(1)否cateprivvarchar(255)否fieldnamevarchar(30)否fieldtitlevarchar(30)否fielddescvarchar(255)否fieldtypevarchar(30)否fieldlongvarchar(10)否fieldselvarchar(255)否fieldcheckvarchar(80)否fieldcbackvarchar(30)否orderidsmallint(6)否checkinfoenum('true','false')否表4-17wz_infosrc列表信息來源表字段類型空默認(rèn)idsmallint(5)否srcnamevarchar(30)否linkurlvarchar(80)否orderidsmallint(5)否表4-18wz_maintype信息類型表字段類型空默認(rèn)idsmallint(5)否siteidsmallint(5)否1parentidsmallint(5)否parentstrvarchar(50)否classnamevarchar(30)否orderidsmallint(5)否checkinfoenum('true','false')否表4-19wz_site站點(diǎn)表字段類型空默認(rèn)idsmallint(5)否sitenamevarchar(30)否sitekeyvarchar(30)否sitelangvarchar(50)否表4-20wz_sysevent系統(tǒng)操作記錄表字段類型空默認(rèn)idint(11)否unamevarchar(30)否siteidtinyint(1)否modelvarchar(30)否classidint(10)否actionvarchar(10)否posttimeint(10)否ipvarchar(20)否表4-21wz_uploads上傳文件表字段類型空默認(rèn)idmediumint(10)否namevarchar(30)否pathvarchar(100)否sizeint(10)否typeenum('image','soft','media')否posttimeint(10)否表4-22wz_webconfig系統(tǒng)配置表字段類型空默認(rèn)siteidsmallint(5)否1varnamevarchar(50)否varinfovarchar(80)否vargroupsmallint(5)否vartypechar(10)否varvaluetext否orderidsmallint(5)否

第五章系統(tǒng)實(shí)現(xiàn)5.1后臺(tái)功能模塊后臺(tái)管理員通過用戶名和密碼填寫后登錄后臺(tái)，如圖5-1所示。管理員登錄成功后進(jìn)入網(wǎng)站后臺(tái)操作界面，可以對(duì)網(wǎng)站的配置參數(shù)、網(wǎng)站名稱、title、keywords、description、單頁信息、列表信息、圖片信息、產(chǎn)品信息等相關(guān)功能模塊進(jìn)行操作。圖5-1后臺(tái)登錄界面5.1.1欄目管理外貿(mào)詢盤網(wǎng)站采用欄目樹型形式，相應(yīng)欄目對(duì)應(yīng)相應(yīng)類型（單頁、列表、圖片、產(chǎn)品（唯一）），一般像公司簡(jiǎn)介，或者首頁一些自定義內(nèi)容，頭部底部一些想放在后臺(tái)修改的內(nèi)容采用單頁管理模塊來實(shí)現(xiàn)。像新聞一類就用列表模塊，輪播圖這類用圖片列表，其實(shí)列表與圖片這二個(gè)功能模塊是可以通用的，只是根據(jù)信息特別進(jìn)行使用。圖5-2欄目列表圖5-3添加欄目?jī)?nèi)容5.1.2單頁信息管理單頁信息管理如圖5-4里只提供修改如圖5-5，添加是在欄目管理里添加信息類型選擇單頁即可。圖5-4單頁信息管理圖5-5單頁信息修改

5.1.3列表信息管理列表信息管理如圖5-6一般是用于新聞和常見問題這種偏文章類信息的使用。產(chǎn)品視頻是放在列表信息里管理的，支持本地上傳視頻和視頻YouTube視頻外接。圖5-6列表信息管理圖5-7添加列表信息5.1.4圖片信息管理一般是網(wǎng)站輪播圖、案例、產(chǎn)品應(yīng)用場(chǎng)景等這類有明確圖片屬性的內(nèi)容采用該模塊。如圖5-8本外貿(mào)詢盤網(wǎng)站的輪播圖就采用的是圖片信息管理模塊來維護(hù)信息。圖5-8圖片信息管理5.1.5產(chǎn)品信息管理模塊產(chǎn)品信息管理模塊由產(chǎn)品分類管理和產(chǎn)品信息管理二部分構(gòu)成。產(chǎn)品分類管理如圖5-9所示，產(chǎn)品分類添加如圖5-10所示，產(chǎn)品信息管理及維護(hù)如圖5-11、圖5-12圖5-9產(chǎn)品分類管理圖5-10產(chǎn)品分類添加圖5-11產(chǎn)品信息管理圖5-12產(chǎn)品信息修改產(chǎn)品信息支持多型號(hào)自定義，比如一個(gè)板手有多種尺寸，如果一種尺寸上傳一個(gè)產(chǎn)品會(huì)形成重復(fù)，造成整個(gè)列表都是一個(gè)產(chǎn)品圖片，訪問網(wǎng)站的訪客還以為網(wǎng)站出問題了。5.2前臺(tái)模塊5.2.1首頁外貿(mào)詢盤網(wǎng)站的首頁一般是把網(wǎng)站的一些內(nèi)容聚合到首頁顯示，以及一些想突出給網(wǎng)站訪客看到的內(nèi)容。在與客戶的交涉中，最終客戶選擇了類似于阿里巴巴國(guó)際站這種布局風(fēng)格。首頁由輪播、推薦產(chǎn)品分類、大廣告產(chǎn)品圖、視頻、庫存圖、熱銷產(chǎn)品組成，導(dǎo)航菜單下拉后會(huì)懸浮固定在頭部。首頁效果如圖5-13圖5-135.2.2產(chǎn)品列表頁和詳細(xì)頁經(jīng)過國(guó)內(nèi)外網(wǎng)站統(tǒng)計(jì)分析，以及客戶的反饋，客戶偏向于產(chǎn)品中心頁先顯示產(chǎn)品分類，然后點(diǎn)產(chǎn)品分類進(jìn)入產(chǎn)品相關(guān)分類的列表頁，而不是像國(guó)內(nèi)網(wǎng)站那樣點(diǎn)產(chǎn)品中心頁直接顯示大雜匯如圖5-14。產(chǎn)品列表頁直接顯示某分類下的產(chǎn)品如圖5-15，由于產(chǎn)品涉及多屬性是無法直接詢價(jià)了，所以詢盤鏈接放到產(chǎn)品詳細(xì)頁。產(chǎn)品詳細(xì)頁顯示產(chǎn)品相關(guān)信息，統(tǒng)一的公司簡(jiǎn)介，以及為了搜索引擎優(yōu)化而產(chǎn)生的常見問題如圖5-16。圖5-14產(chǎn)品中心頁顯示產(chǎn)品大類分類導(dǎo)航

圖5-15產(chǎn)品頁表頁

圖5-16產(chǎn)品詳細(xì)頁5.2.3推薦產(chǎn)品頁產(chǎn)品推薦頁就是顯示把產(chǎn)品推薦標(biāo)簽的產(chǎn)品顯示出來。如圖5-17所示圖5-17產(chǎn)品推薦頁5.2.4產(chǎn)品視頻產(chǎn)品視頻頁采用瀑布流形式，顯示圖片、時(shí)間與產(chǎn)品參數(shù)。如圖5-18，視頻的播放采用彈出層Ajax異步讀取視頻等內(nèi)容形式播放，彈出層顯示視頻產(chǎn)品參數(shù)和相關(guān)產(chǎn)品如圖5-19。圖5-18產(chǎn)品視頻頁圖5-19彈出層播放視頻5.2.5為什么選擇我們?yōu)槭裁催x擇我們是個(gè)HTML圖片排版單頁面，這個(gè)單頁面內(nèi)容放到后臺(tái)可以在后臺(tái)修改。顯示效果如圖5-20圖5-20為什么選擇我們網(wǎng)頁5.2.6關(guān)于我們關(guān)于我們網(wǎng)頁由關(guān)于我們圖片混排網(wǎng)頁如圖5-21所示加二個(gè)鏈接（PDF產(chǎn)品文檔、電子畫冊(cè)）。為了更直觀友好的展現(xiàn)外貿(mào)公司的樣品間本論文的樣品間采用了VR內(nèi)嵌iframe形式。VR的制作一般有三種方式：1.Three.js編程形式，可以把普通圖片做成VR，但是學(xué)習(xí)成本高。2.先拍好素材圖然后去VR平臺(tái)上傳圖片生成，涉及付費(fèi)和廣告。3.采用Pano2VR全景圖像轉(zhuǎn)換應(yīng)用軟件來制作VR，這種方式簡(jiǎn)單無廣告，內(nèi)嵌iframe形式支持電腦手機(jī)。全景圖像拍攝有無人機(jī)方式和手機(jī)搭配三角架方式，本論文采用的是手機(jī)搭配三角架方式拍攝而成。圖5-21關(guān)于我們網(wǎng)頁5.2.7新聞新聞列表網(wǎng)頁采用左縮略圖，右標(biāo)題時(shí)間簡(jiǎn)述形式，一行一條新聞如圖5-22所示。新聞詳細(xì)頁采用大通篇不分欄如圖5-23。圖5-22新聞列表頁

圖5-23新聞詳細(xì)頁5.2.8聯(lián)系我們聯(lián)系我們頁面展示外貿(mào)企業(yè)的聯(lián)系信息如圖5-24及留言反饋，留言反饋信息是直接通過PHPMailer發(fā)送到網(wǎng)站管理員郵箱。圖5-24聯(lián)系我們頁5.2.9飄窗飄窗由詢盤、IM軟件二維碼、社媒鏈接、跳頂鏈接組如圖5-25所示圖5-25飄窗5.2.10多語插件本論文研究多語的實(shí)現(xiàn)有子目錄、子域名、獨(dú)立域名、翻譯插件等方式。前面方式都是可以控制譯文內(nèi)容，翻譯插件是無法控制譯文的，具體用哪種方式要看項(xiàng)目目標(biāo)和項(xiàng)目投入，在不增加工作量時(shí)有多語的效果那就用翻譯插件如圖5-26。

圖5-26翻譯插件翻譯效果5.2.11手機(jī)版本論文分析一般外貿(mào)詢盤網(wǎng)站企業(yè)產(chǎn)品應(yīng)用場(chǎng)景是以電腦端為主。在進(jìn)行前端版面排版時(shí)以Bootstrap4框架電腦版為主編寫前端代碼，手機(jī)版把瀏覽器調(diào)試打開選擇iPhoneSE機(jī)型，因?yàn)檫@個(gè)機(jī)型屏幕是最小的，在這個(gè)機(jī)型上顯示正?；旧纤惺謾C(jī)上都會(huì)顯示良好。電腦瀏覽器模擬與現(xiàn)在真機(jī)上肯定有差異的，手機(jī)版還是得在安卓、蘋果手機(jī)瀏覽器上測(cè)試體驗(yàn)細(xì)節(jié)上是否有問題。電腦模擬iPhoneSE機(jī)型首頁顯示如圖5-27。圖5-27電腦模擬iPhoneSE機(jī)型首頁顯示效果5.3詢盤模塊相比于傳統(tǒng)的外貿(mào)展示網(wǎng)站，本論文的詢盤模塊解決了以前外貿(mào)展示網(wǎng)站訪客收集產(chǎn)品鏈接，尋找網(wǎng)站聯(lián)系郵箱溝通的不便。外貿(mào)詢盤模塊有別于其它通過數(shù)據(jù)庫存儲(chǔ)或者Cookie存儲(chǔ)方式，本論文直接采用HTMLlocalStoragelocalStorage存儲(chǔ)容量大于Cookie用于外貿(mào)詢盤網(wǎng)站不會(huì)出現(xiàn)數(shù)據(jù)量超出，也沒有數(shù)據(jù)庫的繁重，后期哪個(gè)外貿(mào)展示網(wǎng)站想加上外貿(mào)詢盤功能只需增加小許工作量即可升級(jí)成外貿(mào)詢盤網(wǎng)站。詢盤的操作在右下角的飄窗如圖5-28中進(jìn)行和，同時(shí)在提交頁面如圖5-29也可以進(jìn)行數(shù)量刪除操作，確認(rèn)產(chǎn)品及數(shù)量后填寫內(nèi)容通過AJAXPHPMailer方式發(fā)送郵件到網(wǎng)站管理員郵箱如圖5-31。

圖5-28飄窗詢價(jià)模塊圖5-29詢盤提交頁

圖5-30詢盤提交成功顯示圖5-31詢盤郵件內(nèi)容

第六章系統(tǒng)測(cè)試6.1測(cè)試定義及目的關(guān)于網(wǎng)站實(shí)現(xiàn)的測(cè)試，英文名稱是WebsiteTEST，簡(jiǎn)稱WT，WT是使用完整其網(wǎng)站的各種功能多次、多案例、多環(huán)境測(cè)試，這是WT的簡(jiǎn)單描述。WT可以證明該功能對(duì)網(wǎng)站的要求是否得到滿足以及是否有效。對(duì)于網(wǎng)站開發(fā)的實(shí)現(xiàn)，不管開發(fā)過程多么努力，在網(wǎng)站運(yùn)行的時(shí)候多少都會(huì)出現(xiàn)一些錯(cuò)誤信息，所以為了網(wǎng)站的安全性及提高系統(tǒng)的使用率及給用戶帶來更好的體驗(yàn)，網(wǎng)站在完成之前，一定要進(jìn)行一遍網(wǎng)站的測(cè)試，再完美的程序也會(huì)有漏洞，再細(xì)心的技術(shù)開發(fā)員也會(huì)有疏忽的時(shí)候，所以對(duì)于程序的測(cè)試是必須要做的一步。通過系統(tǒng)測(cè)試找到系統(tǒng)存在的問題，并根據(jù)問題的原因進(jìn)行在線解決問題，如果找不到解決問題的辦法可以進(jìn)行通過咨詢指導(dǎo)老師或者通過同學(xué)幫忙，一定將問題找出，否則將會(huì)出現(xiàn)更多的錯(cuò)誤。所以程序出現(xiàn)錯(cuò)誤時(shí)不可避免，系統(tǒng)測(cè)試雖然耗時(shí)費(fèi)力，但是為了確保后期網(wǎng)站的長(zhǎng)期使用，必須要進(jìn)行網(wǎng)站測(cè)試，問題解決完成后還要再一步測(cè)試，直到?jīng)]有任何問題后方可進(jìn)行使用。6.2性能測(cè)試任何一款程序開發(fā)成功后都必須通過軟件測(cè)試，它是保障軟件穩(wěn)定運(yùn)行的前提。測(cè)試最主要的一步就是性能測(cè)試，性能測(cè)試內(nèi)容如下：(1)對(duì)于測(cè)試的速度有一定的要求，速度必須快，而且對(duì)于測(cè)試出來的錯(cuò)誤問題一定以最快的速度進(jìn)行處理解決，并且進(jìn)行再次測(cè)試，保證整個(gè)系統(tǒng)運(yùn)行的安全性。(2)在系統(tǒng)測(cè)試的時(shí)候要將測(cè)試所用到的測(cè)試計(jì)劃和測(cè)試報(bào)告保管好，方便后期系統(tǒng)的運(yùn)行使用后的整體維護(hù)操作。(3)軟件測(cè)試整個(gè)過程中的聚類現(xiàn)象應(yīng)優(yōu)先考慮。(4)對(duì)于整體系統(tǒng)測(cè)試，不要用自己的思想去認(rèn)可整個(gè)系統(tǒng)，而是從公正的角度的進(jìn)行對(duì)系統(tǒng)進(jìn)行認(rèn)可，是否符系統(tǒng)的整合應(yīng)用。6.3測(cè)試模塊測(cè)試系統(tǒng)是最新的Windows11系統(tǒng)360瀏覽器15.1chromium內(nèi)核，iPhoneSE(A2298),RedmiNote125G手機(jī)都是用的自帶瀏覽器，通過對(duì)系統(tǒng)實(shí)現(xiàn)的功能模塊進(jìn)行每個(gè)功能模塊的操作測(cè)試，查看每個(gè)用戶的功能