使用 Laf 云开发快速实现 Todo 应用
前言
本文将带你快速上手 Laf 云开发平台,通过构建一个简单的 Todo 应用来体验 Laf 的核心功能。Laf 是一款开箱即用的云开发平台,提供了云函数、数据库等后端服务,让开发者可以专注于业务逻辑而无需搭建复杂的基础设施。
准备工作
在开始之前,你需要完成以下准备工作:
- 注册 Laf 平台账号
- 登录后创建一个新的应用
- 等待应用启动完成后,进入开发控制台
数据库设计
我们的 Todo 应用需要存储任务列表,因此需要创建一个集合(相当于传统数据库中的表):
- 在开发控制台中点击"集合"选项
- 创建一个名为"list"的新集合
- 这个集合将自动拥有 _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 云开发的核心功能:
- 快速创建云函数处理业务逻辑
- 使用内置数据库存储数据
- 通过 SDK 轻松实现前后端交互
Laf 的这种开发模式大大简化了后端开发流程,让开发者可以专注于业务实现而非基础设施搭建。你可以基于这个示例继续扩展功能,如添加用户认证、任务分类等更多特性。
创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考