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

時間 2020-02-20

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

原文原文鏈接

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

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

1.1 想法開端

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

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

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

把插畫存到瀏覽器吧！github

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

1.2 應該有什麼功能?

功能很簡單chrome

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

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

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

雲存儲問題，賬號系統，多端同步
最開始只想作瀏覽器本地的存儲，使用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) {
});