mpvue小程序《校友來了》成長記 | 給2018畫下圓滿句號

一、前言

好久沒有進行更新文章了，2018已經結束，2019已經開啓，爲了給2018畫下圓滿的句號，決定在新年來臨前寫一篇總結。若是有看過我文章的朋友或許知道還有一個小程序《校友足跡》，而《校友來了》正是《校友足跡》的升級版，我在原有的基礎上添加了校友圈子功能，經過《校友來了》不只能看到校友的分佈狀況，同時還能夠與同城校友交流，查看校友名片等。讓《校友來了》不只僅是一個工具，更是一個同城校友發現與交流的圈子。

初心

《校友來了》旨在幫助更多同城校友交流，在這裏你能發現新的機會、新的朋友、甚至能夠幫你找到你的另外一半！《校友來了》更是一個幫你拓展社交圈的好工具，在家靠父母，出門靠朋友，朋友又是同校校友，你在這個城市就會多一份異鄉的溫暖。

體驗

二、校友足跡1.0

關於《校友足跡》1.0能夠查看我之前的另外一篇文章

mpvue小程序《校友足跡》成長記（一）

三、升級緣由

《校友足跡》發佈一段時候後，一直有計劃想要升級一些新的功能，讓其再也不那麼單一，可是因爲工做上比較忙的緣由，一直擱置了下來。直到有一次，有一位在公衆號看了我文章的朋友，留言說想要聊一下個人《校友足跡》，他給了我從新升級《校友足跡》的想法。恰好這段時間工做上也不是很忙，那就利用業餘時間說幹就幹，一口氣升級一下。

四、新增功能

4.1 校友圈子

校友圈子是此次最大的升級，基於《校友足跡》的思考，同城校友圈是我最想作的功能，先把全國校友按照省市劃分，再根據學校劃分，每一個城市的校友都是不一樣的圈子。只有同城校友才能看到本身發的話題，這樣也符合圈子的定義，既然是圈子就不能太大，要細化一些。同時在頂部Banner部分也作了公有與私有化劃分，根據院校與城市會顯示不一樣的輪播圖。這也是爲了幫助各大高校作宣傳使用，由於在舉行校友聚會的時候並非全部的校友都能看到消息，更有一些老校友斷了聯繫，經過這個宣傳入口可讓更多的同城校友看到消息。

4.二、校友名片

校友名片能夠經過點擊暱稱或者頭像查看，此頁面展現了同城校友的基本信息。因爲小程序沒有開放直接添加微信好友的接口，因此這裏須要校友完善本身的我的信息後，經過點擊複製的方式回到微信界面添加。雖然在操做方式上較爲繁雜，但目前只能採用此方式。不過手機號是能夠直接保存到通信錄中

4.3 我的中心

我的中心這裏主要就是我的信息的基本展現與修改，同時還有本身發佈過的話題，與話題相關的評論和點贊消息通知。因爲話題功能須要用戶基本信息纔可，因此這裏須要受權獲得您的暱稱和頭像信息，不用擔憂隱私問題，由於小程序的這個受權也只是基本的頭像和暱稱，並無隱私信息。

4.4 消息中心

消息中心主要分爲我的消息與系統公告通知，我的消息能夠接收到本身發佈話題的點贊與評論消息。

4.5 校友足跡頁升級改版

原有足跡頁面比較單一乏味，新版在通過無數次的設計改版後，提高了總體逼格（O(∩_∩)O哈哈~），在分享出去後也是逼格滿滿，目前只顯示排名前三的城市。下載按鈕能夠生成此頁面的圖片，方便你分享到朋友圈，聊聊則是直接通往校友圈子的入口。

關於技術

作的時候遠比初想的難，從mysql數據庫表的設計，到node,express業務邏輯的拆分和數據的封裝與接口統一，一直到mpvue前端頁面展現，以及mysql數據庫查詢優化，redis緩存的使用，還有JWT接口權限的驗證，還有小程序的採坑，更有界面設計的優化，在這段時間裏都一一經歷了。學了很多新的東西，也回顧了之前的很多知識，算是一個僞node全棧的項目了，關於技術的詳解我會另開一篇文章進行詳細介紹，不只做爲一個分享交流，也做爲這個項目的技術總結。若是有興趣的話能夠持續關注一下，在這裏先放一下張目錄結構

前端

mpvue + flyio + vuex + stylus + echarts

• mpvue mpvue 是一個使用 Vue.js 開發小程序的前端框架。框架基於 Vue.js 核心，mpvue 修改了 Vue.js 的 runtime 和 compiler 實現，使其能夠運行在小程序環境中，從而爲小程序開發引入了整套 Vue.js 開發體驗。
• vuex Vuex 是一個專爲 Vue.js 應用程序開發的狀態管理模式。它採用集中式存儲管理應用的全部組件的狀態，並以相應的規則保證狀態以一種可預測的方式發生變化。
• flyio 一個支持全部JavaScript運行環境的基於Promise的、支持請求轉發、強大的http請求庫。可讓您在多個端上儘量大限度的實現代碼複用。
• mpvue-echarts ECharts 的 Mpvue 小程序版本。開發者能夠經過熟悉的 ECharts 配置方式及 Vue 語法，快速開發圖表，知足各類可視化需求。
• stylus CSS 的預處理框架,stylus 給 CSS 添加了可編程的特性，也就是說，在 stylus 中可使用變量、函數、判斷、循環一系列 CSS 沒有的東西來編寫樣式文件，執行這一套騷操做以後，這個文件可編譯成 CSS 文件

後端服務

mysql + redis + node (express + superagent + jsonwebtoken +crypto + ioredis + mysql + pm2）

• mysql 系型數據庫管理系統
• redis Redis是一個開源的使用ANSI C語言編寫、支持網絡、可基於內存亦可持久化的日誌型、Key-Value數據庫，並提供多種語言的API。它一般被稱爲數據結構服務器，由於值（value）能夠是 字符串(String), 哈希(Map), 列表(list), 集合(sets) 和 有序集合(sorted sets)等類型。
• express Express 是一個保持最小規模的靈活的 Node.js Web 應用程序開發框架，爲 Web 和移動應用程序提供一組強大的功能。
• superagent superagent 是一個輕量的,漸進式的ajax api,可讀性好,學習曲線低,內部依賴nodejs原生的請求api,適用於nodejs環境下.
• jsonwebtoken JSON Web Token（縮寫 JWT）是目前最流行的跨域認證解決方案
• crypto crypto模塊的目的是爲了提供通用的加密和哈希算法。用純JavaScript代碼實現這些功能不是不可能，但速度會很是慢。Nodejs用C/C++實現這些算法後，經過cypto這個模塊暴露爲JavaScript接口，這樣用起來方便，運行速度也快。在這裏用作微信小程序加密解密
• ioredis ioredis是一個功能強大，功能齊全的Redis客戶端
• mysql mysql的node.js驅動程序
• pm2 PM2是node進程管理工具，能夠利用它來簡化不少node應用管理的繁瑣任務，如性能監控、自動重啓、負載均衡等，並且使用很是簡單

最後

若是你對本小程序感興趣的話能夠分享到朋友圈，讓更多的校友瞭解到《校友來了》，讓同城校友的圈子愈來愈壯大。同時若是你有更好的想法或者idea，歡迎下方留言交流，若是你的院校有校友會相關的宣傳需求，也歡迎聯繫我，我將免費爲貴校提供宣傳。