运用 Next.js + Typeorm + Prisma 开发博客 — 缩影

前言

博客是个人展示自我、分享知识的好地方。近年来，随着前端技术的不断发展，前端技术也开始广泛应用于博客的开发中。本文将介绍如何使用 Next.js + Typeorm + Prisma 技术栈，快速搭建一个高效的博客网站。并讨论常见的前端开发问题和解决方案。

技术栈介绍

Next.js

Next.js 是 React 的服务端渲染框架，为 React 应用提供开箱即用的服务端渲染、自动代码分割、静态文件服务、按需编译以及 CDN 缓存等功能。Next.js 能够让开发者专注于编写组件，而无需关注枯燥的构建配置。

Typeorm

Typeorm 是一个 ORM（Object-Relational Mapping）框架，用于将关系数据库转换为对象。它支持各种关系型数据库，如 MySQL、PostgreSQL、SQLite 和 Oracle 等。Typeorm 可以轻松处理数据建模、查询管理和数据库迁移等任务。

Prisma

Prisma 是一个类型化的数据访问库，可以用于构建现代 Web 应用程序。Prisma 通过自动生成类型化应用程序查询 API，为开发人员提供了更高的生产力和可靠性。它支持多个数据库，包括 Postgres、MySQL 和 SQLite。

项目实战

项目结构

我们的博客项目需要有以下基本结构：

--- ---------- - --
--- --- ------
--- --- ------
--- ----- - --
--- --- --------
--- --- ---------
--- --- -----
--- --- --- ----------
--- --- --- ---------
--- --- ------
---     --- ---------
--- ------ - -----
--- --- -------------
--- --- --------
--- ------ - ----
--- --- - -------
--- --- -----
--- --- --------
--- --- ------
--- --- ------ - -------
--- --- --------
--- ------ - --

数据库设计

我们需要用到三个数据库表：Posts、Tags 和 PostTags。

Posts 表

Posts 表用于存储博客文章的内容：

----- ---- -
  --       ---     --- -------------------------
  --------- -------- ---------------
  --------- -------- ----------
  -----    ------
  ----     ------  -------
  -------  ------
  -------  -------
  ----     ---------
-

Tags 表

Tags 表用于存储文章的标签：

----- --- -
  --   ---    --- -------------------------
  ---- ------
  ----- ---------
-

PostTags 表

PostTags 表用于存储文章和标签的关联关系：

----- ------- -
  --      ---    --- -------------------------
  ------  ---
  -----   ---
  ----    ----   ----------------- --------- ----------- -----
  ---     ---    ----------------- -------- ----------- -----
  ---------------- --------
-

数据库操作

接下来，我们需要使用 Typeorm 和 Prisma 来操作数据库。

Typeorm 数据库连接

在 src/db.ts 中，我们需要配置 Typeorm 的数据库连接：

------ ------------------
------ - ----------------- ---------- - ---- ---------

--- ----------- ---------- - ---- - ----

------ ----- -------- ------------------ ------------------- -
  -- ----------- -- ----------------------- -
    ------ ----------
  -

  ---------- - ----- ------------------
    ----- -----------
    ----- ------------------------- -- ------------
    ----- ---------------------------------- -- ------- ----
    --------- ----------------------------- -- -----------
    --------- ----------------------------- -- -----------
    --------- ------------------------- -- -------
    --------- -----------------------
    ----------- --------------------------
    -------------- -------------------- --- -------------
    ------------ -------------------- --- -------------
    -------- -------------------- --- -------------
  --

  ------ ----------
-

该函数会根据环境变量，连接到数据库并返回数据库连接实例对象。

Prisma 查询

在 src/index.ts 中，我们需要编写博客网站的首页和文章详情页。同时，我们需要嵌套查询，获取文章和标签的关联关系。

------ - --------------- --------------- - ---- ------
------ - ------------- ---- - ---- ----------------

------ ------- ----- -------- --------
  ---- ---------------
  ---- ---------------
- -
  -- ----------- --- ------ -
    ----- ------ - --- --------------
    ----- --------- ------ - ----- ----------------------
      -------- -
        ----- -
          ------- - ----- ---- --
        --
      --
      -------- -- ---------- ------ ---
    --
    ---------------------- ------ -------- --
  - ---- -
    ---------------------- --------
    ---------------------- -------- ------- ------------- -- --- -------- --
  -
-

在该代码中，我们使用 Prisma 查询数据库，获取所有博客文章和对应的标签。最后，我们使用 JSON 格式返回数据给前端。

Prisma 修改

在 src/index.ts 中，我们还需要编写和修改文章的功能。我们先编写新增文章的功能。

