使用 LeanCloud 服務作一站式 Chrome 插件開發 —— Favorite Image

時間 2019-11-15

標籤使用 leancloud 服務 chrome 插件開發 favorite image 欄目雲服務简体版

原文原文鏈接

做者：李信棟javascript

1. 要開發的是什麼項目?

一個 Chrome 插件，用來保存瀏覽網頁時看到的喜歡的圖片。html

1.1 想法開端

在 pixiv 翻圖時看到一些喜歡的插畫，看完就隨手翻過去了，沒有保存。爲何呢？由於以我對本身的瞭解，圖片下載下來，就至關於放進了垃圾桶。並非由於本地的文件管理有多亂，而是由於，幾乎沒有用鼠標打開文件管理器的習慣。前端

如今我獲取信息的流量入口最經常使用的只有兩個：1. 終端 2. 瀏覽器java

因而乎，一個想法油然而生：node

把插畫存到瀏覽器吧！git

因而就馬上構思，動手寫了這款插件。github

1.2 應該有什麼功能?

功能很簡單：web

保存操做：1. 對圖片點擊右鍵 2. 選擇「保存到瀏覽器」之類的選項
查看操做：1. 點擊插件圖標查看保存過的圖片。
其它：1. 圖片同步到雲端，也可保存到瀏覽器本地。2. 既然要保存到雲端，天然須要帳號系統

2. 開發須要解決的核心問題

核心問題有兩個，一個是數據雲存儲問題，一個是圖片防盜鏈問題。chrome

雲存儲問題，賬號系統，多端同步
最開始只想作瀏覽器本地的存儲，使用 Chrome 提供的 localStorage 存在本地。數據庫

後來由於 localStorage 並不支持數據庫語法查詢，有不少不便。使用過程當中又發現多端同步在體驗上的優越性，決定要把存儲放到雲上。

圖片防盜鏈問題
看了些資料，解決方式基本能夠分爲兩種。

一類使用前端 js 嵌入 iframe 解決，優勢是解決方式簡單，問題是 Chrome 插件不支持頁面嵌入式的 js 腳本。因此這個方案 pass。

第二類使用後臺服務器作反防盜鏈措施，做爲中轉給前端使用。優勢是不受 chrome 插件的各類安全機制的限制，缺點是須要後臺支持，增長工做量和資源成本。
使用第二類完成。

3. 具體解決方案

雲存儲及賬號系統使用 LeanCloud 提供的存儲服務解決。

反防盜連接口使用 LeanCloud 提供的雲引擎搭建 NodeJs 後臺。

囉嗦一句，爲何要使用 LeanCloud?
一是對個人需求能夠作到徹底免費，二是它們的文檔實在是太xx的好用了。

3.1 賬號系統

參照：數據存儲入門教程 · 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) {
});複製代碼