Introducing Casablanca——β-house 成员管理

《Casablanca》是一部1942年的美国爱情电影。在上个世纪80年代,美国音乐人 Bertie Higgins 和他女友共同观看了《Casablanca》这部电影,两人都喜欢非常这部爱情片。结合这部电影带给他的感觉,Bertie Higgins 为他的女朋友写了与《Casablanca》同名的一首歌。

介绍

Casablanca 是 β-house 成员管理应用。使用 Vue.js + Koa 构建。支持新增成员、查询/编辑/删除成员信息。另外,Casablanca 还开放了 api 供其它项目(官网)调用。

小伙伴们可以直接使用它来编辑成员信息,再也用苦逼地编辑和处理 json 文件啦。

地址

http://member.betahouse.us

截图预览

登录页面

成员列表

成员编辑

小结

成员管理系统,乍一看就是简单的 CRUD,但是要写用户体验良好且线上可以用的应用也不是特别容易,一路写下来踩过不少坑,之后我会以博文的形式将项目涉及知识点进行总结。

界面是自己瞎设计的。纯手写 CSS 之后感觉 CSS 才是这个项目中最难搞定的一部分……

写这个项目的起因 @elliot 学长在写工作室官网时觉得处理成员数据太麻烦,便提议说我们需要一个成员管理系统。

之前工作是官网的成员数据都是保存在一个json文件中,然后再由前端读取json文件将成员信息展现再页面上。

这种解决方案的缺点是

  1. 每次成员信息的变动(主要是新成员的加入),都需要手动修改json文件。
  2. 前端由data => view这个过程不优雅。具体可见beta2017/info.js

那么,把数据存到数据库就简单多了嘛,然后开放 api 给官网项目,再提供一个图形用户界面来给大家编辑成员信息。

Casablanca 项目很简单,就做了上述的这么一件事……