经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » JS/JS库/框架 » Vue.js » 查看文章
在Vue中体验LeanCloud无后台轻量级数据存储服务
来源:cnblogs  作者:FE小鑫同学  时间:2023/3/8 10:59:54  对本文有异议

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

??技术&代码分享

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

??推荐几个好用的工具

进入正题

作为一个前端开发小伙伴,你在做一款自己的App、小程序或H5网页时如果需要存储列表数据你是怎么做的,自学后端编程搞一套?部署服务还需要花服务器的钱,不能盈利的个人小项目肯定是不合适的,其实各种平台有提供一些 ServerLess 云服务,微信小程序的云开发、UniappUniCloud及其早年在做安卓时就体验过得 Bmob 后端云,都是主打 ServerLess 技术,基于费用、文档完善情况、使用体验,今天推荐一个名为 LeanCloud 的平台,这个平台其实也并不陌生,如果你使用vuepress搭建博客集成过评论系统,那么你很有可能已经注册过这个平台的账号了,下面我将创建一个Vue3项目来教你如何使用 LeanCloud 实现列表的正删改查。

准备实验环境

推荐你Fork【项目模板】Vue3+Vite3+Ts4项目来开始实验环境的搭建,组件库推荐使用AntdV,或你自己使用最熟悉的组件库;

  1. 安装组件依赖模块:
    1. npm i --save ant-design-vue
  2. 实验时建议全局安装组件:
    1. import { createApp } from 'vue';
    2. import Antd from 'ant-design-vue';
    3. import App from './App';
    4. import 'ant-design-vue/dist/antd.css';
    5. const app = createApp(App);
    6. app.use(Antd).mount('#app');
  3. UI部分由查询区域,操作区域及列表区域组成样式仅供参考,大家各自优化;

LeanCloud 介绍

LeanCloud 是一款领先的 ServerLess 云服务,为产品开发提供强有力的后端支持,后端系统的开发和维护并非是一个会写接口这么简单的一件事情,如果没有实打实的后端经验,那么我推荐专业的事情由专业的团队负责;

ServerLess 云服务一个关键的注意事项就是费用问题,尤其是对于学习期的前端小伙伴,一个低价、免费的云服务就能搞得定的才是最合适的,有变现能力的产品另说,你看看下图中的开发版能够满足将你的想法变成现实吗?

集成及使用LeanCloud

注册账号就不说了哈,你可以先来到控制台点击做上角来创建一个测试应用,创建好后其实LeanCloud提供了很多的功能,我们只需要关注第一个数据存储菜单中的第一项机构化数据即可;

PS:在设置中的应用凭证是一个比较敏感的信息,但是接下来我们就要用到,请你注意这块内容的保密和使用;

安装依赖模块

选择JavaScript版本版本;

  1. 安装模块:
  1. npm install leancloud-storage --save
  1. 导入模块:
  1. import AV from 'leancloud-storage';
  1. 初始化AV对象,需要用到应用凭证:
  1. AV.init({
  2. appId: "",
  3. appKey: "",
  4. serverURL: "",
  5. });
  1. 启用调试模式:
  1. AV.debug.enable();

实现列表数据新增:

实现数据的新增需要简单的四步操作,声明class、构建对象、为属性赋值、执行save函数,在一切顺利的情况下你在控制台就能看到新增了一个名为Product的Class,并且新增了一条数据,通过控制台也能够清晰看到发送到LeanCloud的数据。

  1. // 声明 class
  2. const Product = AV.Object.extend("Product");
  3. // 构建对象
  4. const product = new Product();
  5. // 为属性赋值
  6. product.set("productName", productName);
  7. product.set("price", price);
  8. product.set("stock", stock);
  9. product.set("countryOrigin", countryOrigin);
  10. // 将对象保存到云端
  11. product.save().then(
  12. (_) => {
  13. message.success('保存成功');
  14. productFormRef.value.resetFields();
  15. visibleEditProductDialog.value = false;
  16. editMode.value = EditMode.ADD;
  17. queryProductList(null, null);
  18. },
  19. (error) => {
  20. message.error(error.message);
  21. }
  22. );

实现列表数据更新:

数据更新和数据新增是类似的操作,但是需要传入数据的ID来进行更新,也就是第一步是不一样的,后面的步骤还是为属性赋值、执行save函数;

  1. const product = AV.Object.createWithoutData("Product", selectedRowKeys.value[0]);
  2. product.set("productName", productName);
  3. product.set("price", price);
  4. product.set("stock", stock);
  5. product.set("countryOrigin", countryOrigin);
  6. product.save().then(
  7. (_) => {
  8. message.success('更新成功');
  9. productFormRef.value.resetFields();
  10. visibleEditProductDialog.value = false;
  11. editMode.value = EditMode.ADD;
  12. queryProductList(null, null);
  13. },
  14. (error) => {
  15. message.error(error.message);
  16. }
  17. );

实现列表数据删除:

数据删除依然是需要ID的支持,通过ID来删除指定的数据,批量删除的功能可以通过帮助文档查看;

  1. const product = AV.Object.createWithoutData("Product", selectedRowKeys.value[0]);
  2. product.destroy().then(
  3. (_) => {
  4. message.success('删除成功');
  5. queryProductList(null, null);
  6. },
  7. (error) => {
  8. message.error(error.message);
  9. }
  10. );

总结

操作数据的增删改查就是这么简单的几个函数就能搞定,在页面的实现中掺杂了一些组件的操作等逻辑就不一一粘贴了。由于也没有考虑权限的部分,所以说用户凭证请替换成自己的使用呦,同时欢迎大家对着300行代码进行CodeReview,把意见和建议写到评论里面吧~

PS:完整代码见1024Code


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

原文链接:https://www.cnblogs.com/it200/p/17190866.html

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号