《地图气球》小程序从产品到运维的个人全栈开发过程分享(长文)

5,434 阅读10分钟

鸣谢美工给设计的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.语音功能

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

录音.png

录音2

2.多媒体文件的上传

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

七牛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.单页应用中首次打开的白屏优化
单页应用首次打开需要加载相对较大的js包体和其他资源,会有一段时间白屏。我在index.html中添加了loading动画,然后在vue的main.js中window.onload时移除这个动画遮罩。

loading.gif

3.后台部分页面展示

后台管理首页
后台管理气球列表
后台管理气球详情
后台管理用户列表
后台管理添加虚拟气球

后端node

毕竟前端出身,后端程序选用node+express(对koa不熟,- -! )。

后端程序目录
后端基本全是增删改查,同样无法一一赘述,挑几个点说一说:

1.后端代码组织方式

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

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,如下图:

MongoDB可视化管理工具.png

服务器相关的部署过程

服务器

买的阿里云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来访问域名了,绿色则表示证书有效:

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个名额哦。

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