Three-minute experience using laf to develop a simple "Todo List"
We will quickly experience laf cloud development by developing a simple "Todo" function on laf.dev .
Preparation
- You need to register an account on laf.dev .
- Log in to laf.dev and click the
新建button to create an empty application. - After the application is successfully launched, click the "Development" button on the right to enter the "Development Console" of the application. Next, we will develop the function of the first
lafapplication in the "Development Console".
Write cloud functions
First you need to create a cloud function.
Then write the following code in get-list cloud function. After writing, remember to find the word发布in the upper right corner and click Publish.
plain text ANTLR4 Bash C C# css CoffeeScript CMake Dart Django Docker EJS Erlang Git Go GraphQL Groovy HTML Java JavaScript JSON JSX Kotlin LaTeX less Lua Makefile markdown MATLAB Markup Objective-C Perl PHP PowerShell .properties Protocol Buffers Python R Ruby Sass (Sass) Sass (Scss) Scheme SQL Shell Swift SVG TSX TypeScript WebAssembly YAML XML import cloud from '@lafjs/cloud' const db = cloud. database() export async function main(ctx: FunctionContext) { // query data from the list collection const res = await db. collection('list'). get() // return to the front end return res } According to the method just now, we will create add-todo del-todo update-todo , three cloud functions, and write the codes respectively.
add-todo
plain text ANTLR4 Bash C C# css CoffeeScript CMake Dart Django Docker EJS Erlang Git Go GraphQL Groovy HTML Java JavaScript JSON JSX Kotlin LaTeX less Lua Makefile markdown MATLAB Markup Objective-C Perl PHP PowerShell .properties Protocol Buffers Python R Ruby Sass (Sass) Sass (Scss) Scheme SQL Shell Swift SVG TSX TypeScript WebAssembly YAML XML import cloud from '@lafjs/cloud' const db = cloud. database() export async function main(ctx: FunctionContext) { // ctx.body is the parameter passed in by the front end const data = ctx. body const res = await db.collection('list').add(data) return res } del-todo import cloud from '@lafjs/cloud' const db = cloud. database() export async function main(ctx: FunctionContext) { const { id } = ctx. body // delete data by id const res = db. collection("list"). where({ _id: id }). remove() return res } update-todo import cloud from '@lafjs/cloud' const db = cloud. database() export async function main(ctx: FunctionContext) { const { id, data } = ctx. body // _id is the only primary key and cannot be modified, so we delete it here delete data._id // Modify data according to id const res = await db.collection('list').where({ _id: id }).update(data) return res } :::tip Reminder again, every cloud function that has been changed needs to be发布to take effect! :::
create collection
The collection here corresponds to the table of the traditional database, which is used to store data.
front end
Here we use the Vue project to demonstrate the front end, React/Angular/small program, the operation is the same.
First you need to install laf-client-sdk in the front-end project.
plain text ANTLR4 Bash C C# css CoffeeScript CMake Dart Django Docker EJS Erlang Git Go GraphQL Groovy HTML Java JavaScript JSON JSX Kotlin LaTeX less Lua Makefile markdown MATLAB Markup Objective-C Perl PHP PowerShell .properties Protocol Buffers Python R Ruby Sass (Sass) Sass (Scss) Scheme SQL Shell Swift SVG TSX TypeScript WebAssembly YAML XML npm install laf-client-sdk Remember the page we just created the project, we need to go back there and find <APPID> we need to use.
Import and create a cloud object. It should be noted here that <APPID> needs to be replaced with your own.
plain text ANTLR4 Bash C C# css CoffeeScript CMake Dart Django Docker EJS Erlang Git Go GraphQL Groovy HTML Java JavaScript JSON JSX Kotlin LaTeX less Lua Makefile markdown MATLAB Markup Objective-C Perl PHP PowerShell .properties Protocol Buffers Python R Ruby Sass (Sass) Sass (Scss) Scheme SQL Shell Swift SVG TSX TypeScript WebAssembly YAML XML import { Cloud } from "laf-client-sdk"; // import // create cloud object const cloud = new Cloud({ baseUrl: "https://<AppID>.laf.dev", // <AppID> here needs to be replaced with your own AppID getAccessToken: () => '', // here is empty first });Then we call our cloud functions where the frontend needs them.
plain text ANTLR4 Bash C C# css CoffeeScript CMake Dart Django Docker EJS Erlang Git Go GraphQL Groovy HTML Java JavaScript JSON JSX Kotlin LaTeX less Lua Makefile markdown MATLAB Markup Objective-C Perl PHP PowerShell .properties Protocol Buffers Python R Ruby Sass (Sass) Sass (Scss) Scheme SQL Shell Swift SVG TSX TypeScript WebAssembly YAML XML async function getList() { // Call the get-list cloud function without passing parameters 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, }; // Call add-todo to pass in the parameter obj await cloud.invoke("add-todo", obj); newTodo. value = ""; getList(); } async function complete(index, id) { list.value[index].complete = !list.value[index].complete; // Call update-todo to pass in parameters await cloud.invoke("update-todo", { id, data: list.value[index], }); } async function del(id) { // Call del-todo to pass in parameters await cloud.invoke("del-todo", { id }); getList(); }So far we have completed the core functions of the project, and you can also download the code template to experience it. Template address: https://github.com/labring/laf-examples/tree/main/laf-todo-demo
:::tip need to modify <AppID> in src/App.vue :::
