在Vue中体验LeanCloud无后台轻量级数据存储服务

??Hi~ 大家好，我是小鑫同学，一位长期从事前端开发的编程爱好者，我将使用更为实用的案例输出更多的编程知识，同时我信奉分享是成长的唯一捷径，在这里也希望我的每一篇文章都能成为你技术落地的参考~

??技术&代码分享

• 我在 IT200 总结技术学习；
• 我在 1024Code 在线编写代码；
• 我在 掘金 分享技术文章；
• 我在 Github 参与开源学习；

??推荐几个好用的工具

• var-conv 适用于VSCode IDE的代码变量名称快速转换工具
• generator-vite-plugin 快速生成Vite插件模板项目
• generator-babel-plugin 快速生成Babel插件模板项目

进入正题

作为一个前端开发小伙伴，你在做一款自己的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

2. 导入模块：

import AV from 'leancloud-storage';

3. 初始化AV对象，需要用到应用凭证：

AV.init({
 appId: "",
 appKey: "",
 serverURL: "",
});

4. 启用调试模式：

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；

---

如果看完觉得有收获，欢迎点赞、评论、分享支持一下。你的支持和肯定，是我坚持写作的动力~