陳富強(qiáng)，黃燕惟

（廣州華商學(xué)院數(shù)據(jù)科學(xué)學(xué)院，廣州 510000）

0 引言

隨著經(jīng)濟(jì)的發(fā)展，網(wǎng)購(gòu)這種消費(fèi)方式越來越被人們所喜愛，并且伴隨著快時(shí)尚消費(fèi)經(jīng)濟(jì)的蓬勃發(fā)展，人們熱衷于在互聯(lián)網(wǎng)以及線下購(gòu)買大量的快時(shí)尚消費(fèi)品。對(duì)于學(xué)生來說，他們需要一個(gè)平臺(tái)提供一種彈性使用的環(huán)境，即能自由地讓手中的物品發(fā)揮最大的用處。由于學(xué)生缺少經(jīng)濟(jì)來源，在生活費(fèi)的限制下，他們需要一種方式來緩解由于沖動(dòng)消費(fèi)而造成的浪費(fèi)與壓力。在“校園淘”小程序中，賣家可以將自己多余的、閑置的物品放到其中等待買家，從而減少浪費(fèi)并且起到一個(gè)循環(huán)利用的用途，有利于綠色環(huán)保，符合當(dāng)下循環(huán)經(jīng)濟(jì)的主題?；谶@個(gè)研究背景，“校園淘”小程序可以給用戶提供一個(gè)平臺(tái)，滿足用戶的需求。

ThredUP是美國(guó)二手交易平臺(tái)，這個(gè)平臺(tái)在2009年正式對(duì)公眾開放，并且該平臺(tái)對(duì)外宣稱為“世界上最大的在線舊貨店”。剛開始創(chuàng)辦的時(shí)候，ThredUP平臺(tái)的主要服務(wù)人群有兩種，一種是兒童，因?yàn)閮和幱诔砷L(zhǎng)階段，隨著年齡的增長(zhǎng)，許多家庭會(huì)剩下來很多寶寶穿不下的衣服；第二種是女性，因?yàn)榕詯勖赖奶煨?，使得她們常常?huì)購(gòu)買大量的時(shí)尚單品，而很多都會(huì)被丟棄。與其他售賣平臺(tái)不同的是，ThredUP沒有采納C2C模式，它非常巧妙地在這之間插入了一個(gè)新的環(huán)節(jié)，使其更簡(jiǎn)便地服務(wù)于顧客，也就是C2B2C模式，我們常把這個(gè)叫做寄售模式，這個(gè)模式類似于在淘寶上購(gòu)買一件商品，收到后不滿意，便通過快遞退還給買家一樣。C2B2C就將物品打包拿到寄售點(diǎn)就可以了。從創(chuàng)辦起直到今天，ThredUp已經(jīng)擁有了2000萬(wàn)的用戶，與其合作的服裝品牌也有35000個(gè)，公司每天處理大量的商品，有統(tǒng)計(jì)稱每天要處理的商品超過了10萬(wàn)件，而該公司在市場(chǎng)上的估值也達(dá)到了5億美元的高額。雖然ThredUp從本質(zhì)上來說還是C2C模式，但是平臺(tái)對(duì)于用戶來說十分重要。在交易過程中，賣家需要把自己想要出售的衣物自主清洗干凈打包，然后到快遞點(diǎn)將這些東西郵遞到ThredUp，ThredUp會(huì)把剩下的流程完成，比如拍照、發(fā)布等操作，ThredUp將會(huì)幫賣家一件承包，也就是說之后賣家就可以等著貨款直接打到賬戶里。同時(shí)ThredUP的電商屬性也非常強(qiáng)，體現(xiàn)在用戶在賣出舊物后可以直接等錢到賬。

