基于vue.js的共享空间平台的设计

吕品田

（北京交通大学 软件学院，北京　100044）

1　共享空间平台的意义

进入二十一世纪以后，互联网的发展可谓是突飞猛进。随着“互联网+”时代的来临，越来越多的传统行业选择融入到互联网这个大体系之中。与此同时，越来越多的人口使得有价值的空间变的越来越少，需要空间进行活动的人往往不能找到符合自己心目中价位的“地盘”，而很多公有空间却因为时间或地段而不能得到充分利用，甚至出于闲置状态。这时，“共享空间”的理念就应运而生。共享空间的产生是为了适应各种频繁的社会交往和丰富多彩的生活需要，它往往处于大型公共建筑内的公共活动中心和交通枢纽，含有多种多样的空间要素和设施，使人们无论在物质方面还是精神方面都有挑选余地，是综合性、多功能的灵活空间。

波特曼首创的共享空间，在各国享有盛誉，它以其罕见的规模和内容，丰富多姿的环境，独出心裁的手法，将多层内院打扮得光怪陆离、五彩缤纷。[1]从空间处理上讲，共享大厅可以说是一个具有运用多种空间处理手法的综合体系。但某些大厅却缺乏应有的活力，很大程度上是由于空间处理上不够生动，没有恰当地融汇各种空间形态。变则动，不变则静，单一的空间类型往往是静止跑感觉，多样变化的空间形态就会形成动感。[2]

其实共享空间的雏形就是传统的日租房，但是共享空间则是以日租房为基础打造的多维一体化空间。不仅仅是提供住宿，还可以提供各式活动的举办。小到朋友聚会，一起畅聊，大到国家级的访问仪式，都可以在空间内举办，这正是共享空间的魅力所在。而共享空间平台项目，正是以共享空间为传统行业的基础，结合互联网的链式推广效应，使得共享的内容更丰富。咖啡厅、茶馆、日租房、会议室，都是可共享的空间，有了互联网，才可以使得共享变得更方便，更容易，更值得彼此信任。

2　项目设计理念及存在的问题

任何一个成功的平台，庞大的用户群体是必不可少的，想要宣传一款新型平台，除了朋友间的推广外，最重要的是要有竞争优势。在项目的设计中，如何吸引更多用户是重要的理念，我们采用了赠送咖啡的形式拉取新用户，一个用户，只要用自己的手机号登录注册，就可以领取一杯免费的咖啡。平台同时也会举办各种活动，只要可以带入新用户，老用户也可以获得咖啡券的奖励。

这种模式可以让用户获得良好的平台体验，可以让大部分用户对平台获得良好的第一印象。在传统行业中，一杯咖啡的成本大概在3-5元左右，平台吸引用户的手段之一就是先让用户获得利益，从而可以获取用户流量和数据，给平台带来发展，看似平台有所亏损，实际上信息和关系链对于平台的收益远大于一杯咖啡的成本。平台赠与方式如与传统行业（卖咖啡）进行竞争也有其实体体验不足的问题，因此我们选择与传统行业进行合作，用关系网带来盈利。

该项目的设计目前还存在一部分问题。有两个问题比较突出，第一个问题是会员卡功能并不常用化。简单来说，由于场地的局限性（一个城市的场地数目十分有限，且分散），用户很难挑选自己就近的场所进行活动的参与或者举办，因此目前的会员卡适用范围仅有个体用户的少量次数的参与。第二个问题是活动场地的规格不亲民，目前平台仅提供部分大型活动场地，价格较为昂贵，仅面对大型团体。而仅仅在平台购买咖啡又过于昂贵，并不为大众所接受。

3　项目设计流程

3.1　使用到的核心技术

在互联网+共享空间的推广当中，前端的美化设计是重中之重，一个好的项目，它的前端既不能冗余，也不能太过简单。既要保证用户的使用体验，又需要将自己最好的一面展示出来，因此，vue.js这款轻型脚本可以说是再适合不过了。Vue是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。Vue.js有以下特点，第一个是整体较为简洁，只需要一个html模板和jason数据以及一个vue实例就可以搭建一个网站。二则是数据驱动，vue可以自动追踪模板和数据块表达。还有就是组件之间耦合性非常低，便于将组件分模块进行构筑。此外它既轻量、又快速，可以实时更新DOM的状态。最后则是安装便利，vue.js可以直接用命令行进行安装，直接安装到项目中，无缝衔接自己的项目。vue.js和传统的reactjs相比，更轻巧，API 更友好，不强迫你所有的代码都遵循 Angular 的各种规定，使用场景更加灵活。与此同时，vue.js更容易上手，只需要掌握基本的js/html/css的技巧就可以很容易上手vue.js。对于共享空间这种需要即时反馈前端信息的平台来说，vue.js可以说是最佳选择。平台使用了MVVM的框架思想，MVVM是将“数据模型数据双向绑定”的思想作为核心，因此在View和Model之间没有联系，通过ViewModel进行交互，而且Model和ViewModel之间的交互是双向的，因此视图的数据的变化会同时修改数据源，而数据源数据的变化也会立即反应到View上。[3]

3.2　前台设计流程

对于共享空间来说，最重要的就是宣传空间界面。因此我们将宣传空间的界面放到平台的首页。首页由四个板块构成，分别是推荐版块、空间板块、活动板块和会员板块。推荐版块将最新、最实时的共享空间数据和活动推送给用户。空间板块则全部是由用户发布的可共享空间构成，活动板块则由公司举办的各种活动构成，用户可以随意报名自己想要参加的活动。最后则是会员版块，是一个盈利板块，用户可以购买机遇空间专属的会员来获得会员特权，每一种会员卡的标价都是物超所值，可以放心购买。

其次是社区界面，这款共享空间平台不仅仅是一个外租空间平台，还实现了社交功能。因此我们添加了“机遇星球”功能，这功能和微博推送类似。通过平台认证的用户就可以发送自己的动态到机遇星球中，供其他用户观看，同时还可以在机遇星球中开展自己的活动。与此同时，还添加了群组功能，用户可以自己将志同道合的群体拉入到自己的群组之中，方便开展活动。

之后是用户界面，用户界面有一个特别的功能就是“我的咖啡劵”，平台为了推广，采用赠送咖啡劵的形式发展用户，每个新用户都可以获得一杯咖啡券。同时用户之间也可以互相赠送咖啡券，凭借咖啡券可以去指定地点兑换一杯咖啡。此外，用户界面还有充值、编辑个人信息等常用功能，这里不再阐述。

4　项目未来的走向

该平台为共享空间平台，而平台未来的走向将不局限于几处共享空间。平台未来将会考虑和更多传统咖啡厅等行业进行合作。实现随处共享、处处共享、时时共享。未来计划将平台扩展到身边的每个地方，只要成为平台的用户，就可以租用在身边绝大多数公共场所进行活动，在进行活动的同时，也可以参与平台的活动，推广平台，获取奖励。此外，甚至可以使用平台货币进行消费，试想在未来的某一天，可以使用平台进行用餐支付、旅店支付，是本平台的终极目标。

[1]杰里米·里夫金.走向物联网和共享经济[J].企业研究，2015.2.

[2]篠原聪子，王也，许懋彦.共享住宅——摆脱孤立的居住方式[J].城市建筑，2016第4期.

[3]麦冬，陈涛，梁宗湾.轻量级响应式框架Vue.js应用分析.信息与电脑（理论版），2017年4月.