------ - --------------- --------------- - ---- ------
------ - ------------- ---- - ---- ----------------

----- ------ - --- --------------

------ ------- ----- -------- --------
  ---- ---------------
  ---- ---------------
- -
  -- ----------- --- ------- -
    --- -
      ----- - ------ ----- -------- -------- ---- - - --------
      ----- -------- - ----- --------------------
        ----- -
          ------
          -----
          --------
          --------
          ----- -
            ------- -------------- ------- -- -
              ------ - ----- --- -
            ---
          --
        --
        -------- -
          ----- -
            ------- - ----- ---- --
          --
        --
      --
      ---------------------- ----- -------- --
    - ----- ------- -
      ---------------------- -------- ------------- --
    - ------- -
      ----- --------------------
    -
  - ---- -
    ---------------------- ---------
    ---------------------- -------- ------- ------------- -- --- -------- --
  -
-

在该代码中，我们先从前端传递过来文章的基本信息和标签，然后使用 Prisma 在数据库中创建文章。同时，按照标签信息，在标签表中创建标签，并在文章表中关联标签。最后，我们使用 JSON 格式返回新的文章数据给前端。

简单实现了新增文章的功能后，接下来我们需要编写编辑文章的功能。

------ - --------------- --------------- - ---- ------
------ - ------------- ---- - ---- ----------------

----- ------ - --- --------------

------ ------- ----- -------- --------
  ---- ---------------
  ---- ---------------
- -
  -- ----------- --- ------ -
    --- -
      ----- -
        -------
        ------
        -----
        --------
        --------
        -----
      - - -------- -- -
        ------- ------
        ------ ------
        ----- ------
        -------- ------
        -------- ------
        ----- --------
      -
      ----- -------- - ----- --------------------
        ------ - --- ------ --
        ----- -
          ------
          -----
          --------
          --------
          ----- -
            ----------- ---
            ------- -------------- ------- -- -
              ------ - ----- --- -
            ---
          --
        --
        -------- -
          ----- -
            ------- - ----- ---- --
          --
        --
      --
      ---------------------- ----- -------- --
    - ----- ------- -
      ---------------------- -------- ------------- --
    - ------- -
      ----- --------------------
    -
  - ---- -
    ---------------------- --------
    ---------------------- -------- ------- ------------- -- --- -------- --
  -
-

在该代码中，我们从前端传递来了文章的基本信息和标签，并按照事务方式处理了删除和新增标签。最后，我们使用 JSON 格式返回更新的文章数据给前端。

总结

本文介绍了如何使用 Next.js + Typeorm + Prisma 技术栈，快速搭建一个高效的博客网站，并详细讨论了常见的前端开发问题和解决方案。希望本文能够为大家的前端开发提供帮助和指导。完整的示例代码可以在我的 GitHub 仓库中找到：https://github.com/terryzql/today-i-learned/tree/main/nextjs-blog。

来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/654b17cc7d4982a6eb50eda2

阅读全文

