次の私の最初のデータベースアプリケーションを書く.JSと

今まで私は静的なサイトを作っていたので、分岐して、完全なスタックアプリケーションをデータベースにしようとしました.私は簡単なTwitterのクローンを作ることを決めた-と送信すると、データベースからの短いメッセージを受信する方法は、ハードはそれができますか?私は一歩一歩ガイドをしようとしている私は希望を他の誰かを助けることができなかった.
まず、私はHerokuに行き、アカウントを作成しました.私はこれにどんなお金を使うのを見ていないので、私はすべての自由な層オプションを選びました.新しい空白のアプリを作った後、私はGithubリポジトリに接続し、メインブランチから自動展開に設定します.
そのリポジトリで、私はnpx create-next-appを使って基本的なNext.jsアプリをセットしました.私のアプリを動作させるために、パッケージのスタートスクリプトを変更しなければなりませんでした."start": "next start"から"start": "next start -p $PORT"までのJSON.その時点で、あなたは通常通り反応を書くことができて、Herokuの上で主催されます.
私は基本的なフロントエンドアプリケーションを実行したので、私はバックエンドを接続したい.これは私が前にそれをしたことがなかったので、私はいくつかのトラブルがあった場所です.私はHerokuのリソースタブに行き、Postgresを検索し、Heroku Postgresを趣味のdev - free層でアプリケーションに追加しました.それから、私は私のマシンにPostgreSQLの最新リリースをダウンロードしました.
インストールされた後(すべてのデフォルト設定を使用して)、私はローカルで実行しているPostgresサーバーを監視し、編集するためにPGadmin 4を立ち上げました.(サイドノートでは、私のWindowsマシン上でpgadminを実行するために、レジストリエントリを編集しなければなりませんでした.あなたのログインの役割とパスワードを知っていることを確認する必要があります.PostgreSQLサーバの下でデータベースを右クリックして名前を付けてログインし、ログインロールを所有者として新しいデータベースを作成します.
この時点で、私は私のアプリをデータベースに接続するためにhere's the detailsを使い始めました.あなたのベースリポジトリディレクトリでnpm install @prisma/cli -Dとそれからnpx prisma initを走らせることによって、それをインストールしてください.エー.あなたがDATABASE_URL="postgresql://[username]:[password]@localhost:[server port]/[database name]"を設定する場所にenvファイルを作成する必要があります.次に、あなたのprisma/スキーマを入力します.Prismaファイル.これは私が使用したものですが、あなたのデータベースに格納するものに応じてモデルの名前と内容を変更できます.Prisma図式の参照.

datasource db {
  provider = "postgresql"
  url      = env("DATABASE_URL")
}

generator client {
  provider = "prisma-client-js"
}

model User {
  name  String @id
  posts Post[]
}

model Post {
  id        Int @id @default(autoincrement())
  createdAt DateTime @default(now())
  content   String 
  author    User
}

その後、データベースにデータモデルをプッシュするためにprisma migrate dev --preview-featureを実行することができます!サンプルデータを可視化してデータベースに追加するには、あなたのスキーマに接続するHere'sを使いました.Prismaファイルを追加し、あなたの心のコンテンツにレコードを削除することができます.Herokuサーバ上で動作するようにするには、Herokuにコマンドheroku loginおよびheroku pg:push [local database name] [heroku database name] --app [heroku app name]を使用してデータベーススキーマをプッシュする必要があります.このコマンドはPrisma Studioで詳細を見ることができます.
データベースが設定されたので、どのように読み書きするかを見つけ出しましょう.次.JSは、これを扱うことができるhereを持っています!まず最初に、私はnpm i corsで私のためにコルクを扱うミドルウェアをインストールしなければなりませんでした.私は、モバイルデバイスだけでCorsで苦労していました、そして、これはそれを固定しました.また、API/Coreベースで次のファイルを追加しなければなりませんでした.jsこれは、すべてのクエリで新しいデータベースセッションを作成していないことを意味します.

import { PrismaClient } from "@prisma/client";

export let prisma;

if (process.env.NODE_ENV === "production") {
    prisma = new PrismaClient();
} else {
    if (!global.prisma) {
        global.prisma = new PrismaClient();
    }

    prisma = global.prisma;
}

パスページ/API/投稿/インデックスを作成します.jsと次のコードを入力します.

import { prisma } from "../_base";
import Cors from "cors";

// Initializing the cors middleware
const cors = Cors({
    methods: ["GET", "HEAD"],
});

// Helper method to wait for a middleware to execute before continuing
// And to throw an error when an error happens in a middleware
function runMiddleware(req, res, fn) {
    return new Promise((resolve, reject) => {
        fn(req, res, (result) => {
            if (result instanceof Error) {
                return reject(result);
            }

            return resolve(result);
        });
    });
}

export default async function handle(req, res) {
    await runMiddleware(req, res, cors);
    const posts = await prisma.post.findMany();
    res.setHeader("Cache-Control", "public, max-age=0, stale-while-revalidate=1");
    res.json(posts);
}

今、あなたは例を訪問する.HerueAppCOM/API/POSTは、データベース内のすべての投稿項目を含むJSONドキュメントを返します.
データベースへの書き込みも簡単です.MessageInputコンポーネントには、APIルートにデータを送信し、フォームをクリアする次の機能があります.

function postMessage(e) {
    e.preventDefault();
    let content = document.querySelector("#text");
    let author = document.querySelector("#name");
    fetch(`${server}/api/posts/write`, {
        method: "POST",
        headers: {
            "Content-Type": "application/json",
        },
        body: JSON.stringify({ content: content.value, author: author.value }),
    })
        .catch((error) => console.error("WriteError", error))
        .finally(() => {
            content.value = "";
            author.value = "";
        });
}

それから、このコードはAPI/POST/Writeで行います.それを扱うJS.

import { prisma } from "../_base";
import Cors from "cors";

// Initializing the cors middleware
const cors = Cors({
    methods: ["GET", "HEAD"],
});

// Helper method to wait for a middleware to execute before continuing
// And to throw an error when an error happens in a middleware
function runMiddleware(req, res, fn) {
    return new Promise((resolve, reject) => {
        fn(req, res, (result) => {
            if (result instanceof Error) {
                return reject(result);
            }

            return resolve(result);
        });
    });
}

export default async function handle(req, res) {
    await runMiddleware(req, res, cors);
    const user = await prisma.post.create({
        data: {
            content: req.body.content,
            author: {
                connectOrCreate: {
                    where: { name: req.body.author },
                    create: { name: req.body.author },
                },
            },
        },
    });
    res.json({ user: user });
}

ミドルウェアの後、あなたはポストを作成して、それをデータベースの既存の著者に接続しています、あるいは、それがすでに存在しないならば、1をつくってください.
それから、あなたは働くウェブサイトを持っています!あなたが追加することができます改善と機能のすべての種類がありますが、読んで、データベースには、あなたの方法でうまくやっていることを意味するために書いている!
ライブを実行している私の例を見てください(そして、コメントを残してください!)こちらはAPI routes