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

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

🚀技术&代码分享

• 我在 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

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);
	}
	);

总结

操作数据的增删改查就是这么简单的几个函数就能搞定，在页面的实现中掺杂了一些组件的操作等逻辑就不一一粘贴了。