0. 目录
-
要开发的是什么项目
1.1 想法开端 1.2 应该有什么功能?
开发需要解决的核心问题
-
具体解决方案
3.1 帐号系统 3.2 存储服务 3.3 使用`LeanEngine`做反防盗链中转接口 3.4 Chrome 插件实现
对去后端化的看法
1. 要开发的是什么项目?
一个Chrome插件,用来保存浏览网页时看到的喜欢的图片。
1.1 想法开端
在 pixiv 翻图时看到一些喜欢的插画,看完就随手翻过去了,没有保存。为什么呢? 因为以我对自己的了解,图片下载下来,就相当于放进了垃圾桶。 并不是因为本地的文件管理有多乱,而是因为,几乎没有用鼠标打开文件管理器的习惯。
现在我获取信息的流量入口最常用的只有两个:1. 终端 2. 浏览器
于是乎,一个想法油然而生:
把插画存到浏览器吧!
于是就立刻构思,动手写了这款插件。
1.2 应该有什么功能?
功能很简单,
保存操作:1. 对图片点击右键 2. 选择"保存到浏览器.." 之类的选项
查看操作:1. 点击插件图标 查看保存过的图片。
其它:1. 图片同步到云端,也可保存到浏览器本地。2. 既然要保存到云端,自然需要账号系统
2. 开发需要解决的核心问题
核心问题有两个,一个是数据云存储问题,一个是图片防盗链问题。
云存储问题,帐号系统,多端同步
最开始只想做浏览器本地的存储,使用Chrome
提供的localStorage
存在本地就。
后来因为localStorage
并不支持数据库语法查询,有很多不便。使用过程中又发现多端同步在体验上的优越性,决定要把存储放到云上。
图片防盗链问题
看了些资料,解决方式基本可以分为两种。
一类使用前端js嵌入iframe
解决,优点是解决方式简单,问题是Chrome
插件不支持页面嵌入式的js
脚本。所以这个方案pass。
第二类使用后台服务器做反防盗链措施,作为中转给前端使用。优点是不受chrome
插件的各种安全机制的限制,缺点是需要后台支持,增加工作量和资源成本。
使用第二类完成。
3. 具体解决方案
云存储及帐号系统使用
LeanCloud
提供的存储服务
解决。
反防盗链接口使用LeanCloud
提供的云引擎
搭建NodeJs
后台。
啰嗦一句,为什么要使用LeanCloud
?
一是对我的需求可以做到完全免费,二是它们的文档实在是太xx的好用了。
3.1 帐号系统
实现过程基本照抄这个教程的代码。后台账号系统包括对账号的重复检测、密码加密、session等都已经实现。
我们要做的,就是调用前端的这几个关键方法,实现简单的注册、登陆、退出:
// LeanCloud - 注册
// https://leancloud.cn/docs/leanstorage_guide-js.html#注册
var user = new AV.User();
user.setUsername(username);
user.setPassword(password);
user.setEmail(email);
user.signUp().then(function (loginedUser) {
// 注册成功
}, (function (error) {
alert(JSON.stringify(error));
}));
// LeanCloud - 登录
// https://leancloud.cn/docs/leanstorage_guide-js.html#用户名和密码登录
AV.User.logIn(username, password).then(function (loginedUser) {
// 登录成功
}, function (error) {
alert(JSON.stringify(error));
});
// LeanCloud - 当前用户信息
// https://leancloud.cn/docs/leanstorage_guide-js.html#当前用户
var currentUser = AV.User.current();
// 退出登陆
AV.User.logOut();
3.2 存储服务
使用账号系统为每个用户添加身份信息后,存储部分就只需要把
数据
+用户身份信息
一同上传或下载就可以了。
照样只贴关键方法
// 初始化类(在数据库中表现为数据表`ImageRepo`)和实例(数据库中表现为一条数据)
this.ImageRepo = AV.Object.extend('ImageRepo');
var repo = new this.ImageRepo();
// 填充数据
repo.put('username', 'xxx');
// 上传数据
repo.save().then(function (repo) {
}, function (error) {
});
// 下载数据
// 初始化对'ImageRepo'表的查询
var query = new AV.Query('ImageRepo');
// 查询条件为 username字段等于'xxx'
query.equalTo('username', 'xxx');
// 查询
query.find().then(function(results) {
// 遍历results
// 在页面添加解决防盗链问题后的图片
}, function(error) {
});
3.3 使用LeanEngine
做反防盗链中转接口
要实现的效果是:
我有一个防盗链图片连接
abc.com/xxx.png
。我的接口url是
http://codeli.leanapp.cn/image?url=xxx
。访问
http://codeli.leanapp.cn/image?url=abc.com/xxx.png
可访问原图,不受防盗链措施限制。
主要原理很简单,后台处理图片请求时更改
header
中的referer
字段,将结果作为response
返回。
关于这部分的实现,欢迎阅读我的另一篇文章,就不再赘述:
服务器作防盗链图片中转,nodejs 上手项目简明教程
关于
LeanEngin
的使用,文档如下,使用方法非常简单。
云引擎支持
NodeJS
Python
PHP
JAVA
只需要下载云引擎命令行工具lean
,然后输入几行命令就可以建立一个你熟悉的web框架。
然后,使用你熟悉的语言编写反防盗链实现就行了。
3.4 Chrome 插件实现
有了 3.1~3.3 的实现,这部分就是简单的插件部署和业务逻辑了。
Chrome 插件结构如图:
主要业务:
在
popup
窗口中添加注册
登陆
退出
等业务。打开
popup
窗口时从云端获取指定账号下保存的图片信息,并展示。若未登陆,则从浏览器localStorage
获取并展示。background script
中添加右键菜单项: 当目标是图片时,显示Keep image in browser
。点击
Keep image in browser
, 执行保存业务逻辑: 若登陆了,保存到云端。若未登录,保存到浏览器localStorage
。
具体实现见我的github项目: KeepImageInBrowser
插件Web Store地址: Favorite Image
4. 最后,对去后端化的看法
前段时间在知乎上看到了一个问题,我也顺便说下自己的看法。
web后端会不会变得越来越不需要?
像bmob和leancloud这类后台云服务的流行有一段日子了,使用这些服务使一些web、app的开发周期大大缩减。这对于小团队和初创公司尤为方便。
但这并不意味着不再需要自己开发后台。不是因为他们提供的服务不够全面(相反,我倒认为这类服务将向着全面、便捷、快速发展),而是因为很多公司和产品,为了保持服务的质量和稳定,突出自己产品的特性,需要自己定制自己的后台,有针对性的去优化某些模块。
云服务作为大众服务平台难以为每个产品做定制。
类似于游戏引擎,如今各个平台都不缺乏优秀的游戏引擎。可是仍有公司和团队耗费大量的成本自研游戏引擎,就是希望能配合自己的游戏系统,完美地展现自己的游戏。
一样的,后台云服务和自定制的后台,是相交但永远不会重合的关系。 他们彼此之间相互影响,共同进步。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。