《地圖氣球》小程序從產品到運維的我的全棧開發過程分享（長文）

前言

怕過不了審，先聲明一下，這不是廣告，由於這個小程序沒上架。

從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個名額哦。

小小的打個廣告：最近考慮換工做，有沒有深圳的公司招前端的，聯繫我郵箱，^_^。