而在國(guó)內(nèi)，“閑魚”是一款可以供用戶進(jìn)行閑置交易的客戶端APP，該軟件由阿里巴巴集團(tuán)的子部門研發(fā)。一般的用戶進(jìn)行網(wǎng)上開店的過程都比較復(fù)雜，比如淘寶等軟件，需要一系列開店規(guī)定和認(rèn)證手續(xù)，非常不利于民眾自主開店，而閑魚只需要用淘寶賬號(hào)或支付寶賬號(hào)登錄即可，用戶在登陸之后便可將自己在淘寶上買到的商品轉(zhuǎn)至閑魚平臺(tái)進(jìn)行轉(zhuǎn)賣，自主拍照將商品發(fā)布至頁(yè)面上，以及在線交易等其他的功能。利用“閑魚”這款軟件，賣家在上傳商品之后將獲得一定的曝光量，這樣便可以使買家在頁(yè)面上實(shí)時(shí)瀏覽、同時(shí)閑魚的物流價(jià)格也比其他平臺(tái)更加優(yōu)惠，這樣就可以讓賣家手中的閑置物品最快、最優(yōu)惠地到達(dá)買家的手里。此外，閑魚這款軟件與淘寶相掛鉤，也就是閑魚可以直接與淘寶上的數(shù)據(jù)相連接，這也令數(shù)據(jù)安全得到最大的保障。

1 相關(guān)例論及關(guān)鍵技術(shù)

Vue.js［1］是現(xiàn)代中小型企業(yè)前端開發(fā)熱門的框架，其特點(diǎn)是只關(guān)注視圖層設(shè)計(jì)，而不考慮其他，主要是為了構(gòu)建用戶使用界面，Vue采取自底向上的設(shè)計(jì)，是一款漸進(jìn)式框架。目的是利用簡(jiǎn)單的API來達(dá)到實(shí)現(xiàn)響應(yīng)式數(shù)據(jù)綁定以及視圖組件組合的效果。該技術(shù)相對(duì)來說比較容易上手，對(duì)于開發(fā)人員來說也便于和第三方庫(kù)或者其他已經(jīng)創(chuàng)建的項(xiàng)目進(jìn)行整合。另外，相對(duì)現(xiàn)代主流的工具鏈來說，Vue強(qiáng)大的功能體系完全可以為相對(duì)復(fù)雜的單頁(yè)應(yīng)用提供有效的數(shù)據(jù)驅(qū)動(dòng)服務(wù)。Vue.js能夠通過對(duì)組件的設(shè)計(jì)將單頁(yè)應(yīng)用中的每一個(gè)模塊拆解開來，再根據(jù)開發(fā)者的需求分配到單獨(dú)組件上。開發(fā)者只需將父級(jí)應(yīng)用中的部分寫好，例如每個(gè)組件標(biāo)簽。接著將參數(shù)寫進(jìn)標(biāo)簽中，這個(gè)過程類似函數(shù)傳參，參數(shù)稱為組件的屬性，最后再寫好每個(gè)組件的實(shí)現(xiàn)，整個(gè)應(yīng)用就可以搭建完成。目前的網(wǎng)頁(yè)都可以說是一棵DOM樹，網(wǎng)頁(yè)界面可以抽象為一棵組件樹，Vue框架的做法是一個(gè)組件為Vue的實(shí)例，它可以方便地注冊(cè)到Vue里面。Vue的核心庫(kù)與其他的技術(shù)框架相比更特殊，因?yàn)閂ue只關(guān)注應(yīng)用的視圖層。此外，Vue不僅能夠運(yùn)行采用單文件組件的庫(kù)，也可以和其原生系統(tǒng)所支持的庫(kù)進(jìn)行頁(yè)面開發(fā)。

Ajax全稱為Asynchronous JavaScript And XML，其意思是前端開發(fā)者常常會(huì)用到的異步JavaScript和XML。Ajax框架技術(shù)在現(xiàn)代網(wǎng)頁(yè)前端開發(fā)中的應(yīng)用已然成為一種新的潮流，它是一種可使系統(tǒng)能夠與用戶擁有良好交互體驗(yàn)的技術(shù)，并且運(yùn)用這種技術(shù)能夠使網(wǎng)頁(yè)達(dá)到動(dòng)態(tài)且快速響應(yīng)的效果。采取Ajax的好處在于可以令用戶體驗(yàn)到更好的網(wǎng)頁(yè)瀏覽或軟件使用效果，這是因?yàn)锳jax技術(shù)能夠指定令網(wǎng)頁(yè)部分內(nèi)容進(jìn)行更新，而不是像傳統(tǒng)網(wǎng)頁(yè)一樣每次都需要刷新整個(gè)網(wǎng)頁(yè)，后者的效率低且使用體驗(yàn)感較差。

