作为一名美女设计师,她用 6 小时写了个上传七牛云的桌面客户端
发布于 2 个月前 作者 lalalaha 3282 次浏览 来自 分享

在这个项目上,也就是前端的工作居多。 某日,一友人因把文件上传到 Dropbox 而引发众怒。同时,百度网盘也越来越不好用了。我随意吐槽之。 于是乎,就有了这个项目。

某个周六深夜,写小程序已闷死,突然想起答应友人的事情了。

经过初步调查,选用 Electron-vue 作为基础框架开发。在我这个刚学 nodejs,更不懂 electron,也就只是有一定的前后端经验的人,或许这是一个挑战。

设计定稿

作为一个设计师,怎么也要样子好看,所以就以设计稿起步为先。

我把主界面画了出来,确定好 UI 风格了。

VUE

代码是开始在周日凌晨 1 点多。我选用了 Electron-vue 作为解决方案。

不过,由于 VUE 不熟悉,也碰到了一些坑。

例如:

  • 不知道如何引用文件(感觉以前的前端技能被残废了一样)
  • 写完 CSS 才发现,A 页面的 CSS 会干扰 B 页面的 CSS(我还以为和小程序、React 那样)
  • VUE 的路由我理解了好长时间才明白。

我以前一直写 jQuery,异步和 DOM 管理没什么问题。可是遇到 VUE,我真的觉得脑子的思維要转变了哦。特別是路由,这个明明不就是后端的事情吗?怎么前端模板也有路由概念,我折腾了有 1 小時,才发现原来所谓路由不是跳转 GET/POST 的意思,而是切换显示的页面。怪不得 Google 的时候一直出现的 SPA 这个词,其实我也没理解。直到我刚才专门 Google 才知道了。大哭(其实我以为 SPA 真的是 SPA 嘛~)。

Electron

这货坑也不少。

例如:

  • 复制粘贴在 Build 后完全用不了。
  • 一开始抓头在思考怎么做 GET 和 POST……
  • 背景模糊玻璃效果,还没能实现,不过在 demo 的确能做到。
  • 打包后,竟然找不到 modules……

七牛

官方的 Node.JS SDK 在 npm run dev 能用,但是打包 App 后有一定问题,这个还是要好好调查。

开发

总而言之,在我 App 编写 6 个小时候之后,终于基本可以面世了。以 Electron 的方案来开发 App 的确比传统要舒服和快,而且动画效果写起来不吃力(毕竟强大的 CSS3 动画真厉害),所以我在 App 添加了比较多的动画效果。

Electron 打包的确很大,也无解。经过 ZIP 压缩后有 40 多MB,还算能接受。

界面效果


推荐阅读: 动手实操:如何用七牛云 API 实现相片地图?

报名方式:有更多有趣的作品分享给大家?扫描上方二维码和美女队长接头,即可成为【动手实操】系列玩家。

24 回复

哇,是个漂亮妹子

向你学习 自豪地采用 CNodeJS ionic

哇,是个漂亮妹子

我就问开源吗?

百度网盘有什么不好。。?

@alsotang 这不是重点,重点是美女设计师。逃…

赞一个,UI风格也很七牛

本以为看到美女统统跪舔要微信。没想到大部分都是谈技术,注孤生啊,兄弟!

来自酷炫的 CNodeMD

所以我们一起去做SPA吧!

都已经是美女了还要啥技术

看标题以为是美女设计师是别人,内容怎么是第一人称的? 楼上有些人看到女人脑子就短路了 标题是不是应该改成 作为一名美女设计师,用 6 小时写了个上传七牛云的桌面客户端

@alsotang 百度网盘不是会员限速

@liygheart 用七牛的话,各种管理功能等于都没法用啊。文件改名都要调用api吧。。百度网盘除了限速,什么都好。七牛除了不限速,什么都不行。而且七牛的流量要钱啊。

@alsotang 呃,大大误会了,我没有说百度收费我就用七牛呀,我的文件都用的自己电脑存放的,七牛之前也用过,确实不好用,一个文件排序还不是按照时间倒序的,发工单技术回复说会考虑,不知道现在解决了没,这也只是很多问题的一个而已

没有github开源,没有贴代码 。。。

自建才是王道啊

来自酷炫的 CNodeMD

麻烦不要把qiniu当云盘使用了

果然穿上女装会有魔法

握草,简直666.

怎么感觉楼主的头像像是某个明星^_^

回到顶部