1、前言

很久沒(méi)有進(jìn)行更新文章了育韩，2018已經(jīng)結(jié)束，2019已經(jīng)開(kāi)啟闺鲸，為了給2018畫(huà)下圓滿的句號(hào)筋讨，決定在新年來(lái)臨前寫一篇總結(jié)。如果有看過(guò)我文章的朋友或許知道還有一個(gè)小程序《校友足跡》摸恍，而《校友來(lái)了》正是《校友足跡》的升級(jí)版悉罕，我在原有的基礎(chǔ)上添加了校友圈子功能，通過(guò)《校友來(lái)了》不僅能看到校友的分布情況立镶，同時(shí)還可以與同城校友交流蛮粮，查看校友名片等。讓《校友來(lái)了》不僅僅是一個(gè)工具谜慌，更是一個(gè)同城校友發(fā)現(xiàn)與交流的圈子然想。

初心

《校友來(lái)了》旨在幫助更多同城校友交流，在這里你能發(fā)現(xiàn)新的機(jī)會(huì)欣范、新的朋友变泄、甚至可以幫你找到你的另一半！《校友來(lái)了》更是一個(gè)幫你拓展社交圈的好工具恼琼，在家靠父母妨蛹，出門靠朋友，朋友又是同校校友晴竞，你在這個(gè)城市就會(huì)多一份異鄉(xiāng)的溫暖蛙卤。

體驗(yàn)

image

2、校友足跡1.0

關(guān)于《校友足跡》1.0可以查看我以前的另一篇文章

mpvue小程序《校友足跡》成長(zhǎng)記（一）

3、升級(jí)原因

《校友足跡》發(fā)布一段時(shí)候后颤难，一直有計(jì)劃想要升級(jí)一些新的功能神年，讓其不再那么單一，但是由于工作上比較忙的原因行嗤，一直擱置了下來(lái)已日。直到有一次，有一位在公眾號(hào)看了我文章的朋友栅屏，留言說(shuō)想要聊一下我的《校友足跡》飘千，他給了我重新升級(jí)《校友足跡》的想法。剛好這段時(shí)間工作上也不是很忙栈雳，那就利用業(yè)余時(shí)間說(shuō)干就干护奈，一口氣升級(jí)一下。

4哥纫、新增功能

4.1 校友圈子

校友圈子是這次最大的升級(jí)霉旗，基于《校友足跡》的思考，同城校友圈是我最想做的功能磺箕，先把全國(guó)校友按照省市劃分，再根據(jù)學(xué)校劃分抛虫，每個(gè)城市的校友都是不同的圈子松靡。只有同城校友才能看到自己發(fā)的話題，這樣也符合圈子的定義建椰，既然是圈子就不能太大雕欺，要細(xì)化一些。同時(shí)在頂部Banner部分也做了公有與私有化劃分棉姐，根據(jù)院校與城市會(huì)顯示不同的輪播圖屠列。這也是為了幫助各大高校做宣傳使用，因?yàn)樵谂e行校友聚會(huì)的時(shí)候并不是所有的校友都能看到消息伞矩，更有一些老校友斷了聯(lián)系笛洛，通過(guò)這個(gè)宣傳入口可以讓更多的同城校友看到消息。

image

4.2乃坤、校友名片

校友名片可以通過(guò)點(diǎn)擊昵稱或者頭像查看苛让，此頁(yè)面展示了同城校友的基本信息。由于小程序沒(méi)有開(kāi)放直接添加微信好友的接口湿诊，所以這里需要校友完善自己的個(gè)人信息后狱杰，通過(guò)點(diǎn)擊復(fù)制的方式回到微信界面添加。雖然在操作方式上較為繁雜厅须，但目前只能采用此方式仿畸。不過(guò)手機(jī)號(hào)是可以直接保存到通訊錄中

image

4.3 個(gè)人中心

個(gè)人中心這里主要就是個(gè)人信息的基本展示與修改，同時(shí)還有自己發(fā)布過(guò)的話題，與話題相關(guān)的評(píng)論和點(diǎn)贊消息通知错沽。由于話題功能需要用戶基本信息才可簿晓，所以這里需要授權(quán)得到您的昵稱和頭像信息，不用擔(dān)心隱私問(wèn)題甥捺，因?yàn)樾〕绦虻倪@個(gè)授權(quán)也只是基本的頭像和昵稱抢蚀，并沒(méi)有隱私信息。

image

image

4.4 消息中心

消息中心主要分為個(gè)人消息與系統(tǒng)公告通知镰禾，個(gè)人消息可以接收到自己發(fā)布話題的點(diǎn)贊與評(píng)論消息皿曲。

image

4.5 校友足跡頁(yè)升級(jí)改版

原有足跡頁(yè)面比較單一乏味，新版在經(jīng)過(guò)無(wú)數(shù)次的設(shè)計(jì)改版后吴侦，提升了整體逼格（O(∩_∩)O哈哈~）屋休，在分享出去后也是逼格滿滿，目前只顯示排名前三的城市备韧。下載按鈕可以生成此頁(yè)面的圖片劫樟，方便你分享到朋友圈，聊聊則是直接通往校友圈子的入口织堂。

image

image

關(guān)于技術(shù)