很多初學(xué)者都以為Ajax是一種新的技術(shù)，其實(shí)Ajax是由好幾種技術(shù)結(jié)合而成的，這幾種技術(shù)包括：

（1）利用CSS和XHTML進(jìn)行網(wǎng)頁(yè)頁(yè)面或者靜態(tài)界面設(shè)計(jì)。

（2）運(yùn)用Dom模型處理頁(yè)面的動(dòng)態(tài)設(shè)計(jì)與用戶和界面的交互設(shè)計(jì)。

（3）在數(shù)據(jù)通訊方面采取異步的方式，在與服務(wù)器進(jìn)行數(shù)據(jù)傳輸時(shí)利用XmlHttpRequest來完成。

（4）對(duì)于數(shù)據(jù)綁定的操作加上其他模塊之間的操作、調(diào)用等行為都用javascript來完成。

以上這些技術(shù)中，只有XmlHttpRequest對(duì)象是不基于Web標(biāo)準(zhǔn)的，其余的幾項(xiàng)技術(shù)全部基于Web標(biāo)準(zhǔn)，并且處于比較主流的位置。由于W3C是萬(wàn)維網(wǎng)聯(lián)盟，對(duì)于網(wǎng)絡(luò)的規(guī)定是十分標(biāo)椎且嚴(yán)格的，所以XMLHttpRequest現(xiàn)在未被W3C所采納，即便如此，仍被人們默認(rèn)為是一個(gè)標(biāo)準(zhǔn)。以前的頁(yè)面必須刷新整個(gè)瀏覽器頁(yè)面才能更新所需要的內(nèi)容，這顯然非常的繁瑣，用戶并不了解具體的機(jī)制，因此會(huì)感到非常麻煩；而Ajax與之不同，可以令頁(yè)面部分內(nèi)容更新，這個(gè)技術(shù)的原理是Ajax在需要數(shù)據(jù)的時(shí)候，會(huì)通過后臺(tái)與服務(wù)器進(jìn)行對(duì)話，向服務(wù)器申請(qǐng)資源，但和傳統(tǒng)的資源請(qǐng)求方式不同，Ajax只需要申請(qǐng)少量的資源，以滿足頁(yè)面當(dāng)中某一模塊所需，這樣便實(shí)現(xiàn)了異步更新的操作。Ajax的原理簡(jiǎn)略來說就是當(dāng)頁(yè)面某一模塊需要更新數(shù)據(jù)或者獲取其他數(shù)據(jù)的時(shí)候，頁(yè)面會(huì)調(diào)用XmlHttpRequest對(duì)象，將數(shù)據(jù)請(qǐng)求的指令發(fā)送給服務(wù)器，服務(wù)器在接收到請(qǐng)求并驗(yàn)證了該請(qǐng)求的有效性后，就會(huì)對(duì)其返回頁(yè)面所需的數(shù)據(jù)，然后利用JavaScript來操作DOM，這樣就可以實(shí)現(xiàn)異步刷新。這一步的要點(diǎn)是從服務(wù)器取得請(qǐng)求數(shù)據(jù)。簡(jiǎn)單來說，如何向服務(wù)器提出請(qǐng)求并處理響應(yīng)，就是由JavaSrcipt支持的，通過這一點(diǎn)才能在不阻塞用戶的前提下對(duì)網(wǎng)頁(yè)達(dá)到無需全局刷新便獲得部分內(nèi)容刷新的效果。

