資訊專欄INFORMATION COLUMN
摘要：云存儲問題，帳號系統，多端同步最開始只想做瀏覽器本地的存儲，使用提供的存在本地就。具體解決方案云存儲及帳號系統使用提供的存儲服務解決。
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. 既然要保存到云端，自然需要賬號系統
核心問題有兩個，一個是數據云存儲問題，一個是圖片防盜鏈問題。
云存儲問題，帳號系統，多端同步
最開始只想做瀏覽器本地的存儲，使用Chrome提供的localStorage存在本地就。
后來因為localStorage并不支持數據庫語法查詢，有很多不便。使用過程中又發現多端同步在體驗上的優越性，決定要把存儲放到云上。
圖片防盜鏈問題
看了些資料，解決方式基本可以分為兩種。
一類使用前端js嵌入iframe解決，優點是解決方式簡單，問題是Chrome插件不支持頁面嵌入式的js腳本。所以這個方案pass。
第二類使用后臺服務器做反防盜鏈措施，作為中轉給前端使用。優點是不受chrome插件的各種安全機制的限制，缺點是需要后臺支持，增加工作量和資源成本。
使用第二類完成。
云存儲及帳號系統使用LeanCloud提供的存儲服務解決。
反防盜鏈接口使用LeanCloud提供的云引擎搭建NodeJs后臺。
啰嗦一句，為什么要使用LeanCloud?
一是對我的需求可以做到完全免費，二是它們的文檔實在是太xx的好用了。
參照：數據存儲入門教程 · JavaScript
實現過程基本照抄這個教程的代碼。后臺賬號系統包括對賬號的重復檢測、密碼加密、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.1~3.3 的實現，這部分就是簡單的插件部署和業務邏輯了。
Chrome 插件結構如圖：
主要業務：
在popup窗口中添加注冊 登陸 退出 等業務。
打開popup 窗口時從云端獲取指定賬號下保存的圖片信息，并展示。若未登陸，則從瀏覽器localStorage獲取并展示。
background script 中添加右鍵菜單項: 當目標是圖片時，顯示Keep image in browser。
點擊Keep image in browser, 執行保存業務邏輯: 若登陸了，保存到云端。若未登錄，保存到瀏覽器localStorage。
4. 最后，對去后端化的看法具體實現見我的github項目: KeepImageInBrowser
插件Web Store地址： Favorite Image
前段時間在知乎上看到了一個問題,我也順便說下自己的看法。
web后端會不會變得越來越不需要?
像bmob和leancloud這類后臺云服務的流行有一段日子了，使用這些服務使一些web、app的開發周期大大縮減。這對于小團隊和初創公司尤為方便。
但這并不意味著不再需要自己開發后臺。不是因為他們提供的服務不夠全面(相反，我倒認為這類服務將向著全面、便捷、快速發展)，而是因為很多公司和產品，為了保持服務的質量和穩定，突出自己產品的特性，需要自己定制自己的后臺，有針對性的去優化某些模塊。
云服務作為大眾服務平臺難以為每個產品做定制。
類似于游戲引擎，如今各個平臺都不缺乏優秀的游戲引擎。可是仍有公司和團隊耗費大量的成本自研游戲引擎，就是希望能配合自己的游戲系統，完美地展現自己的游戲。
一樣的，后臺云服務和自定制的后臺，是相交但永遠不會重合的關系。 他們彼此之間相互影響，共同進步。
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/81419.html
摘要：因為路由層面受業務影響很大，經常修改一些功能的行為，所以后來大部分測試都是針對層面的單元測試。在我了解的過程中，我發現中文網絡上對的討論非常分散，于是我創建了中文社區，到年末已經有個注冊用戶和個帖子了。 https://jysperm.me/2016/02/programming-of-2015/ 從 2014 年末開始開發的一個互聯網金融項目終于在今年三月份上線了，這是一個 Node...
摘要：因為路由層面受業務影響很大，經常修改一些功能的行為，所以后來大部分測試都是針對層面的單元測試。在我了解的過程中，我發現中文網絡上對的討論非常分散，于是我創建了中文社區，到年末已經有個注冊用戶和個帖子了。 https://jysperm.me/2016/02/programming-of-2015/ 從 2014 年末開始開發的一個互聯網金融項目終于在今年三月份上線了，這是一個 Node...
摘要：擴展應用模塊功能介紹擴展應用由很多部分組成，其中主要模塊為為了避免由于翻譯原因導致的問題，因此在下文中對相關模塊的稱呼一律采用上面的英文。附錄官方開發文檔英建議有英文閱讀能力的人閱讀此文檔。 概述 本文通過對chrome插件的各個部分進行快速的介紹，從而讓大家了解插件各個部分的關系，并且知道如何將其進行組裝成一個完整的chrome插件。 由于chrome官方文檔中對于如何從零開發一個c...
摘要：我們的產品覆蓋了和，目前項目全都架在的云引擎之上。我們的方案是把業務代碼從中抽出來了，做成了移動端，這樣業務能在和中共用，移動端是基于的云引擎環境下開發的。在這個過程中，云引擎和都發揮了重要作用。 【玩轉 LeanCloud 】活動開發經驗分享： 作者：黃濤 大家好，我是 htoooth，在一家電商公司做 Node.js 開發，愛折騰，喜歡追新語言，像 golang、elixir、cl...
閱讀 561·2023-04-26 02:58
閱讀 2301·2021-09-27 14:01
閱讀 3605·2021-09-22 15:57
閱讀 1168·2019-08-30 15:56
閱讀 1043·2019-08-30 15:53
閱讀 787·2019-08-30 15:52
閱讀 645·2019-08-26 14:01
閱讀 2157·2019-08-26 13:41