做的時(shí)候遠(yuǎn)比初想的難叠艳，從mysql數(shù)據(jù)庫(kù)表的設(shè)計(jì)，到node,express業(yè)務(wù)邏輯的拆分和數(shù)據(jù)的封裝與接口統(tǒng)一易阳，一直到mpvue前端頁(yè)面展示附较，以及mysql數(shù)據(jù)庫(kù)查詢優(yōu)化，redis緩存的使用潦俺，還有JWT接口權(quán)限的驗(yàn)證拒课，還有小程序的采坑，更有界面設(shè)計(jì)的優(yōu)化事示，在這段時(shí)間里都一一經(jīng)歷了早像。學(xué)了不少新的東西，也回顧了以前的不少知識(shí)肖爵，算是一個(gè)偽node全棧的項(xiàng)目了卢鹦，關(guān)于技術(shù)的詳解我會(huì)另開(kāi)一篇文章進(jìn)行詳細(xì)介紹，不僅作為一個(gè)分享交流劝堪，也作為這個(gè)項(xiàng)目的技術(shù)總結(jié)法挨。如果有興趣的話可以持續(xù)關(guān)注一下，在這里先放一下張目錄結(jié)構(gòu)

前端

mpvue + flyio + vuex + stylus + echarts

image

• mpvue mpvue 是一個(gè)使用 Vue.js 開(kāi)發(fā)小程序的前端框架幅聘》材桑框架基于 Vue.js 核心，mpvue 修改了 Vue.js 的 runtime 和 compiler 實(shí)現(xiàn)帝蒿，使其可以運(yùn)行在小程序環(huán)境中荐糜，從而為小程序開(kāi)發(fā)引入了整套 Vue.js 開(kāi)發(fā)體驗(yàn)。
• vuex Vuex 是一個(gè)專為 Vue.js 應(yīng)用程序開(kāi)發(fā)的狀態(tài)管理模式。它采用集中式存儲(chǔ)管理應(yīng)用的所有組件的狀態(tài)暴氏，并以相應(yīng)的規(guī)則保證狀態(tài)以一種可預(yù)測(cè)的方式發(fā)生變化延塑。
• flyio 一個(gè)支持所有JavaScript運(yùn)行環(huán)境的基于Promise的、支持請(qǐng)求轉(zhuǎn)發(fā)答渔、強(qiáng)大的http請(qǐng)求庫(kù)关带。可以讓您在多個(gè)端上盡可能大限度的實(shí)現(xiàn)代碼復(fù)用沼撕。
• mpvue-echarts ECharts 的 Mpvue 小程序版本宋雏。開(kāi)發(fā)者可以通過(guò)熟悉的 ECharts 配置方式及 Vue 語(yǔ)法，快速開(kāi)發(fā)圖表务豺，滿足各種可視化需求磨总。
• stylus CSS 的預(yù)處理框架,stylus 給 CSS 添加了可編程的特性，也就是說(shuō)笼沥，在 stylus 中可以使用變量蚪燕、函數(shù)、判斷奔浅、循環(huán)一系列 CSS 沒(méi)有的東西來(lái)編寫樣式文件馆纳，執(zhí)行這一套騷操作之后，這個(gè)文件可編譯成 CSS 文件

后端服務(wù)

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

image

• mysql 系型數(shù)據(jù)庫(kù)管理系統(tǒng)
• redis Redis是一個(gè)開(kāi)源的使用ANSI C語(yǔ)言編寫汹桦、支持網(wǎng)絡(luò)鲁驶、可基于內(nèi)存亦可持久化的日志型、Key-Value數(shù)據(jù)庫(kù)营勤，并提供多種語(yǔ)言的API灵嫌。它通常被稱為數(shù)據(jù)結(jié)構(gòu)服務(wù)器壹罚，因?yàn)橹担╲alue）可以是 字符串(String), 哈希(Map), 列表(list), 集合(sets) 和 有序集合(sorted sets)等類型葛作。
• express Express 是一個(gè)保持最小規(guī)模的靈活的 Node.js Web 應(yīng)用程序開(kāi)發(fā)框架，為 Web 和移動(dòng)應(yīng)用程序提供一組強(qiáng)大的功能猖凛。
• superagent superagent 是一個(gè)輕量的,漸進(jìn)式的ajax api,可讀性好,學(xué)習(xí)曲線低,內(nèi)部依賴nodejs原生的請(qǐng)求api,適用于nodejs環(huán)境下.
• jsonwebtoken JSON Web Token（縮寫 JWT）是目前最流行的跨域認(rèn)證解決方案
• crypto crypto模塊的目的是為了提供通用的加密和哈希算法赂蠢。用純JavaScript代碼實(shí)現(xiàn)這些功能不是不可能，但速度會(huì)非常慢辨泳。Nodejs用C/C++實(shí)現(xiàn)這些算法后虱岂，通過(guò)cypto這個(gè)模塊暴露為JavaScript接口，這樣用起來(lái)方便菠红，運(yùn)行速度也快第岖。在這里用做微信小程序加密解密
• ioredis ioredis是一個(gè)功能強(qiáng)大，功能齊全的Redis客戶端
• mysql mysql的node.js驅(qū)動(dòng)程序
• pm2 PM2是node進(jìn)程管理工具试溯，可以利用它來(lái)簡(jiǎn)化很多node應(yīng)用管理的繁瑣任務(wù)蔑滓，如性能監(jiān)控、自動(dòng)重啟、負(fù)載均衡等键袱，而且使用非常簡(jiǎn)單

最后

如果你對(duì)本小程序感興趣的話可以分享到朋友圈燎窘，讓更多的校友了解到《校友來(lái)了》，讓同城校友的圈子越來(lái)越壯大蹄咖。同時(shí)如果你有更好的想法或者idea褐健，歡迎下方留言交流，如果你的院校有校友會(huì)相關(guān)的宣傳需求澜汤，也歡迎聯(lián)系我蚜迅，我將免費(fèi)為貴校提供宣傳。