云開發(fā)技術(shù)是微信開發(fā)者工具在基礎(chǔ)庫(kù)2.2.3的時(shí)候開始面向公眾開放的，這是微信小程序給開發(fā)者提供的一種可以替代服務(wù)器的開發(fā)環(huán)境，并且會(huì)提供給小程序一定的資源存儲(chǔ)庫(kù)。開發(fā)者在開發(fā)小程序或小游戲時(shí)，可以使用云端服務(wù)進(jìn)行數(shù)據(jù)存儲(chǔ)和管理，開發(fā)者可以省下自己搭建服務(wù)器的步驟，使開發(fā)的速度提升，也更簡(jiǎn)便。云開發(fā)技術(shù)為開發(fā)者提供了完好的原生支持和微信服務(wù)支持能力，基于這一點(diǎn)，后端的概念也被進(jìn)一步淡化，同時(shí)由于運(yùn)維可以直接在云開發(fā)平臺(tái)上進(jìn)行，傳統(tǒng)的運(yùn)維模式也隨之變化，雖然形式上有所不同，但其實(shí)本質(zhì)上并沒有改變。在此之前，開發(fā)者常常因?yàn)樾〕绦虮仨毷褂胔ttp協(xié)議開發(fā)的問題而遇到諸多麻煩，這一點(diǎn)被云開發(fā)的功能很好地解決。開發(fā)者可以采用微信官方平臺(tái)提供的API進(jìn)行小程序各種內(nèi)部業(yè)務(wù)的開發(fā)工作，并且具有安全性。這也實(shí)現(xiàn)了在小程序的開發(fā)工作結(jié)束之后便可以根據(jù)企業(yè)或開發(fā)者個(gè)人的需要快速地上線與更新迭代，值得一提的是這個(gè)能力可以和開發(fā)者使用的云服務(wù)兼容，可大大降低小程序開發(fā)者的工作強(qiáng)度，并且在減少開發(fā)成本的前提下提高開發(fā)效率。

云開發(fā)平臺(tái)目前能夠?yàn)殚_發(fā)者提供的基礎(chǔ)技術(shù)支持包括以下三種：

（1）云函數(shù)支持：這是一種可以直接運(yùn)行于云端的代碼，屬于微信平臺(tái)自主研發(fā)的私有協(xié)議，通過云函數(shù)，開發(fā)者只需要將自己項(xiàng)目每個(gè)模塊的邏輯代碼寫好即可。

（2）數(shù)據(jù)庫(kù)支持：這是一種JSON數(shù)據(jù)庫(kù)，十分高效簡(jiǎn)潔，操作管理方便，可以在云函數(shù)當(dāng)中進(jìn)行讀寫等不同的操作，同時(shí)也支持在前端設(shè)計(jì)頁(yè)面對(duì)數(shù)據(jù)進(jìn)行操作。

（3）存儲(chǔ)支持：存儲(chǔ)支持這項(xiàng)技術(shù)可以幫助用戶或開發(fā)者、維護(hù)人員等從前端頁(yè)面上傳或者下載云端文件，云端管理后臺(tái)在接收到指令后可以返回?cái)?shù)據(jù)，也可以在云開發(fā)頁(yè)面當(dāng)中進(jìn)行有效的可視化管理。

網(wǎng)站內(nèi)容管理及發(fā)布系統(tǒng)（content management system，CMS）是經(jīng)過一系列悠久的探索與分析結(jié)合順利實(shí)現(xiàn)的網(wǎng)站后端管理系統(tǒng)，也是國(guó)內(nèi)外企業(yè)在經(jīng)過大量的網(wǎng)站建設(shè)經(jīng)驗(yàn)之后發(fā)布的專門為互聯(lián)網(wǎng)設(shè)計(jì)的系統(tǒng)。CMS可以面向網(wǎng)站根據(jù)網(wǎng)站的內(nèi)容進(jìn)行不同的操作，包括更新、刪除、增添、查詢等操作，對(duì)其內(nèi)容進(jìn)行編輯、發(fā)布、管理等。這是一種軟件系統(tǒng)，常常會(huì)運(yùn)用于web前端與后端管理之間，是前端與后端數(shù)據(jù)管理的一座重要橋梁，這座橋梁使前后端的數(shù)據(jù)可以得以安全地保存并且管理。它的特點(diǎn)是采用云管理服務(wù)，當(dāng)企業(yè)級(jí)的工作負(fù)荷十分龐大時(shí)，它可以對(duì)其進(jìn)行優(yōu)化設(shè)計(jì)，同時(shí)也具有高安全性，并且能給使用者更多的私有云優(yōu)勢(shì)。

