《地图气球》小程序从产品到运维的我的全栈开发过程分享（长文）

前言

怕过不了审，先声明一下，这不是广告，由于这个小程序没上架。

从5年前入行的时候就一直想作一个社交产品，最近工做略闲，加之小程序火爆，下班后时间多，因而就花费了一个月业余时间，动手作了一个基于地理位置的信息社交类小应用，因为我的资质没法上线此类的小程序，开发过程仅为锻炼思惟和技术，特此分享给你们。编码技术略菜，望各位大神莫笑话。

全栈说明

由于开始是奔着想上线去的，全部要作的事情不少，而不只仅是前端+后端这样的全栈。大致总体过程以下：

1.产品部分： 最开始在脑子里设想应用的用途和使用流程及页面的交互

2.美工部分： 开发过程当中部分需用用到的图片资源（中途有请过美工同事帮忙）

3.前端部分： 包括小程序端和后台管理系统

4.后端部分： 后端程序与数据库

5.运维部分： 域名备案、ssl证书配置、Nginx均衡负载等服务器部署过程

6.测试部分： 全程功能自测、接口压力测试

技术栈

小程序（wepy）+后台管理系统（vue+iview）+后端程序（node+express）+数据库（MongoDB）

产品

产品命名： 地图气球 （原谅我没文学水平....）

功能简介： 基于地图地理位置的文字+多媒体信息社交，有点相似发空间说说或者微博，用户能够发送文字或图片或语音或视频等信息，该条信息将生成一个气球，在发布地点所在的地图位置上显示。其余用户能够挪动全国地图，捡取本身想要查看的气球，打开后查看内容。

功能盘点：（草图不完整，我就直接展现成品后的截图吧）

1.首页：一个全屏的地图界面，地图上飘着当前区域范围内的气球，点击便可进入详情页查看内容

2.详情：气球的内容，包含评论及其余如地理地址、浏览量、点赞、手机型号等零碎信息

3.发布：一个文字与多媒体的信息发布页面

4.我的中心：整个应用功能点的集合

5.个人主页（抄袭朋友圈）

6.附近用户（公司同事马赛克伺候）

7.意见反馈

剩余几个什么个人气球，个人回复，我关注的，个人粉丝，篇幅问题就再也不一一展现了，基本都是列表页。

开发

项目目录

小程序 小程序端采用了 wepy框架来开发，毕竟用习惯了vue，喜欢vue的代码组织方式，另外就是喜欢用sass写样式。

npm install wepy-cli -g //安装wepy wepy init standard mapballoon //建立小程序项目

一个wpy文件表明一个页面，虽然也能够用组件化，可是感受页面都比较简单，并且wepy的组件模式还有点小问题，有时候不会热重载组件新内容。

小程序的开发过程没什么复杂度，基本都是画页面，取数据和发数据，挑几个小点讲一下。 惟一有点坑的就是，在小程序中，地图、视频等不少特殊组件都是由原生渲染的，处于视图最顶层，只支持cover-view做为覆盖元素，这样一来，可自由发挥的程度大大下降。

1.语音功能

语音稍微比图片和视频复杂一些，图片和视频只要一个picker就搞定了。利用wx.getRecorderManager()和wx.createInnerAudioContext()本身写录音过程和播放过程。其思路是：调用wx.getRecorderManager()的start方法即开始录音，在wx.getRecorderManager()的onStop回调中获得录音的文件地址，把文件地址交给wx.createInnerAudioContext()去播放，整个过程搭配本身写的UI进行可视化操做。

2.多媒体文件的上传

这个固然选第三方的文件云存储服务器啦，既节省服务器资源，又加速了文件的传输。这里我选择七牛云存储。 下载七牛的小程序版sdk，直接就是一个js文件，而后本身写一个方法上传方法。

图中的uptoken是由后端根据七牛帐号的accessKey和secretKey生产的一串验证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的简单封装

页面与后端交互须要使用到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.单页应用中首次打开的白屏优化
单页应用首次打开须要加载相对较大的js包体和其余资源，会有一段时间白屏。我在index.html中添加了loading动画，而后在vue的main.js中window.onload时移除这个动画遮罩。

3.后台部分页面展现

后端node

毕竟前端出身，后端程序选用node+express（对koa不熟，- -！ ）。

后端基本全是增删改查，一样没法一一赘述，挑几个点说一说：

1.后端代码组织方式

从数据模型开始：先设定好数据表，每一个根据数据表写数据模型文件，这里对应mongoose的schema。

控制器中引入模型进行增删改查和其余操做

路由把请求导向到对应的控制器

将路由注入到app.js

2.jwt通讯

想了解jwt的点击这里，我选用的是express-jwt，直接npm安装引入后，代码以下：

从截图中第一段代码，顺便说一下跨域问题，这里使用的是cors跨域，想简单了解cors能够百度或者看 个人另外一篇文章

3.基于地理位置的数据查询

MongoDB自带$near操做符能够直接基于经纬度查询，而且自动根据距离排序。这个功能用于作附近的用户很是方便。

用户表中记录了用户登陆的经纬度，查询时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应用程序双击就能够开启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中简单的配置一下：

如图示，创建一个upstream方案，每个server表明一个主机地址，而后将80端口的访问经过proxy_pass反向代理到upstream方案，随机分配给其中的主机。通俗来说也就是，之前一台服务器干活，如今三台服务器干活。

pm2进程守护

pm2是很是优秀工具,它提供对基于node.js的项目运行托管服务。

npm install pm2 -g
pm2 start app.js --name mapballoon //mapballoon为PM2进程名称

能够看到，我启动了两个进程，一个用于开发环境。

测试

本身手动测试了每个页面的功能，大概花了个把星期反复修改BUG，过程就不都说了。

总结

1.累，真的累，全程本身一我的，差很少一个月的业余时间，感受头发都保不住了。
2.充实，边作边学不少经验，好比一些第三方的sdk和服务（七牛，腾讯地图，地理距离计算等等）。
3.如今我的想作点什么东西不容易，资质不够。

篇幅问题，文中没有提到太多技术点，望见谅。

视频演示

点击播放视频

因为没有资质不能上线，但若是大家谁感兴趣的想体验的能够留言或给我发邮件(826327700@qq.com)，我把你拉入体验版，只有15个名额哦。

小小的打个广告：最近考虑换工做，有没有深圳的公司招前端的，联系我邮箱，^_^。