0.内容开发的项目是什么1.1想法的开始1.2应该具备哪些功能？开发中需要解决的核心问题具体解决方案3.1账号系统3.2存储服务3.3使用`LeanEngine`作为防盗链传输接口3.4Chrome插件实现去后台视图1.做什么项目你想发展？一个Chrome插件，用于保存浏览网页时看到的最喜欢的图片。1.1想法之初，在pixiv翻图的时候看到一些喜欢的插画。看完之后，我只是翻了翻，没有保存。为什么？因为以我自己的理解，下载图片就相当于把图片扔进了垃圾桶。不是因为本地文件管理有多乱，而是因为几乎没有用鼠标打开文件管理器的习惯。现在我获取信息最常用的流量入口只有两个：1.终端2.浏览器于是乎，我萌生了一个想法：把插画存到浏览器里！于是立马构思并编写了这个插件。1.2应该具备什么功能？功能非常简单。保存操作：1、在图片上右击2、选择“保存到浏览器..”等选项查看操作：1、点击插件图标，查看保存的图片。其他：1.图片同步到云端，也可以保存在浏览器本地。2、既然要存到云端，自然需要一个账号系统。2、发展中有两个核心问题需要解决。核心问题有两个，一个是数据云存储，一个是图片防盗链。云存储问题，账号系统，多设备同步一开始只想在浏览器本地存储，使用Chrome提供的localStorage存储到本地。后来因为localStorage不支持数据库语法查询，带来了很多不便。在使用过程中，发现了多端同步在体验上的优越性，决定将存储放在云端。看了一些关于图片防盗链问题的资料，解决方案基本上可以分为两种。一种是使用前端js嵌入iframe来解决。优点是解决方法简单。问题是Chrome插件不支持页面内嵌的js脚本。所以这个计划通过了。第二种是利用后台服务器做防盗链保护措施，作为对前端的中转。优点是不受chrome插件各种安全机制的限制，缺点是需要后台支持，增加了工作量和资源成本。完成第二节课。3、具体解决方案云存储和账户系统使用LeanCloud提供的存储服务解决。防盗链接口使用LeanCloud提供的云引擎搭建NodeJs后台。啰嗦，为什么要用LeanCloud？一是可以完全免费满足我的需求，二是他们的文档真的xx好用。3.1账户系统参考：数据存储入门教程·JavaScript实现过程基本照搬了本教程的代码。实现了后台账号系统，包括账号重复检测、密码加密、session等。我们要做的就是在前端调用这几个关键方法，实现简单的注册、登录、退出：//LeanCloud-Register//https://leancloud.cn/docs/leanstorage_guide-js.html#registervaruser=newAV.User();user.setUsername(用户名);user.setPassword(密码);user.setEmail(电子邮件);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){//登录成功},函数（错误）{alert(JSON.stringify(error));});//LeanCloud-当前用户信息//https://leancloud.cn/docs/leanstorage_guide-js.html#当前用户varcurrentUser=AV.User.current();//注销AV.User.logOut();3.2存储服务使用账户系统为每个用户添加身份信息后，存储部分只需要将数据+用户身份信息一起上传或下载即可。还是只贴关键方法//初始化类（表示为数据库中的一张数据表`ImageRepo`）和实例（表示为数据库中的一条数据）this.ImageRepo=AV.Object.extend('ImageRepo');varrepo=newthis.ImageRepo();//填充数据repo.put('username','xxx');//上传数据repo.save().then(function(repo){},function(错误）{}）;//下载数据//初始化对'ImageRepo'表的查询varquery=newAV.Query('ImageRepo');//查询条件为username字段等于'xxx'query.equalTo('username','xxx');//查询query.find().then(function(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的使用，文档如下，使用方法也很简单。云引擎快速入门云引擎支持NodeJSPythonPHPJAVA你只需要下载云引擎命令行工具lean，然后输入几行命令就可以创建一个熟悉的web框架。然后，使用你熟悉的语言编写防盗链实现即可。3.4Chrome插件实现随着3.1~3.3的实现，这部分是简单的插件部署和业务逻辑。Chrome插件结构如图：主要业务：在弹窗中添加注册、登录、退出等服务。当弹窗打开时，从云端获取并显示指定账号下保存的图片信息。如果没有登录，会从浏览器localStorage中获取并显示。在后台脚本中添加右键菜单项：当目标为图片时，在浏览器中显示保留图片。点击Keepimageinbrowser执行保存业务逻辑：如果登录，保存到云端。如果未登录，请保存到浏览器localStorage。具体实现见我的github项目：KeepImageInBrowser插件网店地址：FavoriteImage4。最后前段时间在知乎上看到一个关于去后端视图的问题，也顺便分享下我的看法。Web后端会变得越来越没有必要了吗？像bmob和leancloud这样的后端云服务已经流行了一段时间，这些服务的使用大大缩短了一些web和app的开发周期。这对于小型团队和初创公司尤其方便。但这并不意味着不再需要自己开发后端。不是因为他们提供的服务不够全面（相反，我认为这样的服务会发展得全面、方便、迅速），而是因为很多公司和产品，为了保持服务的质量和稳定性，突出特色他们的产品，需要定制自己的后台，有针对性地优化某些模块。云服务作为公共服务平台，很难针对每个产品进行定制。与游戏引擎类似，如今各个平台也不乏优秀的游戏引擎。但是，仍然有一些公司和团队，不惜重金自研游戏引擎，只希望能够匹配自家的游戏系统，完美展示自己的游戏。同样，后台云服务和定制化后台也有交集，但从不重叠。他们相互影响，共同进步。
