基于vue.js的共享空間平臺(tái)的設(shè)計(jì)

呂品田

（北京交通大學(xué) 軟件學(xué)院，北京　100044）

1　共享空間平臺(tái)的意義

進(jìn)入二十一世紀(jì)以后，互聯(lián)網(wǎng)的發(fā)展可謂是突飛猛進(jìn)。隨著“互聯(lián)網(wǎng)+”時(shí)代的來(lái)臨，越來(lái)越多的傳統(tǒng)行業(yè)選擇融入到互聯(lián)網(wǎng)這個(gè)大體系之中。與此同時(shí)，越來(lái)越多的人口使得有價(jià)值的空間變的越來(lái)越少，需要空間進(jìn)行活動(dòng)的人往往不能找到符合自己心目中價(jià)位的“地盤”，而很多公有空間卻因?yàn)闀r(shí)間或地段而不能得到充分利用，甚至出于閑置狀態(tài)。這時(shí)，“共享空間”的理念就應(yīng)運(yùn)而生。共享空間的產(chǎn)生是為了適應(yīng)各種頻繁的社會(huì)交往和豐富多彩的生活需要，它往往處于大型公共建筑內(nèi)的公共活動(dòng)中心和交通樞紐，含有多種多樣的空間要素和設(shè)施，使人們無(wú)論在物質(zhì)方面還是精神方面都有挑選余地，是綜合性、多功能的靈活空間。

波特曼首創(chuàng)的共享空間，在各國(guó)享有盛譽(yù)，它以其罕見(jiàn)的規(guī)模和內(nèi)容，豐富多姿的環(huán)境，獨(dú)出心裁的手法，將多層內(nèi)院打扮得光怪陸離、五彩繽紛。[1]從空間處理上講，共享大廳可以說(shuō)是一個(gè)具有運(yùn)用多種空間處理手法的綜合體系。但某些大廳卻缺乏應(yīng)有的活力，很大程度上是由于空間處理上不夠生動(dòng)，沒(méi)有恰當(dāng)?shù)厝趨R各種空間形態(tài)。變則動(dòng)，不變則靜，單一的空間類型往往是靜止跑感覺(jué)，多樣變化的空間形態(tài)就會(huì)形成動(dòng)感。[2]

其實(shí)共享空間的雛形就是傳統(tǒng)的日租房，但是共享空間則是以日租房為基礎(chǔ)打造的多維一體化空間。不僅僅是提供住宿，還可以提供各式活動(dòng)的舉辦。小到朋友聚會(huì)，一起暢聊，大到國(guó)家級(jí)的訪問(wèn)儀式，都可以在空間內(nèi)舉辦，這正是共享空間的魅力所在。而共享空間平臺(tái)項(xiàng)目，正是以共享空間為傳統(tǒng)行業(yè)的基礎(chǔ)，結(jié)合互聯(lián)網(wǎng)的鏈?zhǔn)酵茝V效應(yīng)，使得共享的內(nèi)容更豐富?？Х葟d、茶館、日租房、會(huì)議室，都是可共享的空間，有了互聯(lián)網(wǎng)，才可以使得共享變得更方便，更容易，更值得彼此信任。

2　項(xiàng)目設(shè)計(jì)理念及存在的問(wèn)題

任何一個(gè)成功的平臺(tái)，龐大的用戶群體是必不可少的，想要宣傳一款新型平臺(tái)，除了朋友間的推廣外，最重要的是要有競(jìng)爭(zhēng)優(yōu)勢(shì)。在項(xiàng)目的設(shè)計(jì)中，如何吸引更多用戶是重要的理念，我們采用了贈(zèng)送咖啡的形式拉取新用戶，一個(gè)用戶，只要用自己的手機(jī)號(hào)登錄注冊(cè)，就可以領(lǐng)取一杯免費(fèi)的咖啡。平臺(tái)同時(shí)也會(huì)舉辦各種活動(dòng)，只要可以帶入新用戶，老用戶也可以獲得咖啡券的獎(jiǎng)勵(lì)。

