在Vue中體驗LeanCloud無後臺輕量級資料儲存服務

FE小鑫同學發表於2023-03-08
VueCloud

?Hi~ 大家好，我是小鑫同學，一位長期從事前端開發的程式設計愛好者，我將使用更為實用的案例輸出更多的程式設計知識，同時我信奉分享是成長的唯一捷徑，在這裡也希望我的每一篇文章都能成為你技術落地的參考~

?技術&程式碼分享

  • 我在 IT200 總結技術學習；
  • 我在 1024Code 線上編寫程式碼；
  • 我在 掘金 分享技術文章；
  • 我在 Github 參與開源學習；

?推薦幾個好用的工具

進入正題

作為一個前端開發小夥伴，你在做一款自己的App、小程式或H5網頁時如果需要儲存列表資料你是怎麼做的，自學後端程式設計搞一套？部署服務還需要花伺服器的錢，不能盈利的個人小專案肯定是不合適的，其實各種平臺有提供一些 ServerLess 雲服務，微信小程式的雲開發、Uniapp的UniCloud及其早年在做安卓時就體驗過得 Bmob 後端雲，都是主打 ServerLess 技術，基於費用、文件完善情況、使用體驗，今天推薦一個名為 LeanCloud 的平臺，這個平臺其實也並不陌生，如果你使用vuepress搭建部落格整合過評論系統，那麼你很有可能已經註冊過這個平臺的賬號了，下面我將建立一個Vue3專案來教你如何使用 LeanCloud 實現列表的正刪改查。

準備實驗環境

推薦你Fork【專案模板】Vue3+Vite3+Ts4專案來開始實驗環境的搭建，元件庫推薦使用AntdV，或你自己使用最熟悉的元件庫；

  1. 安裝元件依賴模組：
    npm i --save ant-design-vue
  2. 實驗時建議全域性安裝元件：
    import { createApp } from 'vue';
import Antd from 'ant-design-vue';
import App from './App';
import 'ant-design-vue/dist/antd.css';

const app = createApp(App);

app.use(Antd).mount('#app');
  3. UI部分由查詢區域，操作區域及列表區域組成樣式僅供參考，大家各自最佳化；

LeanCloud 介紹

LeanCloud 是一款領先的 ServerLess 雲服務，為產品開發提供強有力的後端支援，後端系統的開發和維護並非是一個會寫介面這麼簡單的一件事情，如果沒有實打實的後端經驗，那麼我推薦專業的事情由專業的團隊負責；

ServerLess 雲服務一個關鍵的注意事項就是費用問題，尤其是對於學習期的前端小夥伴，一個低價、免費的雲服務就能搞得定的才是最合適的，有變現能力的產品另說，你看看下圖中的開發版能夠滿足將你的想法變成現實嗎？

整合及使用LeanCloud

註冊賬號就不說了哈，你可以先來到控制檯點選做上角來建立一個測試應用，建立好後其實LeanCloud提供了很多的功能，我們只需要關注第一個資料儲存選單中的第一項機構化資料即可；

PS：在設定中的應用憑證是一個比較敏感的資訊，但是接下來我們就要用到，請你注意這塊內容的保密和使用；

安裝依賴模組

選擇JavaScript版本版本；

  1. 安裝模組：
npm install leancloud-storage --save
  1. 匯入模組：
import AV from 'leancloud-storage';
  1. 初始化AV物件，需要用到應用憑證：
AV.init({
 appId: "",
 appKey: "",
 serverURL: "",
});
  1. 啟用除錯模式：
AV.debug.enable();

實現列表資料新增：

實現資料的新增需要簡單的四步操作，宣告class、構建物件、為屬性賦值、執行save函式，在一切順利的情況下你在控制檯就能看到新增了一個名為Product的Class，並且新增了一條資料，透過控制檯也能夠清晰看到傳送到LeanCloud的資料。

// 宣告 class
const Product = AV.Object.extend("Product");
// 構建物件
const product = new Product();
// 為屬性賦值
product.set("productName", productName);
product.set("price", price);
product.set("stock", stock);
product.set("countryOrigin", countryOrigin);
// 將物件儲存到雲端
product.save().then(
  (_) => {
    message.success('儲存成功');
    productFormRef.value.resetFields();
    visibleEditProductDialog.value = false;
    editMode.value = EditMode.ADD;
    queryProductList(null, null);
  },
  (error) => {
    message.error(error.message);
  }
);

實現列表資料更新：

資料更新和資料新增是類似的操作，但是需要傳入資料的ID來進行更新，也就是第一步是不一樣的，後面的步驟還是為屬性賦值、執行save函式；

const product = AV.Object.createWithoutData("Product", selectedRowKeys.value[0]);
product.set("productName", productName);
product.set("price", price);
product.set("stock", stock);
product.set("countryOrigin", countryOrigin);
product.save().then(
  (_) => {
    message.success('更新成功');
    productFormRef.value.resetFields();
    visibleEditProductDialog.value = false;
    editMode.value = EditMode.ADD;
    queryProductList(null, null);
  },
  (error) => {
    message.error(error.message);
  }
);

實現列表資料刪除：

資料刪除依然是需要ID的支援，透過ID來刪除指定的資料，批次刪除的功能可以透過幫助文件檢視；

const product = AV.Object.createWithoutData("Product", selectedRowKeys.value[0]);
product.destroy().then(
  (_) => {
    message.success('刪除成功');
    queryProductList(null, null);
  },
  (error) => {
    message.error(error.message);
  }
);

總結

運算元據的增刪改查就是這麼簡單的幾個函式就能搞定，在頁面的實現中摻雜了一些元件的操作等邏輯就不一一貼上了。由於也沒有考慮許可權的部分，所以說使用者憑證請替換成自己的使用呦，同時歡迎大家對著300行程式碼進行CodeReview，把意見和建議寫到評論裡面吧~

PS：完整程式碼見1024Code；

如果看完覺得有收穫，歡迎點贊、評論、分享支援一下。你的支援和肯定，是我堅持寫作的動力~

相關文章