Deno 是一个类似 Node.js 的 JavaScript 运行时环境，但更加安全和现代化。它由 Node.js 的创建者 Ryan Dahl 开发，并于 2020 年初发布，目前已经受到广泛关注和应用。本文介绍如何使用 Deno 搭建一个简单的 Blog 系统，包括博客文章的创建、展示和删除等功能，演示了如何使用 Deno 的 API 来实现一个完整的 Web 应用程序。
准备工作
使用 Deno 来开发 Web 应用程序需要准备以下工作：
安装 Deno：可以从 Deno 的官网下载对应系统的安装程序。
安装 VS Code 插件：可以搜索安装「Deno」插件，这里建议使用「Deno for Visual Studio Code」插件，它能提供更好的开发体验。
安装 Denon：Denon 是一个 Deno 的脚本管理器，它可以在开发过程中自动重启应用程序，提高开发效率。可以在终端中执行以下命令来安装 Denon：
$ deno install --allow-read --allow-run --allow-write -f --unstable https://deno.land/x/denon/denon.ts
创建项目
接下来，我们使用 Deno 创建一个新的 Web 应用程序。在命令行中执行以下命令：
$ mkdir deno-blog && cd deno-blog $ touch main.ts
然后，添加以下代码到 main.ts 文件中：
-- -------------------- ---- ------- ------ - ----------- - ---- -------------------------------- ----- --- - --- ------------- ------------- -- - ----------------- - ------ ------ -- ------------------- -- ------- -- ----------------------- ----- ------------ ----- ---- --展开代码
这个程序使用 Oak，一个流行的 Deno Web 框架，创建了一个基本的 Web 服务器。首先，我们导入了 Oak 应用程序并创建了一个实例。然后，我们调用 app.use 方法来添加一个处理程序，它将 "Hello Deno!" 文本作为响应返回给客户端。最后，我们在控制台中打印出服务器正在运行的端口号，并使用 app.listen 方法来启动服务器并绑定到本地 8000 端口。
运行项目
在命令行中执行以下命令来运行应用程序：
$ denon start这个命令将使用 Denon 启动我们的应用程序，并 Watch 我们的文件变化，所以当我们修改了我们的代码，应用程序会自动重启。
现在，可以在浏览器中访问 http://localhost:8000，在页面上应该看到 "Hello Deno!" 消息。
模拟数据库
在之前的步骤中，我们创建了一个简单的 Web 服务器来响应请求。现在，我们需要将其连接到一个存储系统，以便我们可以创建、显示和删除博客文章。在这个例子中，我们将使用文件系统来模拟数据库的行为。
首先，我们创建一个名为 db.ts 的文件，并添加以下代码：
-- -------------------- ---- ------- --------- ---- - --- ------ ------ ------ -------- ------ - --- ------ ------ - -- ------ ----- ------ - -- -- ----- ------ ----- ------- - ------ ----- -- - ------- - ------------ - - ---------------- - ------ ----- ---------- - ---- ------- -- - ----- - ------------------- -- ------- --- --- -展开代码
这个文件定义了一个类似数据库的模块，其中包含 getAll、addBlog 和 deleteBlog 等方法，用于获取、添加和删除博客文章。在这个例子中，我们使用了一个简单的对象数组作为存储系统，但在实际应用中，我们可能需要使用真正的数据库系统，如 MongoDB、PostgreSQL 等。
创建路由
现在，我们创建两个路由，一个用于获取所有的博客文章并返回一个 JSON 数组，另一个用于添加和删除博客文章。这里我们可以再次利用 Oak 框架的优势：
在 main.ts 中，添加以下代码：
-- -------------------- ---- ------- ------ - ------ - ---- -------------------------------- ------ - ------- -------- ---------- - ---- --------- ----- ------ - --- -------- -------------------- ----- -- - ----------------- - -------- -- --------------------- ----- ----- -- - ----- ---- - ------------------ ----- - ------ ------- - - ----- ---------- ----- ---- - - ------ -------- --- - - ------------- ------------------- - --- -- --------------------------- ----- -- - ----- - -- - - ---------- ------------------------ ----------------- - - -------- ---- - -- ------------------------ --------------------------------展开代码
这个代码创建了三个路由：
- GET /blogs 路由，它将调用 db.ts 中的 getAll 方法，然后返回所有博客文章的列表；
- POST /blogs 路由，它将读取请求体中的 title 和 content 字段，并使用 db.ts 中的 addBlog 方法将新文章添加到数据库中；
- DELETE /blogs/:id 路由，它将从请求 URL 中读取文章 ID 并调用 db.ts 中的 deleteBlog 方法将其从数据库中删除。
这样，我们的服务器就可以处理来自客户端的 GET、POST 和 DELETE 请求了。
创建前端页面
最后，我们创建一个静态 HTML 页面来向服务器发送请求，并在前端展示博客文章。创建一个名为 index.html 的文件，并添加以下内容：
-- -------------------- ---- ------- --------- ----- ------ ------ ----- --------------- -- ----------- ------------ ------- ------ ----- ----------------------------- ------ ----------- ------------ ---------- ------------------- -- --------- -------------- ------------ --------------------------------- ------- ----------------------------- ------- --- --------------- -------- ----- -------- ----------- - ----- --- - ----- --------------- ----- ----- - ----- ---------- ----- ---- - ------------------------------- -------------- - ----- ----------- -- ------------------ - --------------- ------- --------------------------------------------------------- --------- - ----- -------- ------------- - ------------------ ----- ---- - -------- ----- ---- - --- -------------- ----- --------------- - ------- ------- ----- ---- -- ------------ ----- ----------- - ----- -------- ---------------- - ----- --------------------- - ------- -------- -- ----- ----------- - ----------- --------- ------- -------展开代码
这个文件使用了 JavaScript、HTML 和 CSS 来创建一个简单的 UI。它包含一个表单，用于提交新博客文章，以及一个用于展示博客文章的列表。它使用 fetch API 来向服务器发送 POST 和 DELETE 请求，并在前端页面上更新博客列表。我们还创建了一个名为 loadBlogs 的函数，它将使用 fetch API 来获取所有博客文章的列表，并将其展示在前端页面上。
运行应用
在命令行中执行以下命令以启动我们的应用程序：
$ denon start在浏览器中访问 http://localhost:8000，你应该能够看到一个简单的博客系统，一个用于提交文章的表单和一个用于展示文章列表的区域。现在，你可以在表单中提交新的文章并删除现有的文章。这样，我们就成功地创建了一个基于 Deno 的 Blog 系统。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67bd6b3fa231b2b7edfcf574
