mpvue小程序《校友来了》成长记 | 给2018画下圆满句号

1、前言

很久没有进行更新文章了，2018已经结束，2019已经开启，为了给2018画下圆满的句号，决定在新年来临前写一篇总结。如果有看过我文章的朋友或许知道还有一个小程序《校友足迹》，而《校友来了》正是《校友足迹》的升级版，我在原有的基础上添加了校友圈子功能，通过《校友来了》不仅能看到校友的分布情况，同时还可以与同城校友交流，查看校友名片等。让《校友来了》不仅仅是一个工具，更是一个同城校友发现与交流的圈子。

初心

《校友来了》旨在帮助更多同城校友交流，在这里你能发现新的机会、新的朋友、甚至可以帮你找到你的另一半！《校友来了》更是一个帮你拓展社交圈的好工具，在家靠父母，出门靠朋友，朋友又是同校校友，你在这个城市就会多一份异乡的温暖。

体验

image

2、校友足迹1.0

关于《校友足迹》1.0可以查看我以前的另一篇文章

mpvue小程序《校友足迹》成长记（一）

3、升级原因

《校友足迹》发布一段时候后，一直有计划想要升级一些新的功能，让其不再那么单一，但是由于工作上比较忙的原因，一直搁置了下来。直到有一次，有一位在公众号看了我文章的朋友，留言说想要聊一下我的《校友足迹》，他给了我重新升级《校友足迹》的想法。刚好这段时间工作上也不是很忙，那就利用业余时间说干就干，一口气升级一下。

4、新增功能

4.1 校友圈子

校友圈子是这次最大的升级，基于《校友足迹》的思考，同城校友圈是我最想做的功能，先把全国校友按照省市划分，再根据学校划分，每个城市的校友都是不同的圈子。只有同城校友才能看到自己发的话题，这样也符合圈子的定义，既然是圈子就不能太大，要细化一些。同时在顶部Banner部分也做了公有与私有化划分，根据院校与城市会显示不同的轮播图。这也是为了帮助各大高校做宣传使用，因为在举行校友聚会的时候并不是所有的校友都能看到消息，更有一些老校友断了联系，通过这个宣传入口可以让更多的同城校友看到消息。

image

4.2、校友名片

校友名片可以通过点击昵称或者头像查看，此页面展示了同城校友的基本信息。由于小程序没有开放直接添加微信好友的接口，所以这里需要校友完善自己的个人信息后，通过点击复制的方式回到微信界面添加。虽然在操作方式上较为繁杂，但目前只能采用此方式。不过手机号是可以直接保存到通讯录中

image

4.3 个人中心

个人中心这里主要就是个人信息的基本展示与修改，同时还有自己发布过的话题，与话题相关的评论和点赞消息通知。由于话题功能需要用户基本信息才可，所以这里需要授权得到您的昵称和头像信息，不用担心隐私问题，因为小程序的这个授权也只是基本的头像和昵称，并没有隐私信息。

image

image

4.4 消息中心

消息中心主要分为个人消息与系统公告通知，个人消息可以接收到自己发布话题的点赞与评论消息。

image

4.5 校友足迹页升级改版

原有足迹页面比较单一乏味，新版在经过无数次的设计改版后，提升了整体逼格（O(∩_∩)O哈哈~），在分享出去后也是逼格满满，目前只显示排名前三的城市。下载按钮可以生成此页面的图片，方便你分享到朋友圈，聊聊则是直接通往校友圈子的入口。

image

image

关于技术

做的时候远比初想的难，从mysql数据库表的设计，到node,express业务逻辑的拆分和数据的封装与接口统一，一直到mpvue前端页面展示，以及mysql数据库查询优化，redis缓存的使用，还有JWT接口权限的验证，还有小程序的采坑，更有界面设计的优化，在这段时间里都一一经历了。学了不少新的东西，也回顾了以前的不少知识，算是一个伪node全栈的项目了，关于技术的详解我会另开一篇文章进行详细介绍，不仅作为一个分享交流，也作为这个项目的技术总结。如果有兴趣的话可以持续关注一下，在这里先放一下张目录结构

前端

mpvue + flyio + vuex + stylus + echarts

image

• 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）

image

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