猜你喜欢

  • Webpack 打包后 favicon.ico 出现 404 错误的解决方法

    在使用 Webpack 打包前端项目过程中，我们经常会将网站图标（favicon.ico）放在项目根目录下。但在项目打包后，访问网站时却发现图标无法加载，控制台上提示 404 错误。

    1 年前
  • Docker 常见异常处理：Cannot connect to the Docker daemon at unix:///var/run/docker.sock

    问题描述 在使用 Docker 进行应用程序部署或开发时，常常会遇到如下错误提示： ------ ------- -- --- ------ ------ -- -------------------...

    1 年前
  • 如何使用 ES12 中新增的 String.prototype.trimStart() 和 String.prototype.trimEnd() 方法

    引言 随着 JavaScript 发展，它的标准也随之不断地完善。ES12（也叫 ES2021）是 JavaScript 最新的标准版本，其中包含了很多新的特性。在这篇文章中，我们将详细介绍 ES12...

    1 年前
  • Angular Material 中的轮播图组件的实现方法

    轮播图是网站或应用中常用的交互元素之一，通常用于展示多张图片或内容，提供更好的视觉效果和用户体验。在 Angular Material 中，有一个官方的轮播组件，可以方便地实现轮播图的功能。

    1 年前
  • koa2 应用中 Sequelize ORM 实现连表查询

    在现代 Web 应用程序中，数据存储是至关重要的一环。它帮助我们存储和管理应用程序的状态，并将其持久化存储，以便在应用程序重启或故障后保留数据。 Sequelize 是一个使用 Node.js 编写...

    1 年前
  • PWA 应用如何实现 In-app Browser？

    PWA（Progressive Web Application）已经成为了现代化 Web 应用程序的趋势。与传统的网页应用相比，PWA 应用有诸多优势，比如：离线可访问、消息推送、添加到主屏幕、更快的...

    1 年前
  • 用 Node.js 和 WebSocket 构建实时 Web 应用

    在 Web 应用开发中，实时性是一个非常关键的问题。传统的 HTTP 协议是基于请求-响应模式的，对于实时性的支持较弱。为了实现实时通信，我们需要使用其他协议，比如 WebSocket。

    1 年前
  • Mongoose 中的 Schema 预处理方法详解

    在使用 Mongoose 进行 MongoDB 数据库操作时，我们常常需要使用 Schema 定义数据库中的数据结构。除了基本的数据类型、默认值和必填等基础配置外，Mongoose 还提供了一些高阶的...

    1 年前
  • Mocha + Chai + Sinon 的测试生态

    前端测试是保证项目质量的关键步骤，但是写测试代码并不容易。在这篇文章中，我们将会介绍一种前端测试框架，它能够让你轻松写出高质量的测试代码，该框架就是 Mocha + Chai + Sinon。

    1 年前
  • 如何在 Deno 中发送 GET 请求

    如何在 Deno 中发送 GET 请求 Deno 是一个安全可靠的 JavaScript 和 TypeScript 运行时环境，类似于 Node.js，但它内置了一些安全功能，并拥有极高的性能、可以支...

    1 年前
  • 在 ES6/ES2015 中进行字符串处理

    在当前前端开发中，字符串是我们必不可少的一部分。ES6/ES2015 引入了很多新特性，包括字符串处理方面的改进，使得字符串在前端开发中能够更加便捷和高效地运用。 本文将为大家介绍 ES6/ES201...

    1 年前
  • Cypress 自动化测试中的常用命令

    Cypress 是一款非常流行的前端自动化测试工具，它的优点在于简洁易用、集成度高，同时支持实时预览和调试，能够让开发者快速构建可靠的自动化测试套件。 在 Cypress 中，有一些常用的命令可以帮助...

    1 年前
  • CSS Flexbox 实现两列等高布局的技巧

    在开发前端页面的过程中，经常会遇到需要实现两列等高的布局需求。如果只是简单地使用传统的 CSS 布局方式，可能需要通过计算高度或者使用 JavaScript 来实现，而现在使用 CSS Flexbox...

    1 年前
  • 使用 Next.js + Redux 实现后台管理系统

    随着前端技术的飞速发展和应用场景的不断扩大，越来越多的企业都开始将重心转移到了移动应用和 Web 应用中来。后台管理系统也成为了一个非常热门的领域。在开发后台管理系统过程中，我们需要具备一定的技术储备...

    1 年前
  • Kubernetes 中使用 CronJob 实现定时任务

    Kubernetes 是一个广泛使用的容器编排平台，它提供了一种高效、可靠的方式来在集群中管理和运行容器应用。而 CronJob 是 Kubernetes 提供的一种调度工具，它可以帮助我们实现定时任...

    1 年前
  • 如何在 Node.js 中使用 Sequelize

    Sequelize 是 Node.js 中一款流行的 ORM（对象-关系映射）工具，它可以方便地操作关系型数据库。在本篇文章中，我们将介绍如何在 Node.js 中使用 Sequelize，并同时为您...

    1 年前
  • ES9 的 Object.fromEntries & Object.entries 方法详解

    JavaScript 是一种快速发展的语言，每年都有新的特性和功能被添加到语言的核心中。ES9（ECMAScript 2018）是 JavaScript 商品化的最新版本。

    1 年前
  • Mocha 和 Chai 如何测试 RESTful API

    Mocha 和 Chai 如何测试 RESTful API 在前端开发中，我们经常需要测试我们所写的 API 是否能够正确地处理请求并返回正确的结果。这就需要我们使用一些测试工具来验证我们的代码是否具...

    1 年前
  • 快速 get：认识 ES10 版本规范的更新

    ES10（ECMAScript 2019）是 JavaScript 的最新版本。它增加了一些非常有用的新功能和语法更新。在本文中，我们将详细了解这些更新和如何使用它们进一步优化我们的前端开发。

    1 年前
  • Angular 中的响应式编程：概述

    随着前端技术的不断发展，越来越多的前端框架和库能够帮助开发者快速构建复杂的 Web 应用程序。Angular 是其中一个非常受欢迎的前端框架，它使用一种被称为“响应式编程”的程序设计模式来简化开发过程...

    1 年前

相关推荐

    暂无文章