跳转到内容
搜索文档
↵选择
↑↓导航
ESC关闭

构建二维码生成器

最后更新 查看 MarkdownAgent 设置

在本教程中，你将构建并发布一个生成二维码的 Worker 应用。

若要查看本教程的代码，完整代码库可在 GitHub 上获取 ↗。你可以使用示例仓库中的代码，按需定制并部署到自己的项目中。

开始之前

所有教程都假设你已经完成了快速入门指南，该指南帮助你设置 Cloudflare Workers 账户、C3 ↗ 和 Wrangler。

1. 创建新的 Workers 项目

首先，使用 create-cloudflare CLI 创建新的 Cloudflare Workers 项目。打开终端并运行以下命令：

npm create cloudflare@latest -- qr-code-generator

进行设置时，请选择以下选项：

  • 对于 What would you like to start with?，选择 Hello World example。
  • 对于 Which template would you like to use?，选择 Worker only。
  • 对于 Which language do you want to use?，选择 JavaScript。
  • 对于 Do you want to use git for version control?，选择 Yes。
  • 对于 Do you want to deploy your application?，选择 No（部署前我们还会做一些修改）。

然后，进入新创建的目录：

cd qr-code-generator

在新的 qr-code-generator Worker 项目目录中，index.js 是 Cloudflare Workers 应用的入口点。

所有 Cloudflare Workers 应用都通过监听 fetch 事件启动，当客户端向 Worker 路由发起请求时会触发该事件。Worker 收到请求后，将返回你的应用构建的响应。本教程将引导你理解请求/响应模式的工作原理，以及如何利用它构建功能完整的应用。

export default {
	async fetch(request, env, ctx) {
		return new Response("Hello Worker!");
	},
};

在默认的 index.js 文件中，你可以看到请求/响应模式的实际运作。fetch 构造一个正文为 'Hello Worker!' 的新 Response。

当 Worker 收到 fetch 事件时，会将新构造的响应返回给客户端。Worker 将直接从 Cloudflare 全球网络 ↗提供响应，而不是继续转发到源站。标准服务器接受请求并返回响应。Cloudflare Workers 允许你在 Cloudflare 全球网络上直接构造响应，从而快速响应。

2. 处理传入请求

发布到 Cloudflare Workers 的任何项目都可以使用现代 JavaScript 工具，如 ES 模块、npm 包以及 async/await ↗ 函数来构建应用。除了编写 Worker，你还可以使用 Workers 构建完整应用，工具链和流程与本教程相同。

本教程中要构建的二维码生成器是一个在单一路由上运行并接收请求的 Worker。每个请求包含一段文本（例如 URL），函数会将其编码为二维码，然后以 PNG 图像格式返回二维码。

在本教程的当前阶段，Worker 函数可以接收请求并返回包含 "Hello Worker!" 文本的简单响应。要处理传入 Worker 的数据，请检查传入请求是否为 POST 请求：

export default {
	async fetch(request, env, ctx) {
		if (request.method === "POST") {
			return new Response("Hello Worker!");
		}
	},
};

目前，若传入请求不是 POST，函数将返回 undefined。但 Worker 始终需要返回 Response。由于函数只应接受 POST 请求，若传入请求不是 POST，则返回带有 405 状态码 ↗的新 Response：

export default {
	async fetch(request, env, ctx) {
		if (request.method === "POST") {
			return new Response("Hello Worker!");
		}

		return new Response("Expected POST request", {
			status: 405,
		});
	},
};

你已建立请求的基本流程。接下来，你需要为有效的传入请求设置响应。若收到 POST 请求，函数应生成二维码。首先，将 "Hello Worker!" 响应移入新函数 generateQRCode，该函数最终将包含大部分逻辑：

export default {
	async fetch(request, env, ctx) {
		if (request.method === "POST") {
		}
	},
};

async function generateQRCode(request) {
	// TODO: Include QR code generation
	return new Response("Hello worker!");
}

generateQRCode 函数完成后，在 fetch 函数中调用它，并直接将结果返回给客户端：

export default {
	async fetch(request, env, ctx) {
		if (request.method === "POST") {
			return generateQRCode(request);
		}
	},
};

3. 构建二维码生成器

部署到 Cloudflare Workers 的所有项目都支持 npm 包。这使得在 Worker 中快速构建功能变得容易。'qrcode-svg' ↗ 包可将文本编码为二维码。在命令行中安装 'qrcode-svg' 并保存到项目的 'package.json'：

npm i qrcode-svg

