前言
用心经营的小店是钢筋混凝土的城市中少有的温情。比如说一家小猫咖，就是不少人的精神乌托邦：可爱的猫咪，志趣相投的消费者，绝对是一个打发闲暇时间的好去处。
但是感觉这两年，这种小店总是时刻面临着关门的危险。看着住处附近的猫咖店越来越萧条，本科毕设的思路诞生了：做一个给猫咖（撸猫馆）量身定做的点单消费及社交属性加持的系统。产品的初心是满足店铺商品管理、点单消费的基础功能的前提下，添加一些社交元素来增强消费者粘性。
涉及的技术：
后端：node.js（koa2）、mysql、koa-router作为端口路由、阿里云OSS存储静态文件、阿里云短信服务模块
管理后台：Vue、Element-Ui、VueX、Vue-router、axios
客户端：uni-app、vuex
系统业务分析
作为一个给撸猫馆（猫咖）使用的系统，我觉得最起码的商品管理、猫咪管理、店员管理、订单处理等功能要有。社交元素的话，我很快的想到了评论模块、聊天模块、还有一个社群聊天的模块，商品和猫咪的详情页里有评论模块，通过评论模块可以对其它用户发起聊天。但是只有这些的话又有点无聊了。
紧接着我又意识到，猫咖里最吸引消费者的不就是猫咪吗，为什么不将它们也作为一个社交功能的纽带呢？结合各大电商屡见不鲜的“消费送积分，积分换礼物”模式，我也设计了这么一个积分系统：消费者下单送积分 -> 积分用来给猫咪打榜刷礼物 -> 打榜获得粉丝勋章，勋章可兑现礼品。
这样一来，或许消费者们就有了两股动力再次来店里消费以求获得积分：一是给自己喜欢的猫咪打榜让它当店内榜首，二是兑换可爱的周边礼品。
围绕这个思路，我继续完善积分系统，除了消费得积分，邀请好友注册、每日签到打卡都能获得相对应的积分。积分礼物除了通用的礼物，也应该要有猫咪专属的粉丝礼物。
于是，管理后台端又多了积分配置、礼物管理、打榜礼物管理等等需求。理清楚了需求，那就开始造吧~
服务端（后端）
身为前端开发者，node.js 当然是我搭后端的首选。我用的是 koa2 框架，它足够简单、轻便。在学习之处，我主要是看 官方文档 和 阮一峰老师的博文 ，相信只要通读这两篇文章，就能够了解到 koa 的特性和使用方法。
数据库的话，我用的是最普遍的 Mysql，配合数据库管理工具 Navicat，设计表的时候所见即所得，十分方便。
服务端最后成品有很多接口，但其实每个接口基本上都是对数据库的删查增改。之后我会更新博文，用一两个简单的例子来聊聊如何用 koa2+msyql 搭建服务端。包括分享一些关于评论、私信、点单系统的我的解决方案。
静态文件（大多是图片），我用了阿里云的oss服务，使用便捷还收费低，而且访问速度特别快。
此外，我的这篇文章有提到我是如何完成客户端的短信验证登录/注册的，如果看兴趣的话可以看看。
管理后台
只要有一些可用的接口能对数据库产生改变（ 这里推荐用 Postman 将开发好接口都测一遍），就可以开始着手管理系统的搭建了。和大多人的管理后台一样，我这个也是基于Vue + element-ui 的，很容易就能做得精简好看。
//页面展示
此外，http请求用的是aioxs，页面的切换用了页面路由vue-router，部分数据的状态用了vueX。作为一个开发的小项目来说，最后成品设计的模块并不太少，有了这些工具项目的构架就变得清晰多了。
随着整个项目的推进，不断完善后完成的有这些功能：
- 首页展示（当天成交额、成交单量、签到用户数量）
- 即时订单处理
- 历史订单查看、搜索
- 店员管理（角色只分了店长和店员）
- 用户管理（修改用户积分、删除用户、对用户发起聊天）
- 用户建议查看
- 首页轮播图管理
- 积分配置设置（邀请、签到、消费-积分比）
- 粉丝勋章兑换清单（搜索匹配用户的兑换礼品、修改兑换状态）
- 猫咪打榜礼物管理（增、改、删）
- 粉丝勋章兑换礼品管理（增、改、删）
- 商品管理（增、改、删、今日首页推荐）
- 店铺猫咪管理（增、改、删）
- 评论管理（店员评论、店员回复、删除评论）
- 聊天列表（店员账号的聊天清单（包括群聊）、私聊及群聊界面）
- 管理员自身账号信息修改（更改密码、昵称）
... ...
客户移动端
Uni-app的优点在于一次开发、多端打包适配（本次开发以小程序适配端为主）。基于Vue.js的它，支持VueX等工具，也让开发起来比原生的小程序更灵活，同时用SCSS来写样式，结构更鲜明了，修改个颜色什么的也更简单了。这样的开发技术栈，很适合撸猫馆这样小型企业的开发需求，也能比较方便地根据不同撸猫馆间不同的特色需求进行修改。
UI界面嘛，基本上是我凭着经验乱来的，所以很多地方略显不足，只能说能看哈哈。部分组件我用了Uview，这是一个很不错的 Uni-app UI组件库。
最后实现的大概有这些功能：
- 未登录状态，对商品、猫咪、评论的浏览功能 ps: 饮品和面包的商品图均来自我爱喝爱吃的牌子，侵删
- 短信验证码登录功能 / 未登录过自动注册功能
3 下单功能（涉及到支付权限，这一块的代码先预留）
4 历史订单查阅（显示获得的积分，和再来一单功能）
5 签到功能
6 分享邀请，新用户注册成功就得积分
7 完整的积分体系：消费/签到/邀请得积分 -> 获得“猫粮”-> 打榜猫咪 -> 获得粉丝勋章 -> 兑换礼品 -> 生成二维码兑换礼品
8 评论功能、回复功能
9 讨论区发起私聊功能
10 群聊功能
11 未读信息提醒功能（微信小程序向用户发消息提醒需要权限，此处只实现即时的未读消息提示）
12 向店家提建议的功能
13 联系店家功能
14 更换头像、昵称功能
... ...
总结
这个作品，几乎都是实习期中挤出空闲时间做完的。即使它有很多不足，但我的确投入了蛮多精力。从功能设计到代码实现，可以说是体验了一把从产品经理到全栈开发了哈哈。这样的经历蛮好玩的，希望我在日后还能有现在这样纯粹的热情，像打磨作品一样去敲代码。
最后，如果你感兴趣或者觉得不错的话欢迎你在评论区和我多多交流。之后我会写更多关于我在这次开发中的心得，也会将代码放出来和大家一起交流学习~
