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，欢迎下方留言交流，若是你的院校有校友会相关的宣传需求，也欢迎联系我，我将免费为贵校提供宣传。