基于CMS的校園淘小程序的設計與實現

陳富強，黃燕惟

（廣州華商學院數據科學學院，廣州 510000）

0 引言

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

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

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

1 相關例論及關鍵技術

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

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

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

（1）利用CSS和XHTML進行網頁頁面或者靜態界面設計。

（2）運用Dom模型處理頁面的動態設計與用戶和界面的交互設計。

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

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

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

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

云開發平臺目前能夠為開發者提供的基礎技術支持包括以下三種：

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

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

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

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

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

2 需求分析

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

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

該系統的用戶分為兩類：學生和管理員。這兩類用戶職責不同，對應的權限也不同。學生的權限是上傳物品信息，購買物品。管理員的權限是管理用戶，管理網站的配置，管理前端的布局，對物品信息進行管理。

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

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

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

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

圖1 后端架構圖

圖2 前端技術架構圖

3 系統設計

系統的用戶為商城用戶和管理員，小程序基于云開發技術，用戶可直接授權登錄，用戶信息將直接納入云端數據庫，而管理員需要將管理員id添入名單內方可進行管理。

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

通過分析，本系統的E-R圖如下所示。

圖3 系統E-R圖

該系統設計的幾種邏輯表單如下。

表1 order（訂單表）

表2 huishou（回收商表）

表3 goods（商品表）

4 系統實現

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

圖4 管理員后臺頁面

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

圖5 校園淘小程序首頁

圖6 商品頁面

5 結語

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