在 index.js 中，将 qrcode-svg 包导入为变量 QRCode。在 generateQRCode 函数中，使用 request.json 将传入请求解析为 JSON，并使用 qrcode-svg 包生成新的二维码。二维码以 SVG 格式生成。构造新的 Response 实例，将 SVG 数据作为正文，并设置 Content-Type 头为 image/svg+xml。这样浏览器就能将 Worker 返回的数据正确解析为图像：

import QRCode from "qrcode-svg";

async function generateQRCode(request) {
	const { text } = await request.json();
	const qr = new QRCode({ content: text || "https://workers.dev" });
	return new Response(qr.svg(), {
		headers: { "Content-Type": "image/svg+xml" },
	});
}

4. 在应用 UI 中测试

当用户向路由发送 POST 请求时 Worker 会执行，但最佳实践是还提供合适的界面来测试函数。在本教程的当前阶段，若函数收到非 POST 请求，将返回 405 响应。新版本的 fetch 应返回带有静态 HTML 文档的新 Response，而不是 405 错误：

export default {
	async fetch(request, env, ctx) {
		if (request.method === "POST") {
			return generateQRCode(request);
		}

		return new Response(landing, {
			headers: {
				"Content-Type": "text/html",
			},
		});
	},
};

async function generateQRCode(request) {
	const { text } = await request.json();
	const qr = new QRCode({ content: text || "https://workers.dev" });
	return new Response(qr.svg(), {
		headers: { "Content-Type": "image/svg+xml" },
	});
}

const landing = `
<h1>QR Generator</h1>
<p>Click the below button to generate a new QR code. This will make a request to your Worker.</p>
<input type="text" id="text" value="https://workers.dev"></input>
<button onclick="generate()">Generate QR Code</button>
<p>Generated QR Code Image</p>
<img id="qr" src="#" />
<script>
	function generate() {
		fetch(window.location.pathname, {
			method: "POST",
			headers: { "Content-Type": "application/json" },
			body: JSON.stringify({ text: document.querySelector("#text").value })
		})
		.then(response => response.blob())
		.then(blob => {
			const reader = new FileReader();
			reader.onloadend = function () {
				document.querySelector("#qr").src = reader.result; // Update the image source with the newly generated QR code
			}
			reader.readAsDataURL(blob);
		})
	}
</script>
`;

landing 变量是一个静态 HTML 字符串，设置了 input 标签和对应的 button，点击按钮会调用 generateQRCode 函数。该函数会向 Worker 发起 HTTP POST 请求，让你能在页面上看到返回的二维码图像。

完成上述步骤后，Worker 已准备就绪。完整代码如下：

const QRCode = require("qrcode-svg");

export default {
	async fetch(request, env, ctx) {
		if (request.method === "POST") {
			return generateQRCode(request);
		}

		return new Response(landing, {
			headers: {
				"Content-Type": "text/html",
			},
		});
	},
};

async function generateQRCode(request) {
	const { text } = await request.json();
	const qr = new QRCode({ content: text || "https://workers.dev" });
	return new Response(qr.svg(), {
		headers: { "Content-Type": "image/svg+xml" },
	});
}

const landing = `
<h1>QR Generator</h1>
<p>Click the below button to generate a new QR code. This will make a request to your Worker.</p>
<input type="text" id="text" value="https://workers.dev"></input>
<button onclick="generate()">Generate QR Code</button>
<p>Generated QR Code Image</p>
<img id="qr" src="#" />
<script>
	function generate() {
		fetch(window.location.pathname, {
			method: "POST",
			headers: { "Content-Type": "application/json" },
			body: JSON.stringify({ text: document.querySelector("#text").value })
		})
		.then(response => response.blob())
		.then(blob => {
			const reader = new FileReader();
			reader.onloadend = function () {
				document.querySelector("#qr").src = reader.result; // Update the image source with the newly generated QR code
			}
			reader.readAsDataURL(blob);
		})
	}
</script>
`;

5. 部署 Worker

完成上述所有步骤后，你已在 Cloudflare Workers 上编写了二维码生成器的代码。

Wrangler 内置支持打包、上传和发布 Cloudflare Workers 应用。运行 npx wrangler deploy 即可构建并部署代码。

Deploy your Worker projectsh
npx wrangler deploy

相关资源

在本教程中，你构建并部署了用于生成二维码的 Worker 应用。若要查看完整源代码，可在 GitHub ↗ 上找到。

若要开始构建自己的项目，请查看现有的快速入门模板列表。

这篇文档对您有帮助吗？