Tutorial Tutorial Tutorial Developer Platform Developer Platform Developer Platform ~53 phút ~53 min ~53 នាទី Đồng bộ 2026-06-10 Synced 2026-06-10 ធ្វើសមកាល 2026-06-10
Tạo toàn bộ danh sách ứng dụng Jamstack Build a todo list Jamstack application បង្កើតបញ្ជីការងារត្រូវធ្វើ Jamstack
Hướng dẫn chi tiết đồng bộ từ docs Cloudflare — mỗi section có backlink tới đúng vị trí trên trang gốc. Detailed guide synced from Cloudflare docs — each section links to the matching anchor on the official page. មគ្គុទ្ទេសក៍លម្អិតធ្វើសមកាលពី docs Cloudflare — ផ្នែកនីមួយៗមានតំណទៅទីតាំងត្រូវគ្នានៅទំព័រផ្លូវការ។
← Danh mục ← Catalog ← បញ្ជីGiải thích nhanh Quick context បរិបទរហ័ស
Thuộc Developer Platform — thực hành triển khai code, API và dữ liệu trên edge/serverless. Tutorial «Xây dựng todo list Jamstack ứng dụng» giúp bạn làm quen luồng triển khai thật — phù hợp đọc trước khi mở tài liệu gốc tiếng Anh. Docs gốc chia khoảng 6 bước chính; bản tóm tắt dưới đây giúp bạn nắm khung trước khi làm theo từng lệnh.
This tutorial explains how to build a todo list application using HTML, CSS, and JavaScript.
ការបង្រៀននេះពន្យល់ពីរបៀបបង្កើតកម្មវិធីបញ្ជីការងារត្រូវធ្វើដោយប្រើ HTML, CSS និង JavaScript ។
Lưu ý Note ចំណាំ
Lưu ý trước khi làm Notes before you start ចំណាំមុនពេលចាប់ផ្តើម
- Đây là bản tóm tắt trên Orange Cloud Learning Hub — không thay thế tài liệu chính thức.
- Luôn mở liên kết «Tài liệu gốc» bên dưới khi cần lệnh CLI, snippet code và ảnh minh họa đầy đủ.
- Yêu cầu trước (từ docs): All of the tutorials assume you have already đã hoàn thành hướng dẫn Get started, which gets you set up with a Cloudflare Workers account, C3 ↗, and Wrangler.
- Docs Cloudflare cập nhật thường xuyên — đối chiếu ngày «Rà soát lần cuối» trên trang gốc khi triển khai production.
- This is a summary on Orange Cloud Learning Hub — it does not replace the official documentation.
- Open the Official docs link below for CLI commands, code snippets, and full screenshots.
- Prerequisites (from docs): All of the tutorials assume you have already completed the Get started guide, which gets you set up with a Cloudflare Workers account, C3 ↗, and Wrangler.
- Cloudflare docs change frequently — verify the Last reviewed date on the official page before production use.
- នេះគឺជាការសង្ខេបនៅលើ Orange Cloud Learning Hub — វាមិនជំនួសឯកសារផ្លូវការទេ។
- បើកតំណឯកសារផ្លូវការខាងក្រោមសម្រាប់ពាក្យបញ្ជា CLI កូដ snippets និងរូបថតអេក្រង់ពេញ។
- តម្រូវការជាមុន (ពីឯកសារ)៖ ការបង្រៀនទាំងអស់សន្មត់ថាអ្នកបានបញ្ចប់ការណែនាំ Get started រួចហើយ ដែលធ្វើឲ្យអ្នករៀបចំជាមួយគណនី Cloudflare Workers C3 ↗ និង Wrangler ។
- Cloudflare ឯកសារផ្លាស់ប្តូរជាញឹកញាប់ — ផ្ទៀងផ្ទាត់កាលបរិច្ឆេទដែលបានពិនិត្យចុងក្រោយនៅលើទំព័រផ្លូវការមុនពេលប្រើប្រាស់ផលិតកម្ម។
Tài liệu gốc — rà soát lần cuối: about 2 years ago Official docs — last reviewed: about 2 years ago ឯកសារផ្លូវការ — ពិនិត្យចុងក្រោយ: about 2 years ago
Overview Overview ទិដ្ឋភាពទូទៅ
Phần «Tổng quan» — đọc hướng dẫn bên dưới, dùng liên kết docs gốc để xem ảnh minh họa và tab cấu hình đầy đủ.
Read the "Overview" section below — open the official docs link for full screenshots and configuration tabs.
អានផ្នែក «ទិដ្ឋភាពទូទៅ» ខាងក្រោម — បើកតំណ docs ផ្លូវការសម្រាប់រូបភាព និង tab កំណត់។
Trong hướng dẫn này, bạn sẽ xây dựng một ứng dụng danh sách todo bằng cách sử dụng HTML, CSS và JavaScript. Dữ liệu ứng dụng sẽ được lưu trữ trong Workers KV.
In this tutorial, you will build a todo list application using HTML, CSS, and JavaScript. The application data will be stored in Workers KV.
នៅក្នុងមេរៀននេះ អ្នកនឹងបង្កើតកម្មវិធីបញ្ជីការងារត្រូវធ្វើដោយប្រើ HTML, CSS និង JavaScript ។ ទិន្នន័យកម្មវិធីនឹងត្រូវបានរក្សាទុកនៅក្នុង __TERM29_1_6>Workers0._0>
Trước khi bắt đầu dự án này, bạn nên có một số kinh nghiệm với HTML, CSS và JavaScript. Bạn sẽ học:
Before starting this project, you should have some experience with HTML, CSS, and JavaScript. You will learn:
មុនពេលចាប់ផ្តើមគម្រោងនេះ អ្នកគួរតែមានបទពិសោធន៍ខ្លះជាមួយ HTML, CSS, និង JavaScript។ អ្នកនឹងរៀន៖
- Cách xây dựng với Workers cho phép bạn tập trung vào việc viết mã và vận chuyển các sản phẩm hoàn thành.
- Làm thế nào việc thêm Workers KV làm cho hướng dẫn này một giới thiệu tuyệt vời để xây dựng đầy đủ, ứng dụng dựa trên dữ liệu.
- How building with Workers makes allows you to focus on writing code and ship finished products.
- How the addition of Workers KV makes this tutorial a great introduction to building full, data-driven applications.
- របៀបបង្កើតជាមួយ Workers អនុញ្ញាតឱ្យអ្នកផ្តោតលើការសរសេរកូដ និង ship ផលិតផលដែលបានបញ្ចប់។
- របៀបដែលការបន្ថែមនៃ Workers KV ធ្វើឱ្យការបង្រៀននេះក្លាយជាការណែនាំដ៏ល្អក្នុងការបង្កើតកម្មវិធីដែលដំណើរការដោយទិន្នន័យពេញលេញ។
Nếu bạn muốn xem mã đã hoàn thành cho dự án này, hãy tìm project on GitHub ↗ và tham khảo live demo ↗ để xem xét những gì bạn sẽ xây dựng.
If you would like to see the finished code for this project, find the project on GitHub ↗ and refer to the live demo ↗ to review what you will be building.
ប្រសិនបើអ្នកចង់ឃើញលេខកូដដែលបានបញ្ចប់សម្រាប់គម្រោងនេះ សូមស្វែងរក គម្រោងនៅលើ GitHub> និង href="https://todos.examples.workers.dev/" class="link" target="_blank" rel="noopener noreferrer">ការបង្ហាញសាកល្បងផ្ទាល់ ↗ ដើម្បីពិនិត្យមើលឡើងវិញនូវអ្វីដែលអ្នកនឹងត្រូវសាងសង់។
Liên kết liên quan (docs Cloudflare) Related links (Cloudflare docs) តំណពាក់ព័ន្ធ (docs Cloudflare)
Trước khi bạn bắt đầu Before you start មុនពេលអ្នកចាប់ផ្តើម
Phần «Trước khi bắt đầu» — đọc hướng dẫn bên dưới, dùng liên kết docs gốc để xem ảnh minh họa và tab cấu hình đầy đủ.
Read the "Before you start" section below — open the official docs link for full screenshots and configuration tabs.
អានផ្នែក «មុនពេលអ្នកចាប់ផ្តើម» ខាងក្រោម — បើកតំណ docs ផ្លូវការសម្រាប់រូបភាព និង tab កំណត់។
Tất cả các hướng dẫn giả định rằng bạn đã hoàn thành Get started guide, điều này làm cho bạn thiết lập với tài khoản Cloudflare Workers, C3 ↗ và Wrangler.
All of the tutorials assume you have already completed the Get started guide, which gets you set up with a Cloudflare Workers account, C3 ↗, and Wrangler.
ការបង្រៀនទាំងអស់សន្មត់ថាអ្នកបានបញ្ចប់ __TERM15__/get-started/guide/" class="link" target="_blank" rel="noopener noreferrer">__TER_ get seta គណនី Cloudflare Workers, C3 ↗ និង
Liên kết liên quan (docs Cloudflare) Related links (Cloudflare docs) តំណពាក់ព័ន្ធ (docs Cloudflare)
1.Điều Tạo dự án mới Workers 1. Create a new Workers project 1. បង្កើតគម្រោង Workers ថ្មី។
Phần «Tạo Workers dự án mới» — đọc hướng dẫn bên dưới, dùng liên kết docs gốc để xem ảnh minh họa và tab cấu hình đầy đủ.
Read the "1. Create a new Workers project" section below — open the official docs link for full screenshots and configuration tabs.
អានផ្នែក «1. បង្កើតគម្រោង Workers ថ្មី។» ខាងក្រោម — បើកតំណ docs ផ្លូវការសម្រាប់រូបភាព និង tab កំណត់។
Đầu tiên, sử dụng công cụ create-cloudflare ↗ CLI để tạo một dự án mới Cloudflare Workers có tên
todos. Trong hướng dẫn này, bạn sẽ sử dụng mẫu Hello World mặc định để tạo một dự án Workers.First, use the create-cloudflare ↗ CLI tool to create a new Cloudflare Workers project named
todos. In this tutorial, you will use the default Hello World template to create a Workers project.ជាដំបូង សូមប្រើ create-cloudflare ↗ __TERM51_6_6 to create new_TER_6_tool គម្រោង Workers មានឈ្មោះ
todos។ នៅក្នុងមេរៀននេះ អ្នកនឹងប្រើគំរូ Hello World លំនាំដើមដើម្បីបង្កើតគម្រោង Workers។Mã sản phẩm: npm yarn pnpm
npm yarn pnpm
npm yarn pnpm
text
npm create cloudflare@latest -- todos text
yarn create cloudflare todos text
pnpm create cloudflare@latest todosĐể cài đặt, hãy chọn các tùy chọn sau:
For setup, select the following options:
សម្រាប់ការដំឡើង សូមជ្រើសរើសជម្រើសខាងក្រោម៖
- Đối với Bạn muốn bắt đầu với gì?, chọn
Hello World example. - Đối với bạn muốn sử dụng mẫu nào?, chọn
Worker only. - Đối với Ngôn ngữ nào bạn muốn sử dụng?, chọn
JavaScript. - Đối với Do you want to use git for version control?, chọn
Yes. - Đối với Bạn muốn triển khai ứng dụng của mình?, chọn
No(chúng tôi sẽ thực hiện một số thay đổi trước khi triển khai).
- For What would you like to start with?, choose
Hello World example. - For Which template would you like to use?, choose
Worker only. - For Which language do you want to use?, choose
JavaScript. - For Do you want to use git for version control?, choose
Yes. - For Do you want to deploy your application?, choose
No(we will be making some changes before deploying).
- សម្រាប់ តើអ្នកចង់ចាប់ផ្តើមជាមួយអ្វី? សូមជ្រើសរើស
Hello World example។ - សម្រាប់ តើគំរូមួយណាដែលអ្នកចង់ប្រើ? សូមជ្រើសរើស
Worker only។ - សម្រាប់ តើភាសាមួយណាដែលអ្នកចង់ប្រើ? សូមជ្រើសរើស
JavaScript។ - សម្រាប់ តើអ្នកចង់ប្រើ git សម្រាប់ការគ្រប់គ្រងកំណែដែរឬទេ? សូមជ្រើសរើស
Yes។ - សម្រាប់ តើអ្នកចង់ដាក់ឱ្យប្រើប្រាស់កម្មវិធីរបស់អ្នកទេ? សូមជ្រើសរើស
No(យើងនឹងធ្វើការកែប្រែខ្លះមុនពេលដាក់ឱ្យប្រើប្រាស់)។
Di chuyển đến thư mục mới tạo của bạn:
Move into your newly created directory:
ផ្លាស់ទីទៅក្នុងថតដែលបានបង្កើតថ្មីរបស់អ្នក៖
Cửa sổ Terminal
Terminal window
បង្អួចស្ថានីយ
text
cd todosBên trong thư mục dự án
todos Workers mới của bạn, index.js đại diện cho điểm đầu vào ứng dụng Cloudflare Workers của bạn.Inside of your new
todos Worker project directory, index.js represents the entry point to your Cloudflare Workers application.នៅខាងក្នុងនៃ
todos ថតគម្រោងអ្នកធ្វើការថ្មីរបស់អ្នក index.js តំណាងឱ្យចំណុចចូលនៃកម្មវិធី Cloudflare Workers របស់អ្នក។Tất cả các yêu cầu HTTP đến cho một Nhân viên được chuyển đến fetch() handler dưới dạng đối tượng request. Sau khi một yêu cầu được nhận bởi Nhân viên, câu trả lời cấu trúc ứng dụng của bạn sẽ được trả về cho người dùng. Hướng dẫn này sẽ hướng dẫn bạn thông qua sự hiểu biết về cách mô hình yêu cầu / phản hồi hoạt động và làm thế nào bạn có thể sử dụng nó để xây dựng các ứng dụng đầy đủ chức năng.
All incoming HTTP requests to a Worker are passed to the fetch() handler as a request object. After a request is received by the Worker, the response your application constructs will be returned to the user. This tutorial will guide you through understanding how the request/response pattern works and how you can use it to build fully featured applications.
សំណើ HTTP ចូលទាំងអស់ទៅកាន់កម្មករនិយោជិតត្រូវបានបញ្ជូនទៅ fetch() handler as a noreferrer បន្ទាប់ពីសំណើត្រូវបានទទួលដោយកម្មករ ការឆ្លើយតបដែលបង្កើតកម្មវិធីរបស់អ្នកនឹងត្រូវប្រគល់ជូនអ្នកប្រើប្រាស់វិញ។ ការបង្រៀននេះនឹងណែនាំអ្នកតាមរយៈការយល់ដឹងពីរបៀបដែលគំរូសំណើ/ការឆ្លើយតបដំណើរការ និងរបៀបដែលអ្នកអាចប្រើវាដើម្បីបង្កើតកម្មវិធីដែលមានលក្ខណៈពិសេសពេញលេញ។
JavaScript Đánh giá
JavaScript
JavaScript
text
export default {
async fetch(request, env, ctx) {
return new Response("Hello World!");
},
};Trong tệp
index.js mặc định của bạn, bạn có thể thấy mẫu yêu cầu / phản hồi đó trong action. fetch xây dựng một Response mới với nội dung 'Hello World!'.In your default
index.js file, you can see that request/response pattern in action. The fetch constructs a new Response with the body text 'Hello World!'.នៅក្នុងឯកសារ
index.js លំនាំដើមរបស់អ្នក អ្នកអាចឃើញគំរូសំណើ/ការឆ្លើយតបនោះនៅក្នុងសកម្មភាព។ fetch បង្កើត Response ថ្មីជាមួយនឹងអត្ថបទ 'Hello World!'។Khi một Công nhân nhận được
request, Công nhân trả về câu trả lời mới được xây dựng cho khách hàng. Nhân viên của bạn sẽ phục vụ các câu trả lời mới trực tiếp từ Cloudflare's global network ↗ thay vì tiếp tục đến máy chủ gốc của bạn. Một máy chủ tiêu chuẩn sẽ chấp nhận yêu cầu và trả lời. Cloudflare Workers cho phép bạn trả lời bằng cách xây dựng câu trả lời trực tiếp trên mạng toàn cầu Cloudflare.When a Worker receives a
request, the Worker returns the newly constructed response to the client. Your Worker will serve new responses directly from Cloudflare's global network ↗ instead of continuing to your origin server. A standard server would accept requests and return responses. Cloudflare Workers allows you to respond by constructing responses directly on the Cloudflare global network.នៅពេលដែលកម្មករនិយោជិតទទួលបាន
request កម្មករនិយោជិតនឹងបញ្ជូនការឆ្លើយតបដែលបានបង្កើតថ្មីទៅ client។ បុគ្គលិករបស់អ្នកនឹងបម្រើការឆ្លើយតបថ្មីដោយផ្ទាល់ពី Cloudflare បណ្តាញសកលរបស់ ↗ ជំនួសឱ្យការបន្តទៅកាន់ម៉ាស៊ីនមេដើមរបស់អ្នក។ ម៉ាស៊ីនមេស្តង់ដារនឹងទទួលយកសំណើ និងឆ្លើយតបមកវិញ។ Cloudflare Workers អនុញ្ញាតឱ្យអ្នកឆ្លើយតបដោយបង្កើតការឆ្លើយតបដោយផ្ទាល់នៅលើបណ្តាញសកល Cloudflare ។Liên kết liên quan (docs Cloudflare) Related links (Cloudflare docs) តំណពាក់ព័ន្ធ (docs Cloudflare)
2.Đối với Xem chi tiết dự án 2. Review project details 2. ពិនិត្យព័ត៌មានលម្អិតអំពីគម្រោង
Phần «Review dự án details» — đọc hướng dẫn bên dưới, dùng liên kết docs gốc để xem ảnh minh họa và tab cấu hình đầy đủ.
Read the "2. Review project details" section below — open the official docs link for full screenshots and configuration tabs.
អានផ្នែក «2. ពិនិត្យព័ត៌មានលម្អិតអំពីគម្រោង» ខាងក្រោម — បើកតំណ docs ផ្លូវការសម្រាប់រូបភាព និង tab កំណត់។
Bất kỳ dự án nào bạn triển khai đến Cloudflare Workers có thể sử dụng các công cụ JavaScript hiện đại như ES modules,
npm gói và async/await ↗ chức năng để xây dựng ứng dụng của bạn. Ngoài việc viết Workers, bạn có thể sử dụng Workers để build full applications bằng cách sử dụng các công cụ và quy trình tương tự như trong hướng dẫn này.Any project you deploy to Cloudflare Workers can make use of modern JavaScript tooling like ES modules,
npm packages, and async/await ↗ functions to build your application. In addition to writing Workers, you can use Workers to build full applications using the same tooling and process as in this tutorial.គម្រោងណាមួយដែលអ្នកដាក់ពង្រាយទៅ Cloudflare Workers អាចប្រើប្រាស់ឧបករណ៍ JavaScript ទំនើបដូចជា ថ្នាក់ ES កូដ កញ្ចប់ កូដ និងបន្ទាត់ មុខងារ async/aawait> កម្មវិធីរបស់អ្នក បន្ថែមពីលើការសរសេរ Workers អ្នកអាចប្រើ Workers ដើម្បី កម្មវិធី ដោយប្រើឧបករណ៍ និងដំណើរការដូចគ្នាដូចនៅក្នុងមេរៀននេះ។
Trong hướng dẫn này, bạn sẽ xây dựng một ứng dụng danh sách todo chạy trên Workers cho phép đọc dữ liệu từ một cửa hàng KV và sử dụng dữ liệu để điền một câu trả lời HTML để gửi cho khách hàng.
In this tutorial, you will build a todo list application running on Workers that allows reading data from a KV store and using the data to populate an HTML response to send to the client.
នៅក្នុងមេរៀននេះ អ្នកនឹងបង្កើតកម្មវិធីបញ្ជីការងារត្រូវធ្វើដែលដំណើរការលើ Workers ដែលអនុញ្ញាតឱ្យអានទិន្នន័យពី data បង្កើតការឆ្លើយតប HTML ដើម្បីផ្ញើទៅ client ។
Công việc cần thiết để tạo ứng dụng này được chia thành ba nhiệm vụ:
The work needed to create this application is split into three tasks:
ការងារដែលត្រូវការដើម្បីបង្កើតកម្មវិធីនេះត្រូវបានបែងចែកជា ៣ កិច្ចការ៖
- Viết dữ liệu thành KV.
- Hiển thị dữ liệu từ KV.
- Thêm tất cả từ ứng dụng UI.
- Write data to KV.
- Rendering data from KV.
- Adding todos from the application UI.
- សរសេរទិន្នន័យទៅ KV ។
- កំពុងបង្ហាញទិន្នន័យពី KV ។
- ការបន្ថែមអ្វីដែលត្រូវធ្វើពី UI កម្មវិធី។
Đối với phần còn lại của hướng dẫn này, bạn sẽ hoàn thành mỗi nhiệm vụ, lặp lại trên ứng dụng của bạn, và sau đó xuất bản nó vào miền của riêng bạn.
For the remainder of this tutorial you will complete each task, iterating on your application, and then publish it to your own domain.
សម្រាប់នៅសល់នៃការបង្រៀននេះ អ្នកនឹងបញ្ចប់កិច្ចការនីមួយៗ ដោយធ្វើម្តងទៀតនៅលើកម្មវិធីរបស់អ្នក ហើយបន្ទាប់មកបោះផ្សាយវាទៅកាន់ដែនផ្ទាល់ខ្លួនរបស់អ្នក។
Liên kết liên quan (docs Cloudflare) Related links (Cloudflare docs) តំណពាក់ព័ន្ធ (docs Cloudflare)
3 Cái Viết dữ liệu thành KV 3. Write data to KV 3. សរសេរទិន្នន័យទៅ KV
Phần «Write data to KV» — đọc hướng dẫn bên dưới, dùng liên kết docs gốc để xem ảnh minh họa và tab cấu hình đầy đủ.
Read the "3. Write data to KV" section below — open the official docs link for full screenshots and configuration tabs.
អានផ្នែក «3. សរសេរទិន្នន័យទៅ KV» ខាងក្រោម — បើកតំណ docs ផ្លូវការសម្រាប់រូបភាព និង tab កំណត់។
Để bắt đầu, bạn cần hiểu làm thế nào để lấp đầy danh sách todo của bạn với dữ liệu thực tế. Để làm điều này, hãy sử dụng Cloudflare Workers KV - một kho giá trị khóa mà bạn có thể access bên trong Worker của bạn để đọc và viết dữ liệu.
To begin, you need to understand how to populate your todo list with actual data. To do this, use Cloudflare Workers KV — a key-value store that you can access inside of your Worker to read and write data.
ដើម្បីចាប់ផ្តើម អ្នកត្រូវយល់ពីរបៀបបញ្ចូលបញ្ជីការងារត្រូវធ្វើរបស់អ្នកជាមួយនឹងទិន្នន័យជាក់ស្តែង។ ដើម្បីធ្វើដូច្នេះបាន សូមប្រើ Cloudflare __TERM29_2_6 _aue_a_TERM29_2_6>_6_TERM access នៅខាងក្នុងកម្មកររបស់អ្នកដើម្បីអាន និងសរសេរទិន្នន័យ។
Để get started với KV, thiết lập không gian tên. Tất cả dữ liệu bộ nhớ đệm của bạn sẽ được lưu trữ bên trong không gian tên đó và, với cấu hình, bạn có thể access không gian tên đó bên trong Worker với một biến được xác định trước. Sử dụng Wrangler để tạo một không gian tên mới có tên
TODOS với kv namespace create command và nhận ID không gian tên liên quan bằng cách chạy lệnh sau trong thiết bị đầu cuối của bạn:To get started with KV, set up a namespace. All of your cached data will be stored inside that namespace and, with configuration, you can access that namespace inside the Worker with a predefined variable. Use Wrangler to create a new namespace called
TODOS with the kv namespace create command and get the associated namespace ID by running the following command in your terminal:ដើម្បី get started ជាមួយ KV សូមរៀបចំលំហឈ្មោះ។ ទិន្នន័យក្នុងឃ្លាំងសម្ងាត់របស់អ្នកទាំងអស់នឹងត្រូវបានរក្សាទុកនៅក្នុង namespace នោះ ហើយជាមួយនឹងការកំណត់រចនាសម្ព័ន្ធ អ្នកអាច access namespace នោះនៅខាងក្នុង Worker ជាមួយនឹងអថេរដែលបានកំណត់ជាមុន។ ប្រើ Wrangler ដើម្បីបង្កើត namespace ថ្មីហៅថា
TODOS ជាមួយ kv namespace បង្កើតពាក្យបញ្ជា និងទទួលបាន associated namespace ID ដោយដំណើរការពាក្យបញ្ជាខាងក្រោមនៅក្នុងស្ថានីយរបស់អ្នក៖Tạo không gian tên mới KV
Create a new KV namespace
បង្កើត KV namespace ថ្មី។
text
npx wrangler kv namespace create "TODOS" --previewKhông gian tên liên quan có thể được kết hợp với lá cờ
--preview để tương tác với không gian tên xem trước thay vì không gian tên sản xuất. Không gian tên có thể được thêm vào ứng dụng của bạn bằng cách xác định chúng trong cấu hình Wrangler của bạn. Sao chép ID không gian tên mới được tạo, và trong Wrangler configuration file của bạn, xác định một phím kv_namespaces để thiết lập không gian tên của bạn:The associated namespace can be combined with a
--preview flag to interact with a preview namespace instead of a production namespace. Namespaces can be added to your application by defining them inside your Wrangler configuration. Copy your newly created namespace ID, and in your Wrangler configuration file, define a kv_namespaces key to set up your namespace:associated namespace អាចត្រូវបានផ្សំជាមួយទង់
--preview ដើម្បីធ្វើអន្តរកម្មជាមួយ namespace ការមើលជាមុនជំនួសឱ្យ namespace ផលិតកម្ម។ Namespaces អាចត្រូវបានបន្ថែមទៅកម្មវិធីរបស់អ្នកដោយកំណត់ពួកវានៅក្នុងការកំណត់រចនាសម្ព័ន្ធ Wrangler របស់អ្នក។ ចម្លងលេខសម្គាល់ namespace ដែលទើបបង្កើតថ្មីរបស់អ្នក ហើយនៅក្នុង kv_namespaces គន្លឹះដើម្បីដំឡើងទំហំឈ្មោះរបស់អ្នក៖JSONC
JSONC
JSONC
text
{
"kv_namespaces": [
{
"binding": "TODOS",
"id": "<YOUR_ID>",
"preview_id": "<YOUR_PREVIEW_ID>"
}
]
}TOML
TOML
TOML
text
[[kv_namespaces]]
binding = "TODOS"
id = "<YOUR_ID>"
preview_id = "<YOUR_PREVIEW_ID>"Không gian tên được xác định,
TODOS, bây giờ sẽ có sẵn bên trong cơ sở mã của bạn. Với điều đó, đã đến lúc hiểu KV API. Không gian tên KV có ba phương pháp chính mà bạn có thể sử dụng để giao diện với bộ nhớ cache của bạn: get, put và delete.The defined namespace,
TODOS, will now be available inside of your codebase. With that, it is time to understand the KV API. A KV namespace has three primary methods you can use to interface with your cache: get, put, and delete.ចន្លោះឈ្មោះដែលបានកំណត់
TODOS ឥឡូវនេះនឹងមាននៅក្នុងមូលដ្ឋានកូដរបស់អ្នក។ ជាមួយនោះ វាដល់ពេលហើយដើម្បីស្វែងយល់អំពី __TERM60__5__0> KV namespace មានវិធីចម្បងបីដែលអ្នកអាចប្រើដើម្បីប៉ះជាមួយឃ្លាំងសម្ងាត់របស់អ្នក៖ get put និង delete។Bắt đầu lưu trữ dữ liệu bằng cách xác định một tập dữ liệu ban đầu, mà bạn sẽ đặt bên trong bộ nhớ cache bằng cách sử dụng phương pháp
put. Ví dụ sau đây xác định một đối tượng defaultData thay vì một mảng các mục todo. Bạn có thể muốn lưu trữ siêu dữ liệu và thông tin khác bên trong đối tượng bộ nhớ cache này sau này. Với đối tượng dữ liệu đó, hãy sử dụng JSON.stringify để thêm một chuỗi vào bộ nhớ cache:Start storing data by defining an initial set of data, which you will put inside of the cache using the
put method. The following example defines a defaultData object instead of an array of todo items. You may want to store metadata and other information inside of this cache object later on. Given that data object, use JSON.stringify to add a string into the cache:ចាប់ផ្តើមរក្សាទុកទិន្នន័យដោយកំណត់សំណុំទិន្នន័យដំបូង ដែលអ្នកនឹងដាក់នៅខាងក្នុងឃ្លាំងសម្ងាត់ដោយប្រើវិធីសាស្ត្រ
put ។ ឧទាហរណ៍ខាងក្រោមកំណត់វត្ថុ defaultData ជំនួសឱ្យអារេនៃធាតុដែលត្រូវធ្វើ។ អ្នកប្រហែលជាចង់រក្សាទុកទិន្នន័យមេតា និងព័ត៌មានផ្សេងទៀតនៅខាងក្នុងនៃវត្ថុឃ្លាំងសម្ងាត់នេះនៅពេលក្រោយ។ ដោយបានផ្ដល់វត្ថុទិន្នន័យនោះ សូមប្រើ JSON.stringify ដើម្បីបន្ថែមខ្សែអក្សរទៅក្នុងឃ្លាំងសម្ងាត់៖JavaScript Đánh giá
JavaScript
JavaScript
text
export default {
async fetch(request, env, ctx) {
const defaultData = {
todos: [
{
id: 1,
name: "Finish the Cloudflare Workers blog post",
completed: false,
},
],
};
await env.TODOS.put("data", JSON.stringify(defaultData));
return new Response("Hello World!");
},
};Workers KV là một kho dữ liệu toàn cầu nhất quán. Bất kỳ văn bản nào trong một khu vực sẽ được phản ánh ngay lập tức trong cùng một khu vực nhưng sẽ không ngay lập tức có sẵn ở các khu vực khác. Tuy nhiên, những chữ viết đó cuối cùng sẽ có sẵn ở khắp mọi nơi và tại thời điểm đó, Workers KV đảm bảo rằng dữ liệu trong mỗi khu vực sẽ nhất quán.
Workers KV is an eventually consistent, global datastore. Any writes within a region are immediately reflected within that same region but will not be immediately available in other regions. However, those writes will eventually be available everywhere and, at that point, Workers KV guarantees that data within each region will be consistent.
Workers KV គឺជាឃ្លាំងទិន្នន័យសកលដែលស្របគ្នាជាយថាហេតុ។ ការសរសេរណាមួយនៅក្នុងតំបន់មួយនឹងត្រូវបានឆ្លុះបញ្ចាំងភ្លាមៗនៅក្នុងតំបន់ដូចគ្នានោះ ប៉ុន្តែនឹងមិនមានភ្លាមៗនៅក្នុងតំបន់ផ្សេងទៀតទេ។ ទោះជាយ៉ាងណាក៏ដោយ នៅទីបំផុតការសរសេរទាំងនោះនឹងមាននៅគ្រប់ទីកន្លែង ហើយនៅចំណុចនោះ Workers KV ធានាថាទិន្នន័យនៅក្នុងតំបន់នីមួយៗនឹងមានភាពស៊ីសង្វាក់គ្នា។
Với sự hiện diện của dữ liệu trong bộ nhớ cache và giả định rằng bộ nhớ cache của bạn cuối cùng là nhất quán, mã này cần một điều chỉnh nhỏ: ứng dụng nên kiểm tra bộ nhớ cache và sử dụng giá trị của nó, nếu khóa tồn tại. Nếu không, bạn sẽ sử dụng
defaultData làm nguồn dữ liệu cho bây giờ (nó nên được thiết lập trong tương lai) và viết nó vào bộ nhớ cache để sử dụng trong tương lai. Sau khi phá vỡ mã thành một vài chức năng để đơn giản hóa, kết quả trông như thế này:Given the presence of data in the cache and the assumption that your cache is eventually consistent, this code needs a slight adjustment: the application should check the cache and use its value, if the key exists. If it does not, you will use
defaultData as the data source for now (it should be set in the future) and write it to the cache for future use. After breaking out the code into a few functions for simplicity, the result looks like this:ដោយសារវត្តមាននៃទិន្នន័យនៅក្នុងឃ្លាំងសម្ងាត់ និងការសន្មត់ថាឃ្លាំងសម្ងាត់របស់អ្នកនៅទីបំផុតត្រូវគ្នា កូដនេះត្រូវការការកែតម្រូវបន្តិចបន្តួច៖ កម្មវិធីគួរតែពិនិត្យមើលឃ្លាំងសម្ងាត់ ហើយប្រើតម្លៃរបស់វា ប្រសិនបើសោមាន។ ប្រសិនបើវាមិនដូច្នោះទេ អ្នកនឹងប្រើ
defaultData ជាប្រភពទិន្នន័យសម្រាប់ពេលនេះ (វាគួរតែត្រូវបានកំណត់នាពេលអនាគត) ហើយសរសេរវាទៅក្នុងឃ្លាំងសម្ងាត់សម្រាប់ការប្រើប្រាស់នាពេលអនាគត។ បន្ទាប់ពីបំបែកកូដទៅជាមុខងារមួយចំនួនសម្រាប់ភាពសាមញ្ញ លទ្ធផលមើលទៅដូចនេះ៖JavaScript Đánh giá
JavaScript
JavaScript
text
export default {
async fetch(request, env, ctx) {
const defaultData = {
todos: [
{
id: 1,
name: "Finish the Cloudflare Workers blog post",
completed: false,
},
],
};
const setCache = (data) => env.TODOS.put("data", data);
const getCache = () => env.TODOS.get("data");
let data;
const cache = await getCache();
if (!cache) {
await setCache(JSON.stringify(defaultData));
data = defaultData;
} else {
data = JSON.parse(cache);
}
return new Response(JSON.stringify(data));
},
};Liên kết liên quan (docs Cloudflare) Related links (Cloudflare docs) តំណពាក់ព័ន្ធ (docs Cloudflare)
Hiển thị dữ liệu từ KV Render data from KV បង្ហាញទិន្នន័យពី KV
Phần «Render data từ KV» — đọc hướng dẫn bên dưới, dùng liên kết docs gốc để xem ảnh minh họa và tab cấu hình đầy đủ.
Read the "Render data from KV" section below — open the official docs link for full screenshots and configuration tabs.
អានផ្នែក «បង្ហាញទិន្នន័យពី KV» ខាងក្រោម — បើកតំណ docs ផ្លូវការសម្រាប់រូបភាព និង tab កំណត់។
Do sự hiện diện của dữ liệu trong mã của bạn, đó là đối tượng dữ liệu ẩn cho ứng dụng của bạn, bạn nên lấy dữ liệu này và hiển thị nó trong giao diện người dùng.
Given the presence of data in your code, which is the cached data object for your application, you should take this data and render it in a user interface.
ដោយសារវត្តមាននៃទិន្នន័យនៅក្នុងកូដរបស់អ្នក ដែលជាវត្ថុទិន្នន័យក្នុងឃ្លាំងសម្ងាត់សម្រាប់កម្មវិធីរបស់អ្នក អ្នកគួរតែយកទិន្នន័យនេះ ហើយបង្ហាញវានៅក្នុងចំណុចប្រទាក់អ្នកប្រើប្រាស់។
Để làm điều này, hãy tạo một biến
html mới trong kịch bản Workers của bạn và sử dụng nó để xây dựng một mẫu tĩnh HTML mà bạn có thể phục vụ cho khách hàng. Trong fetch, xây dựng một Response mới với tiêu đề Content-Type: text/html và phục vụ nó cho khách hàng:To do this, make a new
html variable in your Workers script and use it to build up a static HTML template that you can serve to the client. In fetch, construct a new Response with a Content-Type: text/html header and serve it to the client:ដើម្បីធ្វើដូច្នេះ បង្កើតអថេរ
html នៅក្នុង Workers script របស់អ្នក ហើយប្រើវាដើម្បីបង្កើតគំរូ HTML ឋិតិវន្ត ដែលអ្នកអាចបម្រើដល់ client ។ នៅក្នុង fetch បង្កើត Response ថ្មីជាមួយនឹង Content-Type: text/html ហើយបម្រើវាទៅ client៖JavaScript Đánh giá
JavaScript
JavaScript
text
const html = `<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>Todos</title>
</head>
<body>
<h1>Todos</h1>
</body>
</html>
`;
async fetch (request, env, ctx) {
// previous code
return new Response(html, {
headers: {
'Content-Type': 'text/html'
}
});
}Bạn có một trang web tĩnh HTML đang được hiển thị và bạn có thể bắt đầu lấp đầy nó với dữ liệu. Trong cơ thể, thêm thẻ
div với một id của todos:You have a static HTML site being rendered and you can begin populating it with data. In the body, add a
div tag with an id of todos:អ្នកមានគេហទំព័រ HTML ឋិតិវន្តដែលកំពុងត្រូវបានបង្ហាញ ហើយអ្នកអាចចាប់ផ្តើមបញ្ចូលវាជាមួយនឹងទិន្នន័យ។ នៅក្នុងតួ បន្ថែមស្លាក
div ជាមួយនឹង id នៃ todos៖JavaScript Đánh giá
JavaScript
JavaScript
text
const html = `<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>Todos</title>
</head>
<body>
<h1>Todos</h1>
<div id="todos"></div>
</body>
</html>
`;Thêm một yếu tố
<script> ở cuối nội dung cơ thể có mảng todos. Đối với mỗi todo trong mảng, tạo một yếu tố div và đính kèm nó vào yếu tố todos HTML:Add a
<script> element at the end of the body content that takes a todos array. For each todo in the array, create a div element and appends it to the todos HTML element:បន្ថែមធាតុ
<script> នៅចុងបញ្ចប់នៃមាតិកាតួ ដែលយកអារេ todos។ សម្រាប់ todo នីមួយៗក្នុងអារេ បង្កើតធាតុ div ហើយបន្ថែមវាទៅ todos ធាតុ HTML៖JavaScript Đánh giá
JavaScript
JavaScript
text
const html = `<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>Todos</title>
</head>
<body>
<h1>Todos</h1>
<div id="todos"></div>
</body>
<script>
window.todos = []
var todoContainer = document.querySelector("#todos")
window.todos.forEach(todo => {
var el = document.createElement("div")
el.textContent = todo.name
todoContainer.appendChild(el)
})
</script>
</html>
`;Trang tĩnh của bạn có thể nhập
window.todos và hiển thị HTML dựa trên nó, nhưng bạn không thực sự thông qua bất kỳ dữ liệu nào từ KV. Để làm điều này, bạn sẽ cần phải thực hiện một số thay đổi.Your static page can take in
window.todos and render HTML based on it, but you have not actually passed in any data from KV. To do this, you will need to make a few changes.ទំព័រឋិតិវន្តរបស់អ្នកអាចចូល
window.todos ហើយបង្ហាញ HTML ដោយផ្អែកលើវា ប៉ុន្តែអ្នកពិតជាមិនបានឆ្លងកាត់ទិន្នន័យណាមួយពី KV ទេ។ ដើម្បីធ្វើដូចនេះអ្នកនឹងត្រូវធ្វើការផ្លាស់ប្តូរមួយចំនួន។Đầu tiên, biến
html của bạn sẽ thay đổi thành hàm. Chức năng này sẽ sử dụng đối số todos, sẽ chứa biến window.todos trong mẫu mã ở trên:First, your
html variable will change to a function. The function will take in a todos argument, which will populate the window.todos variable in the above code sample:ជាដំបូង អថេរ
html របស់អ្នកនឹងផ្លាស់ប្តូរទៅជាមុខងារមួយ។ មុខងារនឹងប្រើក្នុងអាគុយម៉ង់ todos ដែលនឹងបញ្ចូលអថេរ window.todos ក្នុងគំរូកូដខាងលើ៖JavaScript Đánh giá
JavaScript
JavaScript
text
const html = (todos) => `
<!doctype html>
<html>
<!-- existing content -->
<script>
window.todos = ${todos}
var todoContainer = document.querySelector("#todos")
// ...
<script>
</html>
`;Trong
fetch, sử dụng dữ liệu KV được lấy để gọi hàm html và tạo ra hàm Response dựa trên nó:In
fetch, use the retrieved KV data to call the html function and generate a Response based on it:នៅក្នុង
fetch ប្រើទិន្នន័យ KV ដែលបានទាញយក ដើម្បីហៅមុខងារ html ហើយបង្កើត Response ដោយផ្អែកលើវា៖JavaScript Đánh giá
JavaScript
JavaScript
text
async fetch (request, env, ctx) {
const body = html(JSON.stringify(data.todos).replace(/</g, '\\u003c'));
return new Response(body, {
headers: { 'Content-Type': 'text/html' },
});
}Bốn Thêm tất cả từ giao diện người dùng (UI) 4. Add todos from the user interface (UI) 4. បន្ថែមការងារត្រូវធ្វើពីចំណុចប្រទាក់អ្នកប្រើ (UI)
Phần «Thêm todos từ user interface (UI)» — đọc hướng dẫn bên dưới, dùng liên kết docs gốc để xem ảnh minh họa và tab cấu hình đầy đủ.
Read the "4. Add todos from the user interface (UI)" section below — open the official docs link for full screenshots and configuration tabs.
អានផ្នែក «4. បន្ថែមការងារត្រូវធ្វើពីចំណុចប្រទាក់អ្នកប្រើ (UI)» ខាងក្រោម — បើកតំណ docs ផ្លូវការសម្រាប់រូបភាព និង tab កំណត់។
Tại thời điểm này, bạn đã xây dựng một Cloudflare Worker lấy dữ liệu từ Cloudflare KV và hiển thị một trang tĩnh dựa trên Worker đó. Trang tĩnh đó đọc dữ liệu và tạo ra một danh sách todo dựa trên dữ liệu đó. Nhiệm vụ còn lại là tạo tất cả từ bên trong ứng dụng UI. Bạn có thể thêm todos bằng cách sử dụng KV API — cập nhật bộ nhớ cache bằng cách chạy
env.TODOS.put(newData).At this point, you have built a Cloudflare Worker that takes data from Cloudflare KV and renders a static page based on that Worker. That static page reads data and generates a todo list based on that data. The remaining task is creating todos from inside the application UI. You can add todos using the KV API — update the cache by running
env.TODOS.put(newData).នៅចំណុចនេះ អ្នកបានបង្កើត Cloudflare កម្មករដែលយកទិន្នន័យពី Cloudflare KV ហើយបង្ហាញទំព័រឋិតិវន្តដោយផ្អែកលើកម្មករនោះ។ ទំព័រឋិតិវន្តនោះអានទិន្នន័យ និងបង្កើតបញ្ជីការងារដែលត្រូវធ្វើដោយផ្អែកលើទិន្នន័យនោះ។ កិច្ចការដែលនៅសល់គឺបង្កើតការងារត្រូវធ្វើពីខាងក្នុង UI កម្មវិធី។ អ្នកអាចបន្ថែមការងារត្រូវធ្វើដោយប្រើ KV API — ធ្វើបច្ចុប្បន្នភាពឃ្លាំងសម្ងាត់ដោយដំណើរការ
env.TODOS.put(newData)។Để cập nhật một mục todo, bạn sẽ thêm một trình xử lý thứ hai trong kịch bản Workers của bạn, được thiết kế để theo dõi các yêu cầu
PUT đến /. Khi một cơ quan yêu cầu được nhận tại URL đó, Nhân viên sẽ gửi dữ liệu todo mới đến cửa hàng KV của bạn.To update a todo item, you will add a second handler in your Workers script, designed to watch for
PUT requests to /. When a request body is received at that URL, the Worker will send the new todo data to your KV store.ដើម្បីធ្វើបច្ចុប្បន្នភាពធាតុត្រូវធ្វើ អ្នកនឹងបន្ថែមឧបករណ៍ដោះស្រាយទីពីរនៅក្នុង Workers script របស់អ្នក ដែលត្រូវបានរចនាឡើងដើម្បីមើលការស្នើសុំ
PUT ទៅកាន់ /។ នៅពេលដែលអង្គភាពសំណើត្រូវបានទទួលនៅ URL នោះ កម្មករនឹងបញ្ជូនទិន្នន័យការងារត្រូវធ្វើថ្មីទៅកាន់ហាង KV របស់អ្នក។Thêm chức năng mới này vào
fetch: nếu phương pháp yêu cầu là PUT, nó sẽ lấy cơ thể yêu cầu và cập nhật bộ nhớ cache.Add this new functionality in
fetch: if the request method is a PUT, it will take the request body and update the cache.បន្ថែមមុខងារថ្មីនេះនៅក្នុង
fetch៖ ប្រសិនបើវិធីសាស្ត្រស្នើសុំគឺ PUT វានឹងយកតួសំណើ ហើយធ្វើបច្ចុប្បន្នភាពឃ្លាំងសម្ងាត់។JavaScript Đánh giá
JavaScript
JavaScript
text
export default {
async fetch(request, env, ctx) {
const setCache = (data) => env.TODOS.put("data", data);
if (request.method === "PUT") {
const body = await request.text();
try {
JSON.parse(body);
await setCache(body);
return new Response(body, { status: 200 });
} catch (err) {
return new Response(err, { status: 500 });
}
}
// previous code
},
};Kiểm tra rằng yêu cầu là
PUT và đóng gói phần còn lại của mã trong một khối try...catch. Đầu tiên, phân tích cơ thể của yêu cầu đến, đảm bảo rằng đó là JSON, trước khi bạn cập nhật bộ nhớ cache với dữ liệu mới và trả lại cho người dùng. Nếu điều gì đó không ổn, hãy trả về mã trạng thái 500. Nếu đường dẫn được nhấn bằng phương pháp HTTP khác với PUT – ví dụ, POST hoặc DELETE – trả về lỗi 404.Check that the request is a
PUT and wrap the remainder of the code in a try...catch block. First, parse the body of the request coming in, ensuring that it is JSON, before you update the cache with the new data and return it to the user. If anything goes wrong, return a 500 status code. If the route is hit with an HTTP method other than PUT — for example, POST or DELETE — return a 404 error.ពិនិត្យមើលថាសំណើនោះជា
PUT ហើយរុំកូដដែលនៅសល់ក្នុងប្លុក try...catch។ ដំបូង ញែកតួនៃសំណើដែលចូលមក ដោយធានាថាវាជា JSON មុនពេលអ្នកធ្វើបច្ចុប្បន្នភាពឃ្លាំងសម្ងាត់ជាមួយនឹងទិន្នន័យថ្មី ហើយប្រគល់វាទៅអ្នកប្រើប្រាស់វិញ។ ប្រសិនបើមានអ្វីខុស សូមត្រឡប់លេខកូដស្ថានភាព 500។ ប្រសិនបើផ្លូវត្រូវបានវាយប្រហារដោយវិធីសាស្ត្រ HTTP ផ្សេងក្រៅពី PUT — ឧទាហរណ៍ POST ឬ DELETE — ត្រឡប់ 4Với kịch bản này, bây giờ bạn có thể thêm một số chức năng năng động vào trang HTML của bạn để thực sự đạt con đường này. Đầu tiên, tạo input cho tên todo của bạn và một nút để gửi todo.
With this script, you can now add some dynamic functionality to your HTML page to actually hit this route. First, create an input for your todo name and a button for submitting the todo.
ជាមួយនឹង script នេះ ឥឡូវនេះអ្នកអាចបន្ថែមមុខងារថាមវន្តមួយចំនួនទៅទំព័រ HTML របស់អ្នក ដើម្បីឈានទៅដល់ផ្លូវនេះ។ ដំបូង បង្កើតការបញ្ចូលសម្រាប់ឈ្មោះការងារដែលត្រូវធ្វើរបស់អ្នក និងប៊ូតុងសម្រាប់ដាក់ស្នើកិច្ចការដែលត្រូវធ្វើ។
JavaScript Đánh giá
JavaScript
JavaScript
text
const html = (todos) => `
<!doctype html>
<html>
<!-- existing content -->
<div>
<input type="text" name="name" placeholder="A new todo"></input>
<button id="create">Create</button>
</div>
<!-- existing script -->
</html>
`;Với input và nút đó, hãy thêm một hàm JavaScript tương ứng để theo dõi các nhấp chuột vào nút - một khi nút được nhấp chuột, trình duyệt sẽ
PUT đến / và gửi todo.Given that input and button, add a corresponding JavaScript function to watch for clicks on the button — once the button is clicked, the browser will
PUT to / and submit the todo.ដោយសារការបញ្ចូល និងប៊ូតុងនោះ បន្ថែមមុខងារ JavaScript ដែលត្រូវគ្នាដើម្បីមើល clicks នៅលើប៊ូតុង — នៅពេលដែលប៊ូតុងត្រូវបាន clicked នោះ កម្មវិធីរុករកតាមអ៊ីនធឺណិតនឹង
PUT ទៅ ando>tutorial/-code>JavaScript Đánh giá
JavaScript
JavaScript
text
const html = (todos) => `
<!doctype html>
<html>
<!-- existing content -->
<script>
// Existing JavaScript code
var createTodo = function() {
var input = document.querySelector("input[name=name]")
if (input.value.length) {
todos = [].concat(todos, {
id: todos.length + 1,
name: input.value,
completed: false,
})
fetch("/", {
method: "PUT",
body: JSON.stringify({ todos: todos }),
})
}
}
document.querySelector("#create").addEventListener("click", createTodo)
</script>
</html>
`;Mã này cập nhật bộ nhớ cache. Hãy nhớ rằng bộ nhớ cache KV cuối cùng là nhất quán - ngay cả khi bạn cập nhật Worker của bạn để đọc từ bộ nhớ cache và trả lại nó, bạn không có đảm bảo nó sẽ thực sự được cập nhật. Thay vào đó, cập nhật danh sách todos cục bộ, bằng cách lấy mã gốc của bạn để hiển thị danh sách todo, làm cho nó một chức năng có thể tái sử dụng được gọi là
populateTodos, và gọi nó khi trang tải và khi yêu cầu bộ nhớ cache đã kết thúc:This code updates the cache. Remember that the KV cache is eventually consistent — even if you were to update your Worker to read from the cache and return it, you have no guarantees it will actually be up to date. Instead, update the list of todos locally, by taking your original code for rendering the todo list, making it a reusable function called
populateTodos, and calling it when the page loads and when the cache request has finished:កូដនេះធ្វើបច្ចុប្បន្នភាពឃ្លាំងសម្ងាត់។ សូមចាំថាឃ្លាំងសម្ងាត់ KV នៅទីបំផុតស្រប — ទោះបីជាអ្នកត្រូវធ្វើបច្ចុប្បន្នភាពកម្មកររបស់អ្នកឱ្យអានពីឃ្លាំងសម្ងាត់ ហើយបញ្ជូនវាមកវិញក៏ដោយ អ្នកមិនមានការធានាថាវានឹងទាន់សម័យពិតប្រាកដនោះទេ។ ជំនួសមកវិញ ធ្វើបច្ចុប្បន្នភាពបញ្ជីការងារត្រូវធ្វើនៅក្នុងមូលដ្ឋាន ដោយយកកូដដើមរបស់អ្នកសម្រាប់បង្ហាញបញ្ជីការងារដែលត្រូវធ្វើ ធ្វើឱ្យវាក្លាយជាមុខងារដែលអាចប្រើឡើងវិញបានហៅថា
populateTodos ហើយហៅវានៅពេលទំព័រផ្ទុក និងនៅពេលដែលសំណើឃ្លាំងសម្ងាត់បានបញ្ចប់៖JavaScript Đánh giá
JavaScript
JavaScript
text
const html = (todos) => `
<!doctype html>
<html>
<!-- existing content -->
<script>
var populateTodos = function() {
var todoContainer = document.querySelector("#todos")
todoContainer.innerHTML = null
window.todos.forEach(todo => {
var el = document.createElement("div")
el.textContent = todo.name
todoContainer.appendChild(el)
})
}
populateTodos()
var createTodo = function() {
var input = document.querySelector("input[name=name]")
if (input.value.length) {
todos = [].concat(todos, {
id: todos.length + 1,
name: input.value,
completed: false,
})
fetch("/", {
method: "PUT",
body: JSON.stringify({ todos: todos }),
})
populateTodos()
input.value = ""
}
}
document.querySelector("#create").addEventListener("click", createTodo)
</script>
`;Với mã phía khách hàng ở vị trí, triển khai phiên bản mới của hàm nên đưa tất cả các mảnh này lại với nhau. Kết quả là một danh sách tất cả năng động thực sự.
With the client-side code in place, deploying the new version of the function should put all these pieces together. The result is an actual dynamic todo list.
ជាមួយនឹងលេខកូដ client-side នៅនឹងកន្លែង ការដាក់ពង្រាយកំណែថ្មីនៃមុខងារគួរតែដាក់បំណែកទាំងអស់នេះជាមួយគ្នា។ លទ្ធផលគឺជាបញ្ជីការងារដែលត្រូវធ្វើថាមវន្តពិតប្រាកដ។
5 Cập nhật tất cả từ ứng dụng UI 5. Update todos from the application UI 5. ធ្វើបច្ចុប្បន្នភាពអ្វីដែលត្រូវធ្វើពី UI កម្មវិធី
Phần «Cập nhật todos từ ứng dụng UI» — đọc hướng dẫn bên dưới, dùng liên kết docs gốc để xem ảnh minh họa và tab cấu hình đầy đủ.
Read the "5. Update todos from the application UI" section below — open the official docs link for full screenshots and configuration tabs.
អានផ្នែក «5. ធ្វើបច្ចុប្បន្នភាពអ្វីដែលត្រូវធ្វើពី UI កម្មវិធី» ខាងក្រោម — បើកតំណ docs ផ្លូវការសម្រាប់រូបភាព និង tab កំណត់។
Đối với phần cuối cùng của danh sách todo của bạn, bạn cần có thể cập nhật tất cả - cụ thể, đánh dấu chúng như đã hoàn thành.
For the final piece of your todo list, you need to be able to update todos — specifically, marking them as completed.
សម្រាប់ផ្នែកចុងក្រោយនៃបញ្ជីការងារត្រូវធ្វើរបស់អ្នក អ្នកត្រូវមានលទ្ធភាពធ្វើបច្ចុប្បន្នភាពការងារត្រូវធ្វើ ជាពិសេសដោយសម្គាល់ពួកវាថាបានបញ្ចប់។
May mắn thay, rất nhiều cơ sở hạ tầng cho công việc này đã được thực hiện. Bạn có thể cập nhật dữ liệu danh sách todo trong bộ nhớ cache, như được chứng minh bởi hàm
createTodo của bạn. Thực hiện cập nhật trên một todo là một nhiệm vụ phía khách hàng hơn là một nhiệm vụ phía công nhân.Luckily, a great deal of the infrastructure for this work is already in place. You can update the todo list data in the cache, as evidenced by your
createTodo function. Performing updates on a todo is more of a client-side task than a Worker-side one.ជាសំណាងល្អ ហេដ្ឋារចនាសម្ព័ន្ធជាច្រើនសម្រាប់ការងារនេះគឺមានរួចហើយ។ អ្នកអាចធ្វើបច្ចុប្បន្នភាពទិន្នន័យបញ្ជីការងារត្រូវធ្វើនៅក្នុងឃ្លាំងសម្ងាត់ ដូចដែលបានបង្ហាញដោយមុខងារ
createTodo របស់អ្នក។ ការអនុវត្តការអាប់ដេតលើការងារត្រូវធ្វើគឺជាកិច្ចការខាងភាគី cli ច្រើនជាងផ្នែកខាងកម្មករ។Để bắt đầu, hàm
populateTodos có thể được cập nhật để tạo ra một div cho mỗi todo. Ngoài ra, di chuyển tên của todo vào một yếu tố con của div:To start, the
populateTodos function can be updated to generate a div for each todo. In addition, move the name of the todo into a child element of that div:ដើម្បីចាប់ផ្តើម មុខងារ
populateTodos អាចត្រូវបានអាប់ដេតដើម្បីបង្កើត div សម្រាប់ការងារនីមួយៗ។ លើសពីនេះ ផ្លាស់ទីឈ្មោះរបស់ការងារត្រូវធ្វើទៅជាធាតុកូននៃ div៖JavaScript Đánh giá
JavaScript
JavaScript
text
const html = (todos) => `
<!doctype html>
<html>
<!-- existing content -->
<script>
var populateTodos = function() {
var todoContainer = document.querySelector("#todos")
todoContainer.innerHTML = null
window.todos.forEach(todo => {
var el = document.createElement("div")
var name = document.createElement("span")
name.textContent = todo.name
el.appendChild(name)
todoContainer.appendChild(el)
})
}
</script>
`;Bạn đã thiết kế phần khách hàng của mã này để xử lý một loạt tất cả và hiển thị một danh sách các yếu tố HTML. Có một số điều mà bạn đã làm mà bạn đã không sử dụng cho đến nay - cụ thể, việc bao gồm ID và cập nhật trạng thái hoàn thành của todo. Những thứ này làm việc tốt với nhau để thực sự hỗ trợ cập nhật todos trong giao diện ứng dụng.
You have designed the client-side part of this code to handle an array of todos and render a list of HTML elements. There is a number of things that you have been doing that you have not quite had a use for yet – specifically, the inclusion of IDs and updating the todo's completed state. These things work well together to actually support updating todos in the application UI.
អ្នកបានរចនាផ្នែកចំហៀង cli នៃកូដនេះដើម្បីគ្រប់គ្រងអារេនៃការងារត្រូវធ្វើ និងបង្ហាញបញ្ជីនៃធាតុ HTML ។ មានរឿងមួយចំនួនដែលអ្នកកំពុងធ្វើ ដែលអ្នកមិនទាន់បានប្រើប្រាស់នៅឡើយ ជាពិសេសគឺការដាក់បញ្ចូលលេខសម្គាល់ និងការធ្វើបច្ចុប្បន្នភាពស្ថានភាពដែលបានបញ្ចប់របស់ការងារត្រូវធ្វើ។ អ្វីៗទាំងនេះដំណើរការល្អជាមួយគ្នា ដើម្បីគាំទ្រការធ្វើបច្ចុប្បន្នភាពការងារត្រូវធ្វើនៅក្នុង UI កម្មវិធី។
Để bắt đầu, nó sẽ hữu ích để đính kèm ID của mỗi todo trong HTML. Bằng cách này, sau đó bạn có thể tham chiếu đến yếu tố sau đó để tương ứng với todo trong phần JavaScript của mã của bạn. Các thuộc tính dữ liệu và phương pháp
dataset tương ứng trong JavaScript là một cách hoàn hảo để thực hiện điều này. Khi bạn tạo thành phần div cho mỗi todo, bạn có thể đính kèm một thuộc tính dữ liệu được gọi là todo vào mỗi div:To start, it would be useful to attach the ID of each todo in the HTML. By doing this, you can then refer to the element later in order to correspond it to the todo in the JavaScript part of your code. Data attributes and the corresponding
dataset method in JavaScript are a perfect way to implement this. When you generate your div element for each todo, you can attach a data attribute called todo to each div:ដើម្បីចាប់ផ្តើម វានឹងមានប្រយោជន៍ក្នុងការភ្ជាប់ ID នៃការងារត្រូវធ្វើនីមួយៗនៅក្នុង HTML ។ តាមរយៈការធ្វើដូចនេះ អ្នកអាចយោងទៅធាតុនៅពេលក្រោយ ដើម្បីឆ្លើយតបវាទៅនឹងការងារត្រូវធ្វើនៅក្នុងផ្នែក JavaScript នៃកូដរបស់អ្នក។ គុណលក្ខណៈទិន្នន័យ និងវិធីសាស្ត្រ
dataset ដែលត្រូវគ្នានៅក្នុង JavaScript គឺជាវិធីដ៏ល្អឥតខ្ចោះដើម្បីអនុវត្តវា។ នៅពេលអ្នកបង្កើតធាតុ div របស់អ្នកសម្រាប់ការងារត្រូវធ្វើនីមួយៗ អ្នកអាចភ្ជាប់គុណលក្ខណៈទិន្នន័យហៅថា todo ទៅ div៖JavaScript Đánh giá
JavaScript
JavaScript
text
const html = (todos) => `
<!doctype html>
<html>
<!-- existing content -->
<script>
var populateTodos = function() {
var todoContainer = document.querySelector("#todos")
todoContainer.innerHTML = null
window.todos.forEach(todo => {
var el = document.createElement("div")
el.dataset.todo = todo.id
var name = document.createElement("span")
name.textContent = todo.name
el.appendChild(name)
todoContainer.appendChild(el)
})
}
</script>
`;Bên trong HTML của bạn, mỗi
div cho một todo bây giờ có một thuộc tính dữ liệu đính kèm, trông như sau:Inside your HTML, each
div for a todo now has an attached data attribute, which looks like:នៅក្នុង HTML របស់អ្នក រាល់
div សម្រាប់ការងារត្រូវធ្វើឥឡូវនេះមានគុណលក្ខណៈទិន្នន័យដែលបានភ្ជាប់ ដែលមើលទៅដូច៖ text
<div data-todo="1"></div>
<div data-todo="2"></div>Bây giờ bạn có thể tạo một hộp kiểm cho mỗi nguyên tố todo. Hộp kiểm này sẽ mặc định là unchecked cho todos mới nhưng bạn có thể đánh dấu nó như đã kiểm tra khi mục được hiển thị trong cửa sổ:
You can now generate a checkbox for each todo element. This checkbox will default to unchecked for new todos but you can mark it as checked as the element is rendered in the window:
ឥឡូវនេះ អ្នកអាចបង្កើតប្រអប់ធីកសម្រាប់ធាតុការងារត្រូវធ្វើនីមួយៗ។ ប្រអប់ធីកនេះនឹងកំណត់លំនាំដើមដើម្បីមិនបានធីកសម្រាប់កិច្ចការត្រូវធ្វើថ្មី ប៉ុន្តែអ្នកអាចសម្គាល់វាថាបានធីក ដោយសារធាតុត្រូវបានបង្ហាញក្នុងបង្អួច៖
JavaScript Đánh giá
JavaScript
JavaScript
text
const html = (todos) => `
<!doctype html>
<html>
<!-- existing content -->
<script>
window.todos.forEach(todo => {
var el = document.createElement("div")
el.dataset.todo = todo.id
var name = document.createElement("span")
name.textContent = todo.name
var checkbox = document.createElement("input")
checkbox.type = "checkbox"
checkbox.checked = todo.completed ? 1 : 0
el.appendChild(checkbox)
el.appendChild(name)
todoContainer.appendChild(el)
})
</script>
`;Hộp kiểm được thiết lập để phản ánh chính xác giá trị hoàn thành trên mỗi todo nhưng nó vẫn không cập nhật khi bạn thực sự kiểm tra hộp. Để làm điều này, hãy đính kèm hàm
completeTodo làm người nghe sự kiện vào sự kiện click. Bên trong hàm, kiểm tra phần tử hộp kiểm, tìm nguyên mẫu của nó (Todo div), và sử dụng thuộc tính dữ liệu todo của nó để tìm todo tương ứng trong mảng dữ liệu. Bạn có thể chuyển trạng thái hoàn thành, cập nhật các thuộc tính của nó và thuê lại UI:The checkbox is set up to correctly reflect the value of completed on each todo but it does not yet update when you actually check the box. To do this, attach the
completeTodo function as an event listener on the click event. Inside the function, inspect the checkbox element, find its parent (the todo div), and use its todo data attribute to find the corresponding todo in the data array. You can toggle the completed status, update its properties, and rerender the UI:ប្រអប់ធីកត្រូវបានបង្កើតឡើងដើម្បីឆ្លុះបញ្ចាំងយ៉ាងត្រឹមត្រូវនូវតម្លៃនៃការបំពេញលើការងារត្រូវធ្វើនីមួយៗ ប៉ុន្តែវាមិនទាន់ធ្វើបច្ចុប្បន្នភាពទេ នៅពេលដែលអ្នកធីកប្រអប់ពិតប្រាកដ។ ដើម្បីធ្វើដូច្នេះ សូមភ្ជាប់មុខងារ
completeTodo ជាអ្នកស្តាប់ព្រឹត្តិការណ៍នៅលើព្រឹត្តិការណ៍ click។ នៅខាងក្នុងមុខងារ ពិនិត្យធាតុប្រអប់ធីក ស្វែងរកមេរបស់វា (todo div) ហើយប្រើគុណលក្ខណៈទិន្នន័យ todo របស់វា ដើម្បីស្វែងរកការងារត្រូវធ្វើដែលត្រូវគ្នានៅក្នុងអារេទិន្នន័យ។ អ្នកអាចបិទបើកស្ថានភាពដែលបានបញ្ចប់ ធ្វើបច្ចុប្បន្នភាពលក្ខណៈសម្បត្តិរបស់វា និងបង្ហាញ UI ឡើងវិញ៖JavaScript Đánh giá
JavaScript
JavaScript
text
const html = (todos) => `
<!doctype html>
<html>
<!-- existing content -->
<script>
var populateTodos = function() {
window.todos.forEach(todo => {
// Existing todo element set up code
checkbox.addEventListener("click", completeTodo)
})
}
var completeTodo = function(evt) {
var checkbox = evt.target
var todoElement = checkbox.parentNode
var newTodoSet = [].concat(window.todos)
var todo = newTodoSet.find(t => t.id == todoElement.dataset.todo)
todo.completed = !todo.completed
todos = newTodoSet
updateTodos()
}
</script>
`;Kết quả cuối cùng của mã của bạn là một hệ thống kiểm tra biến
todos, cập nhật bộ nhớ cache Cloudflare KV của bạn với giá trị đó, và sau đó thực hiện một render lại của UI dựa trên dữ liệu mà nó có tại địa phương.The final result of your code is a system that checks the
todos variable, updates your Cloudflare KV cache with that value, and then does a re-render of the UI based on the data it has locally.លទ្ធផលចុងក្រោយនៃកូដរបស់អ្នកគឺជាប្រព័ន្ធដែលពិនិត្យអថេរ
todos ធ្វើបច្ចុប្បន្នភាពឃ្លាំងសម្ងាត់ Cloudflare KV របស់អ្នកជាមួយនឹងតម្លៃនោះ ហើយបន្ទាប់មកធ្វើការបង្ហាញ UI ឡើងវិញដោយផ្អែកលើទិន្នន័យដែលវាមាននៅក្នុងមូលដ្ឋាន។Sáu Kết luận và các bước tiếp theo 6. Conclusion and next steps 6. សេចក្តីសន្និដ្ឋាន និងជំហានបន្ទាប់
Phần «Conclusion và next steps» — đọc hướng dẫn bên dưới, dùng liên kết docs gốc để xem ảnh minh họa và tab cấu hình đầy đủ.
Read the "6. Conclusion and next steps" section below — open the official docs link for full screenshots and configuration tabs.
អានផ្នែក «6. សេចក្តីសន្និដ្ឋាន និងជំហានបន្ទាប់» ខាងក្រោម — បើកតំណ docs ផ្លូវការសម្រាប់រូបភាព និង tab កំណត់។
Bằng cách hoàn thành hướng dẫn này, bạn đã xây dựng một ứng dụng tĩnh HTML, CSS và JavaScript được cung cấp một cách minh bạch bởi Workers và Workers KV, tận dụng tối đa mạng lưới toàn cầu của Cloudflare.
By completing this tutorial, you have built a static HTML, CSS, and JavaScript application that is transparently powered by Workers and Workers KV, which take full advantage of Cloudflare's global network.
តាមរយៈការបញ្ចប់ការបង្រៀននេះ អ្នកបានបង្កើតកម្មវិធី HTML, CSS និង JavaScript ឋិតិវន្តដែលដំណើរការដោយតម្លាភាពដោយ Workers និង Workers KV ដែលទាញយកអត្ថប្រយោជន៍ពេញលេញពីបណ្តាញសកលរបស់ Cloudflare ។
Nếu bạn muốn tiếp tục cải thiện dự án của mình, bạn có thể thực hiện một thiết kế tốt hơn (bạn có thể tham khảo một phiên bản trực tiếp có sẵn tại todos.signalnerve.workers.dev ↗), hoặc thực hiện các cải tiến bổ sung về bảo mật và tốc độ.
If you would like to keep improving on your project, you can implement a better design (you can refer to a live version available at todos.signalnerve.workers.dev ↗), or make additional improvements to security and speed.
ប្រសិនបើអ្នកចង់បន្តកែលម្អគម្រោងរបស់អ្នក អ្នកអាចអនុវត្តការរចនាកាន់តែប្រសើរឡើង (អ្នកអាចយោងទៅកំណែបន្តផ្ទាល់ដែលមាននៅ todos.signalnerve.workers.dev/" class="link" target="_blank" rel="noopener noreferrer">todos._1Md9. ↗) ឬធ្វើការកែលម្អបន្ថែមទៅលើសុវត្ថិភាព និងល្បឿន។
Bạn cũng có thể muốn thêm bộ nhớ cache cụ thể cho người dùng. Hiện tại, khóa bộ nhớ cache luôn là
data – điều này có nghĩa là bất kỳ khách truy cập nào đến trang web sẽ chia sẻ cùng một danh sách todo với những khách truy cập khác. Trong Worker, bạn có thể sử dụng các giá trị từ yêu cầu khách hàng để tạo và duy trì danh sách cụ thể cho người dùng. Ví dụ, bạn có thể tạo một khóa bộ nhớ cache dựa trên yêu cầu IP:You may also want to add user-specific caching. Right now, the cache key is always
data – this means that any visitor to the site will share the same todo list with other visitors. Within your Worker, you could use values from the client request to create and maintain user-specific lists. For example, you may generate a cache key based on the requesting IP:អ្នកក៏ប្រហែលជាចង់បន្ថែមឃ្លាំងសម្ងាត់សម្រាប់អ្នកប្រើប្រាស់ជាក់លាក់ផងដែរ។ ឥឡូវនេះ សោឃ្លាំងសម្ងាត់គឺតែងតែ
data – នេះមានន័យថាអ្នកចូលមើលគេហទំព័រនឹងចែករំលែកបញ្ជីការងារត្រូវធ្វើដូចគ្នាជាមួយអ្នកទស្សនាផ្សេងទៀត។ នៅក្នុងកម្មកររបស់អ្នក អ្នកអាចប្រើតម្លៃពីសំណើ client ដើម្បីបង្កើត និងរក្សាបញ្ជីអ្នកប្រើប្រាស់ជាក់លាក់។ ឧទាហរណ៍ អ្នកអាចបង្កើតសោឃ្លាំងសម្ងាត់ដោយផ្អែកលើការស្នើសុំ IP៖JavaScript Đánh giá
JavaScript
JavaScript
text
export default {
async fetch(request, env, ctx) {
const defaultData = {
todos: [
{
id: 1,
name: "Finish the Cloudflare Workers blog post",
completed: false,
},
],
};
const setCache = (key, data) => env.TODOS.put(key, data);
const getCache = (key) => env.TODOS.get(key);
const ip = request.headers.get("CF-Connecting-IP");
const myKey = `data-${ip}`;
if (request.method === "PUT") {
const body = await request.text();
try {
JSON.parse(body);
await setCache(myKey, body);
return new Response(body, { status: 200 });
} catch (err) {
return new Response(err, { status: 500 });
}
}
let data;
const cache = await getCache();
if (!cache) {
await setCache(myKey, JSON.stringify(defaultData));
data = defaultData;
} else {
data = JSON.parse(cache);
}
const body = html(JSON.stringify(data.todos).replace(/</g, "\\u003c"));
return new Response(body, {
headers: {
"Content-Type": "text/html",
},
});
},
};Sau khi thực hiện những thay đổi này và triển khai Worker một lần nữa, ứng dụng danh sách todo của bạn bây giờ bao gồm chức năng cho từng người dùng trong khi vẫn tận dụng tối đa mạng lưới toàn cầu của Cloudflare.
After making these changes and deploying the Worker one more time, your todo list application now includes per-user functionality while still taking full advantage of Cloudflare's global network.
បន្ទាប់ពីធ្វើការផ្លាស់ប្តូរទាំងនេះ និងដាក់ឱ្យដំណើរការ Worker មួយដងទៀត កម្មវិធីបញ្ជីការងារត្រូវធ្វើរបស់អ្នកឥឡូវនេះរួមបញ្ចូលមុខងារសម្រាប់អ្នកប្រើប្រាស់ម្នាក់ ខណៈពេលដែលនៅតែទាញយកអត្ថប្រយោជន៍ពេញលេញពីបណ្តាញសកលរបស់ Cloudflare។
Phiên bản cuối cùng của kịch bản Worker của bạn nên trông như thế này:
The final version of your Worker script should look like this:
កំណែចុងក្រោយនៃអ្នកធ្វើការ script គួរតែមើលទៅដូចនេះ៖
JavaScript Đánh giá
JavaScript
JavaScript
text
const html = (todos) => `
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Todos</title>
<link href="https://cdn.jsdelivr.net/npm/tailwindcss/dist/tailwind.min.css" rel="stylesheet"></link>
</head>
<body class="bg-blue-100">
<div class="w-full h-full flex content-center justify-center mt-8">
<div class="bg-white shadow-md rounded px-8 pt-6 py-8 mb-4">
<h1 class="block text-grey-800 text-md font-bold mb-2">Todos</h1>
<div class="flex">
<input class="shadow appearance-none border rounded w-full py-2 px-3 text-grey-800 leading-tight focus:outline-none focus:shadow-outline" type="text" name="name" placeholder="A new todo"></input>
<button class="bg-blue-500 hover:bg-blue-800 text-white font-bold ml-2 py-2 px-4 rounded focus:outline-none focus:shadow-outline" id="create" type="submit">Create</button>
</div>
<div class="mt-4" id="todos"></div>
</div>
</div>
</body>
<script>
window.todos = ${todos}
var updateTodos = function() {
fetch("/", { method: "PUT", body: JSON.stringify({ todos: window.todos }) })
populateTodos()
}
var completeTodo = function(evt) {
var checkbox = evt.target
var todoElement = checkbox.parentNode
var newTodoSet = [].concat(window.todos)
var todo = newTodoSet.find(t => t.id == todoElement.dataset.todo)
todo.completed = !todo.completed
window.todos = newTodoSet
updateTodos()
}
var populateTodos = function() {
var todoContainer = document.querySelector("#todos")
todoContainer.innerHTML = null
window.todos.forEach(todo => {
var el = document.createElement("div")
el.className = "border-t py-4"
el.dataset.todo = todo.id
var name = document.createElement("span")
name.className = todo.completed ? "line-through" : ""
name.textContent = todo.name
var checkbox = document.createElement("input")
checkbox.className = "mx-4"
checkbox.type = "checkbox"
checkbox.checked = todo.completed ? 1 : 0
checkbox.addEventListener("click", completeTodo)
el.appendChild(checkbox)
el.appendChild(name)
todoContainer.appendChild(el)
})
}
populateTodos()
var createTodo = function() {
var input = document.querySelector("input[name=name]")
if (input.value.length) {
window.todos = [].concat(todos, { id: window.todos.length + 1, name: input.value, completed: false })
input.value = ""
updateTodos()
}
}
document.querySelector("#create").addEventListener("click", createTodo)
</script>
</html>
`;
export default {
async fetch(request, env, ctx) {
const defaultData = {
todos: [
{
id: 1,
name: "Finish the Cloudflare Workers blog post",
completed: false,
},
],
};
const setCache = (key, data) => env.TODOS.put(key, data);
const getCache = (key) => env.TODOS.get(key);
const ip = request.headers.get("CF-Connecting-IP");
const myKey = `data-${ip}`;
if (request.method === "PUT") {
const body = await request.text();
try {
JSON.parse(body);
await setCache(myKey, body);
return new Response(body, { status: 200 });
} catch (err) {
return new Response(err, { status: 500 });
}
}
let data;
const cache = await getCache();
if (!cache) {
await setCache(myKey, JSON.stringify(defaultData));
data = defaultData;
} else {
data = JSON.parse(cache);
}
const body = html(JSON.stringify(data.todos).replace(/</g, "\\u003c"));
return new Response(body, {
headers: {
"Content-Type": "text/html",
},
});
Bạn có thể tìm thấy mã nguồn cho dự án này, cũng như một README với hướng dẫn triển khai, on GitHub ↗.
You can find the source code for this project, as well as a README with deployment instructions, on GitHub ↗.
json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/workers/","name":"Workers"}},{"@type":"ListItem","position":3,"item":{"@id":"/workers/tutorials/","name":"Tutorials"}},{"@type":"ListItem","position":4,"item":{"@id":"/workers/tutorials/build-a-jamstack-app/","name":"Build a todo list Jamstack application"}}]}Xem bản đầy đủ trên developers.cloudflare.com (ảnh, tab cấu hình). View the full guide on developers.cloudflare.com (images, config tabs). មើលមគ្គុទ្ទេសក៍ពេញលើ developers.cloudflare.com (រូបភាព, tab កំណត់)។
Tài liệu gốc ↗ Official docs ↗ ឯកសារផ្លូវការ ↗