資訊專欄INFORMATION COLUMN
摘要：云存儲問題，帳號系統(tǒng)，多端同步最開始只想做瀏覽器本地的存儲，使用提供的存在本地就。具體解決方案云存儲及帳號系統(tǒng)使用提供的存儲服務(wù)解決。
0. 目錄
要開發(fā)的是什么項目
1.1 想法開端 1.2 應(yīng)該有什么功能?
開發(fā)需要解決的核心問題
具體解決方案
3.1 帳號系統(tǒng) 3.2 存儲服務(wù) 3.3 使用`LeanEngine`做反防盜鏈中轉(zhuǎn)接口 3.4 Chrome 插件實現(xiàn)
對去后端化的看法
1. 要開發(fā)的是什么項目?一個Chrome插件，用來保存瀏覽網(wǎng)頁時看到的喜歡的圖片。
1.1 想法開端在 pixiv 翻圖時看到一些喜歡的插畫，看完就隨手翻過去了，沒有保存。為什么呢？ 因為以我對自己的了解，圖片下載下來，就相當(dāng)于放進(jìn)了垃圾桶。 并不是因為本地的文件管理有多亂，而是因為，幾乎沒有用鼠標(biāo)打開文件管理器的習(xí)慣。
現(xiàn)在我獲取信息的流量入口最常用的只有兩個：1. 終端 2. 瀏覽器
于是乎，一個想法油然而生：
把插畫存到瀏覽器吧！
于是就立刻構(gòu)思，動手寫了這款插件。
1.2 應(yīng)該有什么功能?功能很簡單，
保存操作：1. 對圖片點擊右鍵 2. 選擇"保存到瀏覽器.." 之類的選項
查看操作：1. 點擊插件圖標(biāo) 查看保存過的圖片。
其它：1. 圖片同步到云端，也可保存到瀏覽器本地。2. 既然要保存到云端，自然需要賬號系統(tǒng)
核心問題有兩個，一個是數(shù)據(jù)云存儲問題，一個是圖片防盜鏈問題。
云存儲問題，帳號系統(tǒng)，多端同步
最開始只想做瀏覽器本地的存儲，使用Chrome提供的localStorage存在本地就。
后來因為localStorage并不支持?jǐn)?shù)據(jù)庫語法查詢，有很多不便。使用過程中又發(fā)現(xiàn)多端同步在體驗上的優(yōu)越性，決定要把存儲放到云上。
圖片防盜鏈問題
看了些資料，解決方式基本可以分為兩種。
一類使用前端js嵌入iframe解決，優(yōu)點是解決方式簡單，問題是Chrome插件不支持頁面嵌入式的js腳本。所以這個方案pass。
第二類使用后臺服務(wù)器做反防盜鏈措施，作為中轉(zhuǎn)給前端使用。優(yōu)點是不受chrome插件的各種安全機制的限制，缺點是需要后臺支持，增加工作量和資源成本。
使用第二類完成。
云存儲及帳號系統(tǒng)使用LeanCloud提供的存儲服務(wù)解決。
反防盜鏈接口使用LeanCloud提供的云引擎搭建NodeJs后臺。
啰嗦一句，為什么要使用LeanCloud?
一是對我的需求可以做到完全免費，二是它們的文檔實在是太xx的好用了。
參照：數(shù)據(jù)存儲入門教程 · JavaScript
實現(xiàn)過程基本照抄這個教程的代碼。后臺賬號系統(tǒng)包括對賬號的重復(fù)檢測、密碼加密、session等都已經(jīng)實現(xiàn)。
我們要做的，就是調(diào)用前端的這幾個關(guān)鍵方法，實現(xiàn)簡單的注冊、登陸、退出:
// 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 - 當(dāng)前用戶信息
// https://leancloud.cn/docs/leanstorage_guide-js.html#當(dāng)前用戶
var currentUser = AV.User.current();
// 退出登陸
AV.User.logOut();
3.2 存儲服務(wù)
使用賬號系統(tǒng)為每個用戶添加身份信息后，存儲部分就只需要把數(shù)據(jù) + 用戶身份信息一同上傳或下載就可以了。
照樣只貼關(guān)鍵方法
// 初始化類(在數(shù)據(jù)庫中表現(xiàn)為數(shù)據(jù)表`ImageRepo`)和實例(數(shù)據(jù)庫中表現(xiàn)為一條數(shù)據(jù))
this.ImageRepo = AV.Object.extend("ImageRepo");
var repo = new this.ImageRepo();
// 填充數(shù)據(jù)
repo.put("username", "xxx");
// 上傳數(shù)據(jù)
repo.save().then(function (repo) {
}, function (error) {
});
// 下載數(shù)據(jù)
// 初始化對"ImageRepo"表的查詢
var query = new AV.Query("ImageRepo");
// 查詢條件為 username字段等于"xxx"
query.equalTo("username", "xxx");
// 查詢
query.find().then(function(results) {
// 遍歷results
// 在頁面添加解決防盜鏈問題后的圖片
}, function(error) {
});
3.3 使用LeanEngine做反防盜鏈中轉(zhuǎn)接口
要實現(xiàn)的效果是:
我有一個防盜鏈圖片連接abc.com/xxx.png。
我的接口url是http://codeli.leanapp.cn/image?url=xxx。
訪問http://codeli.leanapp.cn/image?url=abc.com/xxx.png可訪問原圖，不受防盜鏈措施限制。
主要原理很簡單，后臺處理圖片請求時更改header中的referer字段，將結(jié)果作為response返回。
關(guān)于這部分的實現(xiàn)，歡迎閱讀我的另一篇文章，就不再贅述：
服務(wù)器作防盜鏈圖片中轉(zhuǎn)，nodejs 上手項目簡明教程
關(guān)于LeanEngin的使用，文檔如下，使用方法非常簡單。
云引擎快速入門
云引擎支持NodeJS Python PHP JAVA
只需要下載云引擎命令行工具lean，然后輸入幾行命令就可以建立一個你熟悉的web框架。
然后，使用你熟悉的語言編寫反防盜鏈實現(xiàn)就行了。
有了 3.1~3.3 的實現(xiàn)，這部分就是簡單的插件部署和業(yè)務(wù)邏輯了。
Chrome 插件結(jié)構(gòu)如圖：
主要業(yè)務(wù)：
在popup窗口中添加注冊 登陸 退出 等業(yè)務(wù)。
打開popup 窗口時從云端獲取指定賬號下保存的圖片信息，并展示。若未登陸，則從瀏覽器localStorage獲取并展示。
background script 中添加右鍵菜單項: 當(dāng)目標(biāo)是圖片時，顯示Keep image in browser。
點擊Keep image in browser, 執(zhí)行保存業(yè)務(wù)邏輯: 若登陸了，保存到云端。若未登錄，保存到瀏覽器localStorage。
4. 最后，對去后端化的看法具體實現(xiàn)見我的github項目: KeepImageInBrowser
插件Web Store地址： Favorite Image
前段時間在知乎上看到了一個問題,我也順便說下自己的看法。
web后端會不會變得越來越不需要?
像bmob和leancloud這類后臺云服務(wù)的流行有一段日子了，使用這些服務(wù)使一些web、app的開發(fā)周期大大縮減。這對于小團隊和初創(chuàng)公司尤為方便。
但這并不意味著不再需要自己開發(fā)后臺。不是因為他們提供的服務(wù)不夠全面(相反，我倒認(rèn)為這類服務(wù)將向著全面、便捷、快速發(fā)展)，而是因為很多公司和產(chǎn)品，為了保持服務(wù)的質(zhì)量和穩(wěn)定，突出自己產(chǎn)品的特性，需要自己定制自己的后臺，有針對性的去優(yōu)化某些模塊。
云服務(wù)作為大眾服務(wù)平臺難以為每個產(chǎn)品做定制。
類似于游戲引擎，如今各個平臺都不缺乏優(yōu)秀的游戲引擎。可是仍有公司和團隊耗費大量的成本自研游戲引擎，就是希望能配合自己的游戲系統(tǒng)，完美地展現(xiàn)自己的游戲。
一樣的，后臺云服務(wù)和自定制的后臺，是相交但永遠(yuǎn)不會重合的關(guān)系。 他們彼此之間相互影響，共同進(jìn)步。
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/81419.html
摘要：因為路由層面受業(yè)務(wù)影響很大，經(jīng)常修改一些功能的行為，所以后來大部分測試都是針對層面的單元測試。在我了解的過程中，我發(fā)現(xiàn)中文網(wǎng)絡(luò)上對的討論非常分散，于是我創(chuàng)建了中文社區(qū)，到年末已經(jīng)有個注冊用戶和個帖子了。 https://jysperm.me/2016/02/programming-of-2015/ 從 2014 年末開始開發(fā)的一個互聯(lián)網(wǎng)金融項目終于在今年三月份上線了，這是一個 Node...
摘要：因為路由層面受業(yè)務(wù)影響很大，經(jīng)常修改一些功能的行為，所以后來大部分測試都是針對層面的單元測試。在我了解的過程中，我發(fā)現(xiàn)中文網(wǎng)絡(luò)上對的討論非常分散，于是我創(chuàng)建了中文社區(qū)，到年末已經(jīng)有個注冊用戶和個帖子了。 https://jysperm.me/2016/02/programming-of-2015/ 從 2014 年末開始開發(fā)的一個互聯(lián)網(wǎng)金融項目終于在今年三月份上線了，這是一個 Node...
摘要：擴展應(yīng)用模塊功能介紹擴展應(yīng)用由很多部分組成，其中主要模塊為為了避免由于翻譯原因?qū)е碌膯栴}，因此在下文中對相關(guān)模塊的稱呼一律采用上面的英文。附錄官方開發(fā)文檔英建議有英文閱讀能力的人閱讀此文檔。 概述 本文通過對chrome插件的各個部分進(jìn)行快速的介紹，從而讓大家了解插件各個部分的關(guān)系，并且知道如何將其進(jìn)行組裝成一個完整的chrome插件。 由于chrome官方文檔中對于如何從零開發(fā)一個c...
摘要：我們的產(chǎn)品覆蓋了和，目前項目全都架在的云引擎之上。我們的方案是把業(yè)務(wù)代碼從中抽出來了，做成了移動端，這樣業(yè)務(wù)能在和中共用，移動端是基于的云引擎環(huán)境下開發(fā)的。在這個過程中，云引擎和都發(fā)揮了重要作用。 【玩轉(zhuǎn) LeanCloud 】活動開發(fā)經(jīng)驗分享： 作者：黃濤 大家好，我是 htoooth，在一家電商公司做 Node.js 開發(fā)，愛折騰，喜歡追新語言，像 golang、elixir、cl...
閱讀 661·2023-04-26 02:58
閱讀 2383·2021-09-27 14:01
閱讀 3683·2021-09-22 15:57
閱讀 1268·2019-08-30 15:56
閱讀 1102·2019-08-30 15:53
閱讀 860·2019-08-30 15:52
閱讀 791·2019-08-26 14:01
閱讀 2228·2019-08-26 13:41
