基于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进行维护，较好地解决了数据共享和协同工作的问题。