在本教程中，我们将使用HTML、CSS和JavaScript构建一个todo列表应用程序，其中有一个转折：所有数据都应该存储在新启动的Workers KV中，而应用程序本身应该使用Cloudflare直接从Cloudflare的edge网络提供服务工人。到开始，让我们把这个项目分成几个不同的步骤。尤其是，它有助于关注与工人KV合作的限制，因为处理数据通常是构建ap最复杂的部分应用：构建todos数据结构将TODO写入Workers KVRetrieve the TODO from Workers KVReturn an HTML page to the client，包括todo（如果存在的话）Allow create of new todo in UIHandle todo updates允许在UIHandle todo updates中完成todo这个任务顺序非常方便，因为它几乎完全分为两部分：第一，了解Cloudflare/API级别的东西，我们需要了解的关于Workers和KV的信息；第二，实际构建一个用户使用的接口数据。理解从实施的角度来看，这个项目的大部分都是以KV为中心的——虽然可能是这样，但分解工人是什么是有用的没错。服务worker是在浏览器中运行的后台脚本，与应用程序一起运行。Cloudflare Worker是相同的概念，但功能强大：您的Worker脚本运行在Cloudflare的边缘网络上，位于应用程序和客户端浏览器之间。这为有趣的集成提供了大量的机会，特别是考虑到网络在全球的巨大规模。这里有一些我认为是最常用的用例teresting:自定义安全性/筛选器根据请求内容（即用户代理和其他标题）缓存请求以提高性能，阻止不良行为体到达原始位置之前阻止它们的规则，或者使用Cloudflare KV来优化应用程序中的高读任务直接在边缘构建应用程序，消除对原始服务器的依赖对于这个项目，我们将大量地倾向于该列表的最后一个，构建一个客户端与之通信的应用程序，该应用程序服务于Cloudflare的边缘网络。这意味着它将在全球范围内可用，具有低延迟，同时仍然允许在直接构建应用程序时使用方便JavaScript.设置从canvasTo一开始，我就想从最基本的方面着手处理这个项目：没有框架、JS实用程序或类似的东西。尤其是，我最感兴趣的是从头开始编写一个项目，并直接从边缘服务。通常，我会将一个站点部署到GitHub页面上，但是完全避免对源服务器的需求似乎是一个非常强大的（而且性能很好的主意）——让我们试试吧！我还考虑使用TodoMVC作为构建应用程序功能的蓝图，但即使是普通JS版本，代码量也相当可观，包括许多节点包——它并不是一个简单的代码块，可以直接转储到Worker中它本身。相反, 我决定通过构建一个简单的、空白的HTML页面，并将其包含在Worker中，从而接近这个项目的开始。首先，我们将在本地绘制一些内容，例如：在在待办事项在在保留这段代码-我们稍后会在Workers脚本中添加它。为了本教程的目的，我将在todo.kristianfreeman.com网站. 我的个人网站已经在Cloudflare上托管了，由于我将要服务于此，是时候创建我的第一个网站了工人。正在创建作为Cloudflare帐户的工作人员，我跳入Workers选项卡并启动Workers编辑。这个是我最喜欢的编辑功能之一-与你的实际网站合作，了解员工将如何与您现有的项目。The编写工作人员的过程对于以前使用过fetch库的人应该很熟悉。简而言之，工作线程的默认代码钩住fetch事件，将该事件的请求传递到自定义函数hand中请求：addEventListener（'fetch'，event=>{事件响应（手柄请求(事件请求))})在handleRequest中，我们使用fetch发出实际请求，并将响应返回给客户机。简而言之，我们有一个地方可以拦截响应体，但默认情况下，我们让它通过-通过：异步函数HandlerRequest（请求）{控制台.log（"收到请求"，请求）const response=等待获取（请求）控制台.log（"得到响应"，响应）返回响应}那么，既然如此，我们从哪里开始和我们的员工一起做事呢？与Workers接口中提供给您的默认代码不同，我们希望跳过获取传入请求：相反，我们将构造一个新的响应，并直接从边缘：异步函数HandlerRequest（请求）{const response=新响应（"Hello！"）返回响应}考虑到我们添加到worker的非常小的功能，让我们部署它。进入Worker编辑器的"Routes"选项卡，我添加了routehttps://todo.kristianfreeman.com/*并将其附加到cloudflare worker todos脚本。一次附加，我部署了工人，瞧！参观todo.kristianfreeman.com网站在浏览器中，我只需简单地"你好！"回应回来。写作下一步是用实际数据填充todo列表。为此，我们将使用Cloudflare的Workers KV—这是一个简单的键值存储区，您可以访问Worker脚本内部进行读取（和写入，尽管不太常见）数据。到从KV开始，我们需要设置一个"名称空间"。我们的所有缓存数据都将存储在该命名空间中，只要稍加配置，我们就可以使用预定义变量访问脚本中的命名空间。我将在Workers仪表板中创建一个新的命名空间，名为KRISTIAN_TODOS，并在Worker编辑器中，我将通过将名称空间绑定到变量KRISTIAN来公开它_托多。给我在我的剧本中，克里斯汀·托多斯的出现，是时候了解KV API了。在编写本文时，KV名称空间有三种主要方法可以用来与缓存交互：get、put和delete。很直截了当！让我们通过定义一组初始数据开始存储数据，我们将使用put方法将其放入缓存中。我选择了定义一个对象defaultData，而不是一个简单的todo数组：我们以后可能需要在这个缓存对象中存储元数据和其他信息。对于这个数据对象，我将使用JSON.stringify把一个简单的字符串放入缓存：异步函数HandlerRequest（请求）{//…以前的代码const defaultData={待办事项：[{编号：1，name:'完成Cloudflare Workers博客文章'，完成：错误}]}克里斯蒂安_待办事项.put（"数据"，JSON.stringify（默认数据）}Worker KV数据存储最终是一致的：写入缓存意味着它最终将可用，但有可能在写入后立即尝试从缓存中读回值，结果发现缓存尚未更新但是，给我数据在缓存中的存在，以及我们的缓存最终保持一致，我们应该稍微调整一下这段代码：首先，我们应该实际从缓存中读取，解析返回的值，并将其用作数据源（如果存在的话）。如果没有，我们将引用defaultData，将其设置为当前的数据源（记住，它应该在将来设置…最终），同时在缓存中设置它以备将来使用。为了简单起见，将代码分解为几个函数后，结果如下此：const defaultData= {待办事项：[{编号：1，name:'完成Cloudflare Workers博客文章'，完成：错误}]}const setCache=data=>KRISTIAN_待办事项.put（"数据"，数据）const getCache=（）=>克里斯汀_待办事项（"数据"）异步函数getTodos（请求）{// ... 上一个代码让数据；const cache=等待getCache（）如果（！缓存）{等待setCache(JSON.stringify（默认数据）数据=默认数据}其他{数据=JSON.parse（缓存）}}从kvm呈现数据如果代码中存在数据，这是我们应用程序的缓存数据对象，我们实际上应该获取这些数据并使其可用屏幕。输入我们的Workers脚本，我们将创建一个新的变量html，并使用它来构建一个静态html模板，我们可以为客户机提供服务。在handleRequest中，我们可以构造一个新的响应（内容类型头为text/html），并将其提供给客户端：const html= `在在待办事项在在`异步函数handleRequest（请求）{const response=新响应（html{标题：{"内容类型"："text/html"}})返回响应}我们有一个静态HTML站点正在呈现，现在我们可以开始用数据填充它了！在body中，我们将添加一个id为todos的ul标记：待办事项在给定该主体，我们还可以在接受todos数组的主体之后添加一个脚本，循环遍历该数组，并为数组中的每个todo创建一个li元素并将其附加到todos列表：我们的静态页面可以接收窗口.todos，并基于它呈现HTML，但我们实际上还没有从KV传入任何数据。要做到这一点，我们需要做一对改变。首先，我们的html变量将变为函数。函数将接受一个参数todos，它将填充窗口.todos上述代码中的变量样品：c
