likes
comments
collection

开发个「班级毕业地图」

作者站长头像
站长
· 阅读数 14

背景

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

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

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

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

体验截图

开发个「班级毕业地图」

源码

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个专栏里分享:《教你做小游戏》《极致用户体验》