使用 Laf 云开发快速实现 Todo 应用

使用 Laf 云开发快速实现 Todo 应用

前言

本文将带你快速上手 Laf 云开发平台,通过构建一个简单的 Todo 应用来体验 Laf 的核心功能。Laf 是一款开箱即用的云开发平台,提供了云函数、数据库等后端服务,让开发者可以专注于业务逻辑而无需搭建复杂的基础设施。

准备工作

在开始之前,你需要完成以下准备工作:

  1. 注册 Laf 平台账号
  2. 登录后创建一个新的应用
  3. 等待应用启动完成后,进入开发控制台

数据库设计

我们的 Todo 应用需要存储任务列表,因此需要创建一个集合(相当于传统数据库中的表):

  1. 在开发控制台中点击"集合"选项
  2. 创建一个名为"list"的新集合
  3. 这个集合将自动拥有 _id 主键字段

云函数开发

云函数是 Laf 的核心功能,它运行在云端,可以处理业务逻辑并与数据库交互。我们需要创建以下几个云函数:

1. 获取任务列表

创建 get-list 云函数,用于查询所有待办事项:

import cloud from '@lafjs/cloud'

const db = cloud.database()
export async function main(ctx: FunctionContext) {
  const res = await db.collection('list').get()
  return res
}

2. 添加新任务

创建 add-todo 云函数,用于添加新的待办事项:

import cloud from '@lafjs/cloud'

const db = cloud.database()
export async function main(ctx: FunctionContext) {
  const data = ctx.body
  const res = await db.collection('list').add(data)
  return res
}

3. 删除任务

创建 del-todo 云函数,用于删除指定待办事项:

import cloud from '@lafjs/cloud'

const db = cloud.database()
export async function main(ctx: FunctionContext) {
  const { id } = ctx.body
  const res = db.collection("list").where({ _id: id }).remove()
  return res
}

4. 更新任务状态

创建 update-todo 云函数,用于修改任务完成状态:

import cloud from '@lafjs/cloud'

const db = cloud.database()
export async function main(ctx: FunctionContext) {
  const { id, data } = ctx.body
  delete data._id
  const res = await db.collection('list').where({ _id: id }).update(data)
  return res
}

重要提示:每个云函数修改后都需要点击"发布"按钮才能使更改生效。

前端集成

前端可以使用任何框架(Vue、React、Angular 或小程序),这里以 Vue 为例:

1. 安装 SDK

首先安装 Laf 客户端 SDK:

npm install laf-client-sdk

2. 初始化 Cloud 对象

在项目中初始化 Cloud 对象,需要替换 <AppID> 为你自己的应用 ID:

import { Cloud } from "laf-client-sdk";

const cloud = new Cloud({
  baseUrl: "https://<AppID>.laf.run",
  getAccessToken: () => '', // 无认证时可留空
});

3. 调用云函数

在前端代码中调用我们创建的云函数:

// 获取任务列表
async function getList() {
  const res = await cloud.invoke("get-list");
  list.value = res.data;
}

// 添加新任务
async function submit() {
  if (!newTodo.value) return;

  const obj = {
    name: newTodo.value,
    complete: false,
  };
  await cloud.invoke("add-todo", obj);
  newTodo.value = "";
  getList();
}

// 更新任务状态
async function complete(index, id) {
  list.value[index].complete = !list.value[index].complete;
  await cloud.invoke("update-todo", {
    id,
    data: list.value[index],
  });
}

// 删除任务
async function del(id) {
  await cloud.invoke("del-todo", { id });
  getList();
}

总结

通过这个简单的 Todo 应用,我们体验了 Laf 云开发的核心功能:

  1. 快速创建云函数处理业务逻辑
  2. 使用内置数据库存储数据
  3. 通过 SDK 轻松实现前后端交互

Laf 的这种开发模式大大简化了后端开发流程,让开发者可以专注于业务实现而非基础设施搭建。你可以基于这个示例继续扩展功能,如添加用户认证、任务分类等更多特性。

创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

温姬尤Lee

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值