menu search

Iridescent

Showing luminous colours that seem to change when seen from different angles

Dec 6, 2017

Iridescent: showing luminous colours that seem to change when seen from different angles.

Project Elysian

今年年初尝试使用Vue给学校的电脑课写了个页面,今年开学后正式投入了使用。(其实还是因为老师用的Hostinger免费版不稳定)

第一次开发这类项目,有些问题只有在使用后才会意识到:

  1. 我作死一次性加载了所有的数据到页面中,一下子涌入400 + 条数据,电脑上还好,手机上滑动卡死
  2. 无法在前台编辑 / 删除
  3. 代码耦合度太高,无法拆开使用
  4. 每个.vue里面都一堆代码,还没有注释

本来想着修复前两个问题就凑合用下去了,但是代码写的实在是太烂了,烂到我自己都看不下去了。有些地方都不知道为什么要这么写。

除此以外,还有一堆我自己给自己挖的大坑:

数据库坑:我作死把年级和单元的数据做了嵌套,导致无法直接通过单元的ID来获取数据:

"levels": [
  {
      "name": "1”,
      "id": "first"
      "topics": [
        {
          "id": 2,
          "name": "Excel"
        }
      ]
  }
]

渲染页面的时候(年级>单元)倒是很爽,直接套两个循环就好;但是反过来简直要死,必须得在每个问题中同时储存年级和单元的ID才能反过来查询。

同时,Firebase Database 也很让我抓狂,获取数据会把该目录下所有子项目也一并拉走。不过我一开始也发现了这个缺点,所以没作死把问题数据也嵌套进去。(不然就真的完了)

虽然名字叫 Firebase Database ,但是数据库该有的功能它还真的没几个:不能基于多个条件查询,只能排序一次

十月三号那天Firebase团队发布了新一代产品:Cloud Firestore

当时稍微的看了下,感叹这东西要是早点出来就好了,上面写的缺点它差不多都解决了… 最起码现在能用.where()来查询了,方法命名也正常多了:

/// Realtime Database
firebase.database().ref('/questions/').once('value').then()

/// Cloud Firestore
firebase.firestore().collection('questions').get().then()

那个.once('value')我总是想不起来,.get()就好记多了。

于是就打算转移到新的数据库上,但是旧的代码写的太烂了,烂到我自己都不知道从哪里下手好,每个视图里面都塞了一堆this.$root.,看的我头疼。

同时,我用的 VueFire 也还没更新,所以这个计划也暂时推后了。


因为是第一次使用 Vue,懒,所以就用了浏览器脚本来安装,而不是Vue-cli。在小型应用上可能没什么问题,但有个多个视图以后简直会让人想自杀。

所有的第三方库都直接使用<script>插入,打开index.html简直惨不忍睹,更新起来特别麻烦。加载速度也不是很理想,得等所有的小脚本加载完才能启动Vue。

最后,也是最让我崩溃的一点:直接使用脚本无法使用热加载。每次修改后我都得手动刷新页面

以上。决定在重写一个新的版本,并采用 NPM + Webpack。

From Elysian to Iridescent

十一月中旬开的工,有了热加载后整个人都舒服了,而且还顺带检测语法错误👍。

尝试把大部分的代码都组件化。一开始感觉没什么必要,但等应用做大后就会意识到好处了。例如编辑界面可以重用发布页面的表单,省事。还能隔离变量,在组件间传递参数…

感觉有空可以写篇文章来谈谈踩到的坑。


昨天正式完工,稍微有点赶时间,一些旧的功能还没完全移植过来。早点上线也好,少转移点数据。

主页

单元

前端直接用了 VueMaterial 这个框架,省事,这种大型应用还是用框架好。(写交互逻辑都有够我受的了,懒得去写样式了)

单元的布局参考了Google Classroom (头部大图 + 双栏),两者都是Material Design,所以看起来特别像。

除此以外还用到了:

  • Vue-analytics: Google Analytics 集成
  • Sentry.io: 收集错误日志
  • Vee-validate: 表单验证
  • Vue-meta: 动态标题
  • Vue-mugen-scroll: 下拉加载更多
  • Vue-timeago
  • Node-vibrant: 图片取色

最后

一个人写完了整个项目,好友问我为什么花那么多时间在一个课外项目上。我自己也不明白,感觉写着写着就越来越有意思了。

编程的过程本身就是一种乐趣吧,不断思考着无限的可能性,到了最后所有的努力只是为了他人使用时所给予的赞赏。

这种感觉就和我当初写主题的时候一样吧,但现在写主题已经不能满足我了,该给自己设一个更远的目标了。

Photo by Vitaliy Paykov on Unsplash

Comments

edit x send markdown image
paragraph comment heart