這種模式可以讓用戶獲得良好的平臺(tái)體驗(yàn)，可以讓大部分用戶對(duì)平臺(tái)獲得良好的第一印象。在傳統(tǒng)行業(yè)中，一杯咖啡的成本大概在3-5元左右，平臺(tái)吸引用戶的手段之一就是先讓用戶獲得利益，從而可以獲取用戶流量和數(shù)據(jù)，給平臺(tái)帶來(lái)發(fā)展，看似平臺(tái)有所虧損，實(shí)際上信息和關(guān)系鏈對(duì)于平臺(tái)的收益遠(yuǎn)大于一杯咖啡的成本。平臺(tái)贈(zèng)與方式如與傳統(tǒng)行業(yè)（賣咖啡）進(jìn)行競(jìng)爭(zhēng)也有其實(shí)體體驗(yàn)不足的問(wèn)題，因此我們選擇與傳統(tǒng)行業(yè)進(jìn)行合作，用關(guān)系網(wǎng)帶來(lái)盈利。

該項(xiàng)目的設(shè)計(jì)目前還存在一部分問(wèn)題。有兩個(gè)問(wèn)題比較突出，第一個(gè)問(wèn)題是會(huì)員卡功能并不常用化。簡(jiǎn)單來(lái)說(shuō)，由于場(chǎng)地的局限性（一個(gè)城市的場(chǎng)地?cái)?shù)目十分有限，且分散），用戶很難挑選自己就近的場(chǎng)所進(jìn)行活動(dòng)的參與或者舉辦，因此目前的會(huì)員卡適用范圍僅有個(gè)體用戶的少量次數(shù)的參與。第二個(gè)問(wèn)題是活動(dòng)場(chǎng)地的規(guī)格不親民，目前平臺(tái)僅提供部分大型活動(dòng)場(chǎng)地，價(jià)格較為昂貴，僅面對(duì)大型團(tuán)體。而僅僅在平臺(tái)購(gòu)買咖啡又過(guò)于昂貴，并不為大眾所接受。

3　項(xiàng)目設(shè)計(jì)流程

3.1　使用到的核心技術(shù)

在互聯(lián)網(wǎng)+共享空間的推廣當(dāng)中，前端的美化設(shè)計(jì)是重中之重，一個(gè)好的項(xiàng)目，它的前端既不能冗余，也不能太過(guò)簡(jiǎn)單。既要保證用戶的使用體驗(yàn)，又需要將自己最好的一面展示出來(lái)，因此，vue.js這款輕型腳本可以說(shuō)是再適合不過(guò)了。Vue是一套用于構(gòu)建用戶界面的漸進(jìn)式框架。與其它大型框架不同的是，Vue 被設(shè)計(jì)為可以自底向上逐層應(yīng)用。Vue的核心庫(kù)只關(guān)注視圖層，不僅易于上手，還便于與第三方庫(kù)或既有項(xiàng)目整合。另一方面，當(dāng)與現(xiàn)代化的工具鏈以及各種支持類庫(kù)結(jié)合使用時(shí)，Vue 也完全能夠?yàn)閺?fù)雜的單頁(yè)應(yīng)用提供驅(qū)動(dòng)。Vue.js有以下特點(diǎn)，第一個(gè)是整體較為簡(jiǎn)潔，只需要一個(gè)html模板和jason數(shù)據(jù)以及一個(gè)vue實(shí)例就可以搭建一個(gè)網(wǎng)站。二則是數(shù)據(jù)驅(qū)動(dòng)，vue可以自動(dòng)追蹤模板和數(shù)據(jù)塊表達(dá)。還有就是組件之間耦合性非常低，便于將組件分模塊進(jìn)行構(gòu)筑。此外它既輕量、又快速，可以實(shí)時(shí)更新DOM的狀態(tài)。最后則是安裝便利，vue.js可以直接用命令行進(jìn)行安裝，直接安裝到項(xiàng)目中，無(wú)縫銜接自己的項(xiàng)目。vue.js和傳統(tǒng)的reactjs相比，更輕巧，API 更友好，不強(qiáng)迫你所有的代碼都遵循 Angular 的各種規(guī)定，使用場(chǎng)景更加靈活。與此同時(shí)，vue.js更容易上手，只需要掌握基本的js/html/css的技巧就可以很容易上手vue.js。對(duì)于共享空間這種需要即時(shí)反饋前端信息的平臺(tái)來(lái)說(shuō)，vue.js可以說(shuō)是最佳選擇。平臺(tái)使用了MVVM的框架思想，MVVM是將“數(shù)據(jù)模型數(shù)據(jù)雙向綁定”的思想作為核心，因此在View和Model之間沒(méi)有聯(lián)系，通過(guò)ViewModel進(jìn)行交互，而且Model和ViewModel之間的交互是雙向的，因此視圖的數(shù)據(jù)的變化會(huì)同時(shí)修改數(shù)據(jù)源，而數(shù)據(jù)源數(shù)據(jù)的變化也會(huì)立即反應(yīng)到View上。[3]