CMS致力于提供用于構(gòu)造和更新網(wǎng)頁(yè)內(nèi)容的更加簡(jiǎn)約直觀的用戶界面，對(duì)于用戶而言更加方便易懂，能夠令網(wǎng)站管理員管理現(xiàn)代網(wǎng)站的許多不同資源。其中的后臺(tái)是內(nèi)容管理系統(tǒng)的一個(gè)分支內(nèi)容。內(nèi)容管理系統(tǒng)在最近這些年受到中小型企業(yè)的追捧，對(duì)于計(jì)算機(jī)行業(yè)來說也算是開辟了一個(gè)新的市場(chǎng)。CMS系統(tǒng)的突出之處是它可以把網(wǎng)站模版和網(wǎng)站程序分割開來，讓網(wǎng)站設(shè)計(jì)人員可以對(duì)每個(gè)頁(yè)面、模塊利用不同的模板進(jìn)行可視化管理，隨時(shí)都能進(jìn)行編輯和修改。內(nèi)容管理系統(tǒng)的使用是基于不用的用戶角色，每個(gè)用戶將被分配不同的權(quán)限，不同權(quán)限的用戶可以行使自己的權(quán)限對(duì)系統(tǒng)內(nèi)容進(jìn)行管理，這些管理人員的權(quán)限有以下幾種，例如：欄目管理人員、超級(jí)管理人員、文檔錄入人員、審核人員等，通過這樣的分配機(jī)制，網(wǎng)站在發(fā)布內(nèi)容的時(shí)候就不會(huì)出現(xiàn)信息泄露與安全問題，同時(shí)也能保證內(nèi)容的質(zhì)量。

2 需求分析

此系統(tǒng)以廣州華商學(xué)院為例，設(shè)計(jì)一個(gè)校園二手平臺(tái)交易小程序，通過該平臺(tái)，學(xué)生可以將自己的閑置物品上傳至該平臺(tái)進(jìn)行買賣，從而達(dá)到節(jié)約、減少浪費(fèi)與綠色環(huán)保的目的［2］。

本系統(tǒng)分為三大模塊，第一部分：后端提供接口和數(shù)據(jù)；第二部分：前臺(tái)提供給學(xué)生物品信息，供學(xué)生選擇自己需要的物品，提供上傳頁(yè)面將自己的閑置物品發(fā)布在平臺(tái)上，并在個(gè)人主頁(yè)內(nèi)查看物品買賣信息；第三部分：后臺(tái)管理系統(tǒng)，管理員登錄后臺(tái)對(duì)用戶信息、物品信息、買賣信息進(jìn)行查看與管理［3］。

該系統(tǒng)的用戶分為兩類：學(xué)生和管理員。這兩類用戶職責(zé)不同，對(duì)應(yīng)的權(quán)限也不同。學(xué)生的權(quán)限是上傳物品信息，購(gòu)買物品。管理員的權(quán)限是管理用戶，管理網(wǎng)站的配置，管理前端的布局，對(duì)物品信息進(jìn)行管理。

學(xué)生微信授權(quán)登錄后可在小程序內(nèi)進(jìn)行商品的查看，篩選不同種類的物品，購(gòu)買并且評(píng)價(jià)。

管理員登錄CMS后臺(tái)后，可以對(duì)所有商品的信息、用戶的信息，以及商品買賣的信息進(jìn)行增刪查改操作。

