🏠TechKoala
📚 所有文章 🏷️ 标签 📂 分类 🛠️ 工具 📱 软件 👤 关于
🏠TechKoala

使用 Cloudflare Workers 和 KV 构建在线 Todo 应用

TechKoala  收录于  类别 Web
     约 784 字   预计阅读 4 分钟 

本文介绍如何使用 Cloudflare Workers 和 KV 存储构建一个无服务器的在线 Todo 应用。这是继 Google Drive 列表应用之后的又一个 Cloudflare Workers 实践项目。

  • Cloudflare Workers：提供无服务器运行环境
  • Workers KV：键值存储系统
  • HTML/CSS/JavaScript：前端界面
  • 无需传统服务器
  • 全球边缘部署
  • 低延迟响应
  • 高可用性

  1. Cloudflare 账户

    • 免费账户即可
    • 需要验证邮箱

  2. Wrangler CLI 工具

    bash

    npm install -g @cloudflare/wrangler

  3. API 密钥

    • 登录 Cloudflare 控制台
    • 生成 API Token
    • 设置适当的权限

bash

# 创建新项目
wrangler generate todo-app

# 配置 wrangler.toml
name = "todo-app"
type = "webpack"
account_id = "your-account-id"
workers_dev = true

toml

# wrangler.toml
kv_namespaces = [
  { binding = "TODO_STORE", id = "your-kv-namespace-id" }
]

javascript

async function createTodo(request) {
  const body = await request.json();
  const id = Date.now().toString();
  await TODO_STORE.put(id, JSON.stringify({
    id,
    text: body.text,
    completed: false
  }));
  return new Response(JSON.stringify({ success: true }), {
    headers: { 'Content-Type': 'application/json' }
  });
}

javascript

async function getTodos() {
  const list = await TODO_STORE.list();
  const todos = await Promise.all(
    list.keys.map(async key => {
      const value = await TODO_STORE.get(key.name);
      return JSON.parse(value);
    })
  );
  return new Response(JSON.stringify(todos), {
    headers: { 'Content-Type': 'application/json' }
  });
}

html

<!DOCTYPE html>
<html>
<head>
  <title>Todo App</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="container">
    <h1>Todo List</h1>
    <form id="todo-form">
      <input type="text" id="todo-input" placeholder="添加新任务...">
      <button type="submit">添加</button>
    </form>
    <ul id="todo-list"></ul>
  </div>
  <script src="app.js"></script>
</body>
</html>

css

.container {
  max-width: 600px;
  margin: 0 auto;
  padding: 20px;
}

.todo-item {
  display: flex;
  align-items: center;
  padding: 10px;
  border-bottom: 1px solid #eee;
}

.todo-item.completed {
  text-decoration: line-through;
  color: #888;
}

javascript

document.getElementById('todo-form').addEventListener('submit', async (e) => {
  e.preventDefault();
  const input = document.getElementById('todo-input');
  const text = input.value.trim();
  
  if (text) {
    await createTodo({ text });
    input.value = '';
    await updateTodoList();
  }
});

async function updateTodoList() {
  const todos = await getTodos();
  const list = document.getElementById('todo-list');
  list.innerHTML = todos.map(todo => `
    <li class="todo-item ${todo.completed ? 'completed' : ''}">
      <input type="checkbox" ${todo.completed ? 'checked' : ''}>
      <span>${todo.text}</span>
      <button onclick="deleteTodo('${todo.id}')">删除</button>
    </li>
  `).join('');
}

bash

# 发布到 Cloudflare Workers
wrangler publish

# 查看部署状态
wrangler tail
  1. 添加新任务
  2. 标记完成状态
  3. 删除任务
  4. 数据持久化
  5. 性能测试
  • 实现任务缓存
  • 批量操作优化
  • 减少 API 调用
  • 添加任务分类
  • 实现任务提醒
  • 支持多用户
  • 数据导出功能
更新于 2024-11-25
 , , Serverless, Web开发
 | 主页