3.2　前臺(tái)設(shè)計(jì)流程

對(duì)于共享空間來(lái)說(shuō)，最重要的就是宣傳空間界面。因此我們將宣傳空間的界面放到平臺(tái)的首頁(yè)。首頁(yè)由四個(gè)板塊構(gòu)成，分別是推薦版塊、空間板塊、活動(dòng)板塊和會(huì)員板塊。推薦版塊將最新、最實(shí)時(shí)的共享空間數(shù)據(jù)和活動(dòng)推送給用戶?？臻g板塊則全部是由用戶發(fā)布的可共享空間構(gòu)成，活動(dòng)板塊則由公司舉辦的各種活動(dòng)構(gòu)成，用戶可以隨意報(bào)名自己想要參加的活動(dòng)。最后則是會(huì)員版塊，是一個(gè)盈利板塊，用戶可以購(gòu)買機(jī)遇空間專屬的會(huì)員來(lái)獲得會(huì)員特權(quán)，每一種會(huì)員卡的標(biāo)價(jià)都是物超所值，可以放心購(gòu)買。

其次是社區(qū)界面，這款共享空間平臺(tái)不僅僅是一個(gè)外租空間平臺(tái)，還實(shí)現(xiàn)了社交功能。因此我們添加了“機(jī)遇星球”功能，這功能和微博推送類似。通過(guò)平臺(tái)認(rèn)證的用戶就可以發(fā)送自己的動(dòng)態(tài)到機(jī)遇星球中，供其他用戶觀看，同時(shí)還可以在機(jī)遇星球中開(kāi)展自己的活動(dòng)。與此同時(shí)，還添加了群組功能，用戶可以自己將志同道合的群體拉入到自己的群組之中，方便開(kāi)展活動(dòng)。

之后是用戶界面，用戶界面有一個(gè)特別的功能就是“我的咖啡劵”，平臺(tái)為了推廣，采用贈(zèng)送咖啡劵的形式發(fā)展用戶，每個(gè)新用戶都可以獲得一杯咖啡券。同時(shí)用戶之間也可以互相贈(zèng)送咖啡券，憑借咖啡券可以去指定地點(diǎn)兌換一杯咖啡。此外，用戶界面還有充值、編輯個(gè)人信息等常用功能，這里不再闡述。

4　項(xiàng)目未來(lái)的走向

該平臺(tái)為共享空間平臺(tái)，而平臺(tái)未來(lái)的走向?qū)⒉痪窒抻趲滋幑蚕砜臻g。平臺(tái)未來(lái)將會(huì)考慮和更多傳統(tǒng)咖啡廳等行業(yè)進(jìn)行合作。實(shí)現(xiàn)隨處共享、處處共享、時(shí)時(shí)共享。未來(lái)計(jì)劃將平臺(tái)擴(kuò)展到身邊的每個(gè)地方，只要成為平臺(tái)的用戶，就可以租用在身邊絕大多數(shù)公共場(chǎng)所進(jìn)行活動(dòng)，在進(jìn)行活動(dòng)的同時(shí)，也可以參與平臺(tái)的活動(dòng)，推廣平臺(tái)，獲取獎(jiǎng)勵(lì)。此外，甚至可以使用平臺(tái)貨幣進(jìn)行消費(fèi)，試想在未來(lái)的某一天，可以使用平臺(tái)進(jìn)行用餐支付、旅店支付，是本平臺(tái)的終極目標(biāo)。

[1]杰里米·里夫金.走向物聯(lián)網(wǎng)和共享經(jīng)濟(jì)[J].企業(yè)研究，2015.2.

[2]篠原聰子，王也，許懋彥.共享住宅——擺脫孤立的居住方式[J].城市建筑，2016第4期.

[3]麥冬，陳濤，梁宗灣.輕量級(jí)響應(yīng)式框架Vue.js應(yīng)用分析.信息與電腦（理論版），2017年4月.