鸣谢美工给设计的LOGO
前言
怕过不了审，先声明一下，这不是广告，因为这个小程序没上架。
从5年前入行的时候就一直想做一个社交产品，最近工作略闲，加之小程序火爆，下班后时间多，于是就花费了一个月业余时间，动手做了一个基于地理位置的信息社交类小应用，由于个人资质无法上线此类的小程序，开发过程仅为锻炼思维和技术，特此分享给大家。编码技术略菜，望各位大神莫笑话。
全栈说明
因为开始是奔着想上线去的，所有要做的事情很多，而不仅仅是前端+后端这样的全栈。大体整体过程如下：
1.产品部分：最开始在脑子里设想应用的用途和使用流程及页面的交互
2.美工部分：开发过程中部分需用用到的图片资源（中途有请过美工同事帮忙）
3.前端部分：包括小程序端和后台管理系统
4.后端部分：后端程序与数据库
5.运维部分：域名备案、ssl证书配置、Nginx均衡负载等服务器部署过程
6.测试部分：全程功能自测、接口压力测试
技术栈
小程序（wepy）+后台管理系统（vue+iview）+后端程序（node+express）+数据库（MongoDB）
产品
产品命名：地图气球 （原谅我没文学水平....）
功能简介：基于地图地理位置的文字+多媒体信息社交，有点类似发空间说说或者微博，用户可以发送文字或图片或语音或视频等信息，该条信息将生成一个气球，在发布地点所在的地图位置上显示。其他用户可以挪动全国地图，捡取自己想要查看的气球，打开后查看内容。
功能盘点：（草图不完整，我就直接展示成品后的截图吧）
1.首页：一个全屏的地图界面，地图上飘着当前区域范围内的气球，点击即可进入详情页查看内容
地图气球-首页
2.详情：气球的内容，包含评论及其他如地理地址、浏览量、点赞、手机型号等零碎信息
地图气球-详情页
地图气球-详情页
3.发布：一个文字与多媒体的信息发布页面
地图气球-发布气球
4.个人中心：整个应用功能点的集合
地图气球-个人中心
5.我的主页（抄袭朋友圈）
地图气球-我的主页
6.附近用户（公司同事马赛克伺候）
地图气球-附近用户
7.意见反馈
意见反馈.png
剩余几个什么我的气球，我的回复，我关注的，我的粉丝，篇幅问题就不再一一展示了，基本都是列表页。
开发
项目目录
项目目录
小程序
小程序端采用了wepy框架来开发，毕竟用习惯了vue，喜欢vue的代码组织方式，另外就是喜欢用sass写样式。
npm install wepy-cli -g //安装wepy
wepy init standard mapballoon //创建小程序项目
一个wpy文件代表一个页面，虽然也可以用组件化，但是感觉页面都比较简单，而且wepy的组件模式还有点小问题，有时候不会热重载组件新内容。
小程序目录
小程序的开发过程没什么复杂度，基本都是画页面，取数据和发数据，挑几个小点讲一下。
唯一有点坑的就是，在小程序中，地图、视频等很多特殊组件都是由原生渲染的，处于视图最顶层，只支持cover-view作为覆盖元素，这样一来，可自由发挥的程度大大降低。
1.语音功能
录音.png
录音2
2.多媒体文件的上传
这个当然选第三方的文件云存储服务器啦，既节省服务器资源，又加速了文件的传输。这里我选择七牛云存储。
七牛sdk
图中的uptoken是由后端根据七牛账号的accessKey和secretKey生产的一串验证token，后端生成方法如下：
七牛token生成
整体上传思路为：小程序中选中文件----上传至七牛----七牛返回文件地址----将地址提交给后端数据库
2.图片鉴黄
作为遵纪守法的好猿，图片是不允许用户乱发的（如果实在没地方发请发我邮箱_）。恰好七牛也提供了鉴黄功能，使用起来非常简单：将上传到七牛后的图片地址url加上参数get请求即可，例如图片url是http://abc.jpg，则get请求http://abc.jpg?qpulp就可以得到返回结果如下：
七牛鉴黄测试
其中label字段返回值：0涉黄 1性感 2正常 然后根据自己的业务需求进行拦截
后端接口涉黄拦截
后台管理系统
使用前后端分离方式开发，基于vue+iview-admin，直接clone了iview-admin的项目，在此基础上去修改和去除。
*iview-admin
*iview
后台管理页面基本都是简单的增删改查，由于篇幅原因，这里无法一一赘述，挑几个地方讲吧：
1.axios的简单封装
axios封装
页面与后端交互需要使用到token，把token存在sessionStorage中，每次请求之前放在头部，后端从头部取出token做验证。
有个小需求：axios发送请求是有then和catch两个回调，假设我们在点击提交按钮时，需要进入loading状态，然后再请求结束（无论结果如何）时关闭loading状态，我们需要分别在then和catch中写loading=false。推荐一个插件：promise.prototype.finally。安装之后，在axios实例化之前调用如下：
var promiseFinally = require('promise.prototype.finally');
promiseFinally.shim();
然后axios的请求回调就变成了三个：then、catch、finally，当我们有上述需求时，直接写在finally里面。
2.单页应用中首次打开的白屏优化
loading.gif
3.后台部分页面展示
后台管理首页
后台管理气球列表
后台管理气球详情
后台管理用户列表
后台管理添加虚拟气球
后端node
毕竟前端出身，后端程序选用node+express（对koa不熟，- -！ ）。
后端程序目录
后端基本全是增删改查，同样无法一一赘述，挑几个点说一说：
1.后端代码组织方式
model数据模型
控制器中引入模型进行增删改查和其他操作
控制器根据模型操作具体逻辑
路由把请求导向到对应的控制器
路由导向控制器.png
将路由注入到app.js
注入路由.png
2.jwt通信
想了解jwt的点击这里，我选用的是express-jwt，直接npm安装引入后，代码如下：
app.js中的token部分.png
从截图中第一段代码，顺便说一下跨域问题，这里使用的是cors跨域，想简单了解cors可以百度或者看我的另一篇文章
3.基于地理位置的数据查询
MongoDB自带$near操作符可以直接基于经纬度查询，并且自动根据距离排序。这个功能用于做附近的用户非常方便。
MongoDB地理位置查询.png
用户表中记录了用户登录的经纬度，查询时coordinates字段赋值了某个用户的当前经纬度，即可查出以这个用户为中心方圆x米内的数据，省去了自己写程序计算的过程。
MongoDB数据库
下载安装，我这里选择的是window x64版本，安装好之后用命令行输入mongod检查是否已安装成功并且加入系统变量，如果提示没有“不是内部或外部命令”，则手动把mongodb安装目录下的bin目录添加到系统变量path中。
mongod --logpath "D:\MongoDB\data\log\logs.txt" --logappend --dbpath "D:\MongoDB\data\db" --directoryperdb --serviceName "MongoDB" --serviceDisplayName "MongoDB" --install
在命令行中输入以上命令（注意修改日志路径和数据存储路径），即可把mongdb添加到window系统服务来启动。以上命令追加 --auth开启密码验证模式，有兴趣的自己百度一下。在开发调试过程中，建议使用可视化的mongdb管理工具，我这里使用的是Mongo Management Studio,如下图：
数据库可视化工具
服务器相关的部署过程
服务器
买的阿里云ECS穷逼版的配置，我选了Windows Server 2008 R2 企业版 64位中文版（CentOS不会玩），直接远程桌面连接进入服务器，安装node和mongodb，为了方便部署项目我还装了git。由本地机器开发完成后提交代码到码云，再由服务器pull最新代码来运行。
域名和ssl证书
因为小程序要求使用https协议的接口，所以域名必须备案，必须配置ssl证书。
在阿里云买了一个域名，同时购买一个免费的ssl证书，然后域名经过十来天的备案，将域名解析至服务器。准备就绪，等待Nginx安装。
Nginx与负载均衡
根据网上教程下载和安装window版的Nginx，安装后目录如下：
Nginx目录.png
绿色的Nginx应用程序双击就可以开启Nginx，但在此之前得先去配置一下，用文本编辑器打开conf/nginx.conf
先配置ssl证书：
1.从阿里云控制台下载已申请通过的证书Nginx安装包，在Nginx安装目录下新建（如果没有）名为“cert”的文件夹，把证书文件放进去。
2.在conf/nginx.conf配置文件中，配置443端口的监听：
server {
listen 443;
server_name localhost;
ssl on;
root html;
index index.html index.htm;
ssl_certificate cert/证书.pem;
ssl_certificate_key cert/证书.key;
ssl_session_timeout 5m;
ssl_ciphers ECDHE-RSA-AES128-GCM- SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aNULL:!MD5:!ADH:!RC4;
ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
ssl_prefer_server_ciphers on;
location / {
root html;
index index.html index.htm;
}
}
注意上面代码中“证书”两字需对应下载时的证书文件名，这里我只是随便命名。
https访问
既然安装了Nginx，均衡负载总得体验一下吧，在conf/nginx.conf中简单的配置一下：
负载均衡.png
如图示，建立一个upstream方案，每一个server代表一个主机地址，然后将80端口的访问通过proxy_pass反向代理到upstream方案，随机分配给其中的主机。通俗来讲也就是，以前一台服务器干活，现在三台服务器干活。
pm2进程守护
pm2是非常优秀工具,它提供对基于node.js的项目运行托管服务。
npm install pm2 -g
pm2 start app.js --name mapballoon //mapballoon为PM2进程名称
pm2进程守护
可以看到，我启动了两个进程，一个用于开发环境。
测试
自己手动测试了每一个页面的功能，大概花了个把星期反复修改BUG，过程就不都说了。
总结
1.累，真的累，全程自己一个人，差不多一个月的业余时间，感觉头发都保不住了。
2.充实，边做边学很多经验，比如一些第三方的sdk和服务（七牛，腾讯地图，地理距离计算等等）。
3.现在个人想做点什么东西不容易，资质不够。
篇幅问题，文中没有提到太多技术点，望见谅。
视频演示
点击播放视频
由于没有资质不能上线，但如果你们谁感兴趣的想体验的可以留言或给我发邮件(826327700@qq.com)，我把你拉入体验版，只有15个名额哦。
网友评论