基于CMS的校園淘小程序的設(shè)計與實現(xiàn)

陳富強，黃燕惟

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

0 引言

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

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

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

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

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

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

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

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

（2）運用Dom模型處理頁面的動態(tài)設(shè)計與用戶和界面的交互設(shè)計。

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

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

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

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

云開發(fā)平臺目前能夠為開發(fā)者提供的基礎(chǔ)技術(shù)支持包括以下三種：

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

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

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

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

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

2 需求分析

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

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

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

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

管理員登錄CMS后臺后，可以對所有商品的信息、用戶的信息，以及商品買賣的信息進行增刪查改操作。

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

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

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

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

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

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

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

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

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

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

表1 order（訂單表）

表2 huishou（回收商表）

表3 goods（商品表）

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

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

圖4 管理員后臺頁面

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

圖5 校園淘小程序首頁

圖6 商品頁面

5 結(jié)語

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