开发个「班级毕业地图」

背景

高考后，原本在同一个省同一个市的同班同学，就分散全国各地了， 又过了几年，大家又到了不同的省份去上班。

每每走到一个省份，联系下以前的好友，聊聊近几年的生活，还是非常欣慰的。见到当年的好友，就会想起当年单纯的努力的自己。

但是前提，是要知道这个省份，有哪些同学在。

所以，绘制一份「班级毕业地图」是非常有意义的事情。

体验截图

源码

github.com/HullQin/cla…

需求描述

1. 同学的姓名、位置、大学，支持配置，且支持任意数量的同学，方便新增同学、修改信息。
2. 点击某个省份，罗列该省份所有同学。
3. 点击某个省份，背景随机出现该省份的美食。
4. 每个班级一个网址，pathname可以体现班级名称或班级号。
5. 网页标题支持配置，方便每个班级不一样。
6. 四个角落的信息支持配置。
7. 某个省份没有同学时，缺省文案支持配置。
8. 默认背景图片支持配置，可配置多张。

实现方式

数据存到哪里？

方案一：可以搞一个后端，搞个数据库，每个班级的信息存到数据库。

方案二：每个班级是一个配置文件，存到后端，根据pathname读取对应配置文件。找不到配置文件，表明班级不存在。

方案三：无后端的方案。每个班级是一个配置文件，存到CDN，根据pathname去CDN找对应路径的配置文件。找不到配置文件，表明班级不存在。

最终，我不希望这个小网站给我服务器太多压力，选择了方案三，这也是维护成本最低、加载速度最快的方案。

数据安全问题

当然你们不要盲目跟我学，因为采用方案三的话，只要你的班级的pathname被发现了，全班同学的姓名、大学信息也就被发现了。我知道这个信息不算敏感信息，而且用户并不希望查看自己班级的毕业地图还需要登陆、或者输入个密码，所以采取了该方案。

如果你依然不希望别人知道信息，可以把pathname设计的足够长和复杂，甚至可以随时手动更新一下pathname。网站是https存储，pathname不会泄露，信息在某种程度上就是安全的。

数据结构

页面配置：

window.configData = {
  title: '最好的班',
  bl: '语文老师 冯老师<br>数学老师 唐老师<br>英语老师 张老师<br>地理老师 毕老师<br>历史老师 祁老师<br>政治老师 孟老师',
  br: '',
  tr: '励志将蹭吃蹭喝进行到底',
  blank: '这里没有我们的同志 蹭饭请找下家',
  bg: [],
};

同学信息配置：

window.classData = [
  {
    "id": 1,
    "name": "张",
    "city": "Beijing",
    "university": "清华大学"
  },
  {
    "id": 2,
    "name": "杨",
    "city": "Beijing",
    "university": "对外经济贸易大学"

地图绘制

我使用了Leaflet这个JS库来绘制地图。

当然，这只是个绘制库，你还是需要把地理位置信息当作参数传给它。

地理位置信息用什么数据结构呢？有TopoJSON​，也有GeoJSON。他们都可以表述地图，TopoJSON体积更小，主要差别是：相邻的地区的边界，TopoJSON只记录了一次，而GeoJSON会重复记录那些边界。当然，用TopoJSON成本就是，需要增加计算成本，把TopoJSON转换为GeoJSON后，才能被绘图库识别和绘制。

我只记录中国各省的地图信息即可，体积不会太大，而且也不希望再引入​​topojson.js​​来转换了。因此我直接采用了GeoJSON。

地图数据是网上找的，很多地理信息都是开源的。

省份颜色

由于一个班级大概60人，所以我直接自定义了静态的颜色计算规则：

function getColor(d) {
  const num = cityData[d];
  return num > 8 ? '#1B5C87' :
    num > 6 ? '#1B6E87' :
      num > 4 ? '#2594B6' :
        num > 2 ? '#279EC2' :
          num > 1 ? '#51BBDB' :
            num > 0 ? '#77CAE3' :
              '#77E3D3';
}

如果以后出现了其它班级不适用这套规则，我再优化一下。

写在最后

我是HullQin，公众号线下聚会游戏的作者（欢迎关注公众号，联系我，交个朋友），转发本文前需获得作者HullQin授权。我独立开发了《联机桌游合集》​，是个网页，可以很方便的跟朋友联机玩斗地主、五子棋等游戏，不收费无广告。还独立开发了《合成大西瓜重制版》​。还开发了《Dice Crush》​参加Game Jam 2022。喜欢可以关注我噢～我有空了会分享做游戏的相关技术，会在这2个专栏里分享：《教你做小游戏》、《极致用户体验》。