- Java锁的逻辑(结合对象头和ObjectMonitor)
- 还在用饼状图?来瞧瞧这些炫酷的百分比可视化新图形(附代码实现)⛵
- 自动注册实体类到EntityFrameworkCore上下文,并适配ABP及ABPVNext
- 基于Sklearn机器学习代码实战
🎄Hi~ 大家好,我是小鑫同学,一位长期从事前端开发的编程爱好者,我将使用更为实用的案例输出更多的编程知识,同时我信奉分享是成长的唯一捷径,在这里也希望我的每一篇文章都能成为你技术落地的参考~ 。
作为一个前端开发小伙伴,你在做一款自己的 App 、小程序或 H5 网页时如果需要存储列表数据你是怎么做的,自学后端编程搞一套?部署服务还需要花服务器的钱,不能盈利的个人小项目肯定是不合适的,其实各种平台有提供一些 ServerLess 云服务,微信小程序的云开发、 Uniapp 的 UniCloud 及其早年在做安卓时就体验过得 Bmob 后端云,都是主打 ServerLess 技术,基于费用、文档完善情况、使用体验,今天推荐一个名为 LeanCloud 的平台,这个平台其实也并不陌生,如果你使用vuepress搭建博客集成过评论系统,那么你很有可能已经注册过这个平台的账号了,下面我将创建一个Vue3项目来教你如何使用 LeanCloud 实现列表的正删改查.
推荐你Fork 【项目模板】Vue3+Vite3+Ts4 项目来开始实验环境的搭建,组件库推荐使用AntdV,或你自己使用最熟悉的组件库; 。
npm i --save ant-design-vue
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');
LeanCloud 是一款领先的 ServerLess 云服务,为产品开发提供强有力的后端支持,后端系统的开发和维护并非是一个会写接口这么简单的一件事情,如果没有实打实的后端经验,那么我推荐专业的事情由专业的团队负责; 。
ServerLess 云服务一个关键的注意事项就是费用问题,尤其是对于学习期的前端小伙伴,一个低价、免费的云服务就能搞得定的才是最合适的,有变现能力的产品另说,你看看下图中的开发版能够满足将你的想法变成现实吗?
注册账号就不说了哈,你可以先来到 控制台 点击做上角来创建一个测试应用,创建好后其实LeanCloud提供了很多的功能,我们只需要关注第一个数据存储菜单中的第一项机构化数据即可; 。
PS:在设置中的应用凭证是一个比较敏感的信息,但是接下来我们就要用到,请你注意这块内容的保密和使用; 。
选择 JavaScript版本 版本; 。
npm install leancloud-storage --save
import AV from 'leancloud-storage';
AV.init({
appId: "",
appKey: "",
serverURL: "",
});
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的文章或继续浏览相关文章,希望大家以后支持我的博客! 。
我正在运行一个辅助角色,并检查 Azure 上托管的存储中是否存在数据。当我将连接字符串用于经典类型的存储时,我的代码可以正常工作,但是当我连接到 V2 Azure 存储时,它会抛出此异常。 “远程服
在我的应用程序的主页上,我正在进行 AJAX 调用以获取应用程序各个部分所需的大量数据。该调用如下所示: var url = "/Taxonomy/GetTaxonomyList/" $.getJSO
大家好,我正在尝试将我的商店导入我的 Vuex Route-Gard。 路由器/auth-guard.js import {store} from '../store' export default
我正在使用 C# 控制台应用程序 (.NET Core 3.1) 从 Azure Blob 存储读取大量图像文件并生成这些图像的缩略图。新图像将保存回 Azure,并将 Blob ID 存储在我们的数
我想将 Mlflow 设置为具有以下组件: 后端存储(本地):在本地使用 SQLite 数据库存储 Mlflow 实体(run_id、params、metrics...) 工件存储(远程):使用 Az
我正在使用 C# 控制台应用程序 (.NET Core 3.1) 从 Azure Blob 存储读取大量图像文件并生成这些图像的缩略图。新图像将保存回 Azure,并将 Blob ID 存储在我们的数
我想将 Mlflow 设置为具有以下组件: 后端存储(本地):在本地使用 SQLite 数据库存储 Mlflow 实体(run_id、params、metrics...) 工件存储(远程):使用 Az
我的 Windows 计算机上的本地文件夹中有一些图像。我想将所有图像上传到同一容器中的同一 blob。 我知道如何使用 Azure Storage SDKs 上传单个文件BlockBlobServi
我尝试发出 GET 请求来获取我的 Azure Blob 存储帐户的帐户详细信息,但每次都显示身份验证失败。谁能判断形成的 header 或签名字符串是否正确或是否存在其他问题? 代码如下: cons
这是用于编写 JSON 的 NeutralinoJS 存储 API。是否可以更新 JSON 文件(推送数据),而不仅仅是用新的 JS 对象覆盖数据。怎么做到的??? // Javascript
我有一个并行阶段设置,想知道是否可以在嵌套阶段之前运行脚本,所以像这样: stage('E2E-PR-CYPRESS') { when { allOf {
我想从命令行而不是从GUI列出VirtualBox VM的详细信息。我对存储细节特别感兴趣。 当我在GUI中单击VM时,可以看到包括存储部分在内的详细信息: 但是到目前为止,我还没有找到通过命令行执行
我有大约 3500 个防洪设施,我想将它们表示为一个网络来确定流动路径(本质上是一个有向图)。我目前正在使用 SqlServer 和 CTE 来递归检查所有节点及其上游组件,只要上游路径没有 fork
谁能告诉我 jquery data() 在哪里存储数据以及何时删除以及如何删除? 如果我用它来存储ajax调用结果,会有性能问题吗? 例如: $("body").data("test", { myDa
有人可以建议如何为 Firebase 存储中的文件设置备份。我能够备份数据库,但不确定如何为 firebase 存储中的文件(我有图像)设置定期备份。 最佳答案 如何进行 Firebase 存储的本地
我最近开始使用 firebase 存储和 firebase 功能。现在我一直在开发从功能到存储的文件上传。 我已经让它工作了(上传完成并且文件出现在存储部分),但是,图像永远保持这样(永远在右侧加载)
我想只允许用户将文件上传到他们自己的存储桶中,最大文件大小为 1MB,仍然允许他们删除文件。我添加了以下内容: match /myusers/{userId}/{allPaths=**} { al
使用生命周期管理策略将容器的内容从冷访问层移动到存档。我正在尝试以下策略,希望它能在一天后将该容器中的所有文件移动到存档层,但事实并非如此在职的。我设置了选择标准“一天未使用后”。 这是 json 代
对于连接到 Azure 存储端点,有 http 和 https 两个选项。 第一。 https 会带来开销,可能是 5%-10%,但我不支付同一个数据中心的费用。 第二。 http 更快,但 Auth
有人可以帮我理解这一点吗?我创建了Virtual Machine in Azure running Windows Server 2012 。我注意到 Azure 自动创建了一个存储帐户。当我进入该存
我是一名优秀的程序员,十分优秀!