對(duì)用戶的管理，超級(jí)管理員登錄后臺(tái)后，會(huì)顯示該權(quán)限下的菜單列表，其中的用戶管理就是對(duì)用戶的信息進(jìn)行管理，查詢用戶和對(duì)用戶進(jìn)行增刪改查。

資源管理方面體現(xiàn)在管理員登錄后臺(tái)可以對(duì)用戶所發(fā)布的物品信息進(jìn)行管理，例如增刪改查，查看是否正常上傳至商品首頁(yè)，被買下的物品是否正常更新狀態(tài)等。在物品買賣信息方面對(duì)買賣信息進(jìn)行增刪改查的操作，加強(qiáng)用戶的使用體驗(yàn)，當(dāng)用戶發(fā)布商品后，請(qǐng)求將傳送至后端，后端將該信息傳入數(shù)據(jù)庫(kù)，完成一系列商品操作。

圖1 后端架構(gòu)圖

圖2 前端技術(shù)架構(gòu)圖

3 系統(tǒng)設(shè)計(jì)

系統(tǒng)的用戶為商城用戶和管理員，小程序基于云開發(fā)技術(shù)，用戶可直接授權(quán)登錄，用戶信息將直接納入云端數(shù)據(jù)庫(kù)，而管理員需要將管理員id添入名單內(nèi)方可進(jìn)行管理。

管理員后臺(tái)的功能模塊主要圍繞本商城的用戶、商品、交易、商家、評(píng)論進(jìn)行增刪改查等設(shè)計(jì)。

通過分析，本系統(tǒng)的E-R圖如下所示。

圖3 系統(tǒng)E-R圖

該系統(tǒng)設(shè)計(jì)的幾種邏輯表單如下。

表1 order（訂單表）

表2 huishou（回收商表）

表3 goods（商品表）

4 系統(tǒng)實(shí)現(xiàn)

管理員從微信開發(fā)者程序的云開發(fā)入口進(jìn)入由微信平臺(tái)提供的后端數(shù)據(jù)地址［4］，便可進(jìn)入到小程序后臺(tái)管理頁(yè)面，從圖4可以看到，這個(gè)小程序的后臺(tái)主要管理以下幾個(gè)功能模塊：二手回收商、訂單處理模塊、商品模塊、用戶評(píng)論模塊，以及小程序首頁(yè)的輪播圖模塊。在后臺(tái)頁(yè)面中，開發(fā)人員或管理員可以輕松地對(duì)各個(gè)模塊進(jìn)行增、刪、改、查處理，即在頁(yè)面右欄有編輯以及刪除功能。

圖4 管理員后臺(tái)頁(yè)面

本系統(tǒng)是由微信云開發(fā)以及CMS后臺(tái)管理來實(shí)現(xiàn)的［5］，管理員必須取得后臺(tái)管理的唯一地址才有權(quán)限進(jìn)入后臺(tái)，一般用戶無法在小程序前端直接取得后臺(tái)登陸的資格，這也是小程序安全性的提高。如圖4所示，開發(fā)者可以在小程序管理后臺(tái)添加開發(fā)者的個(gè)人信息與小程序發(fā)布信息。整個(gè)小程序部分運(yùn)行截圖如圖5、圖6所示。

圖5 校園淘小程序首頁(yè)

圖6 商品頁(yè)面

5 結(jié)語(yǔ)

本文運(yùn)用vue.js、JavaScript、Ajax前端技術(shù)、基于云開發(fā)作為后端服務(wù)，數(shù)據(jù)存儲(chǔ)使用CMS網(wǎng)頁(yè)后臺(tái)技術(shù)，設(shè)計(jì)并實(shí)現(xiàn)該校園淘小程序。與目前已有的相關(guān)小程序相比，大大縮短了小程序的開發(fā)時(shí)間，保證了小程序的可移植性和健壯性。后端數(shù)據(jù)使用CMS進(jìn)行維護(hù)，較好地解決了數(shù)據(jù)共享和協(xié)同工作的問題。