gpt4 book ai didi

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

转载 作者:我是一只小鸟 更新时间:2023-03-08 14:31:38 30 4
gpt4 key购买 nike

🎄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

                        
                      
  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 ; 。


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

最后此篇关于在Vue中体验LeanCloud无后台轻量级数据存储服务的文章就讲到这里了,如果你想了解更多关于在Vue中体验LeanCloud无后台轻量级数据存储服务的内容请搜索CFSDN的文章或继续浏览相关文章,希望大家以后支持我的博客! 。

30 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com