🗃️ どのように次のマングースを使用する.MongoDBのためのJS?

25913 ワード
database mongodb react nextjs テキストリンク

おい、すべて👋!


次.JSは驚くべき完全なスタックフレームワークとMongoDBは素晴らしいNOSQLデータベースです.一緒にそれらを使用して超高速かつ素晴らしいアプリになります!このポストでは、我々は前進して、我々の次の中でマングースODMを準備します.JGoGDBの使用をするJSのアプリ!
では、次にどのようにマングースを設定できるかを見てみましょう.JSアプリを接続し、MongoDBデータベースとの対話!

Mongooseの設定と接続文字列


あなたの次で.JMSプロジェクトは、あなたが単にあなたがノードと同じように依存性としてそれをインストールしなければならないモンゴースを設定する.js
npm i mongoose
インストール後mongoose , フォルダを作成しますutils rootで、新しいファイルを作成しますconnectMongo.js ファイル.
このファイルでは、MongoDBに接続する関数をエクスポートします.

import mongoose from 'mongoose';

const connectMongo = async () => mongoose.connect(process.env.MONGO_URI);

export default connectMongo;
ファイル名.env.local プロジェクトのルートで、環境変数に接続URIを格納し、メインコードから非表示にします.
# I am using MongoDB locally but you can use MongoDB Atlas also if you want
MONGO_URI="mongodb://localhost:27017/mongoose_nextjs_demo"

基本マングースモデル


それでmongoose が正常に我々の次に設定されます.JSプロジェクト、残りの作業はノードと全く同じです.jsアプリ.私は個人的にはmodels 私のプロジェクトのルートで、私のモデルファイルを作成します.jsアプリ.

では、ファイル名を作成しますtestModel.js 我々の中でmodels 我々のマングースモデルを作成するフォルダ.
import { Schema, model, models } from 'mongoose';

const testSchema = new Schema({
  name: String,
  email: {
    type: String,
    required: true,
    unique: true,
  },
});

const Test = models.Test || model('Test', testSchema);

export default Test;

IMPORTANT: Notice how we use models.Test and then the logical OR operator and then use the model function by mongoose. We do that because we don't want to create a new model every single time we hit an API route in Next.js. If you don't do that and just go with model('Test', testSchema), you might face an error that would prevent creating/updating etc.


APIルートにおけるマングースの使用


今私たちのモデルが作成され、我々はそれを使用してアクションを見ることができます!
次.JSは完全なスタックフレームワークであり、ノードを動かすことができるノード環境も提供します.JSバックエンドコードを簡単に、フロントエンドとの統合.
にpages/api フォルダーは、最終的にAPIルートを作成するファイルまたはフォルダーを作成し、そのファイルにバックエンドコードを書き込み、残りのAPIとして呼び出すことができます.

このデモのために、私はフォルダを作成しましたtest とファイルadd.js パスを与えるITの中/api/test/add .
import connectMongo from '../../../utils/connectMongo';
import Test from '../../../models/testModel';

/**
 * @param {import('next').NextApiRequest} req
 * @param {import('next').NextApiResponse} res
 */
export default async function addTest(req, res) {
  try {
    console.log('CONNECTING TO MONGO');
    await connectMongo();
    console.log('CONNECTED TO MONGO');

    console.log('CREATING DOCUMENT');
    const test = await Test.create(req.body);
    console.log('CREATED DOCUMENT');

    res.json({ test });
  } catch (error) {
    console.log(error);
    res.json({ error });
  }
}
ここでは、インポートconnectMongo 機能と我々Test それぞれのファイルから作成したモデル.そして、私がトップで持っている大きいコメントは、そうですJSDoc これは、IDEでautocompleteと入力を行うために使用できます.必要に応じて省略できます.
最後に、コードはシンプルで簡単です、あなたは通常使用することができますmongoose 新しいドキュメントを作成するスタイルコード.データを取得することによってreq.body .
からテストすることができますThunder Client VSコードの拡張子Postman or Insomnia . 何でもあなたが望む!私はサンダークライアントを使用するのが好きです.

フロントエンドから新規ドキュメントを作成する


今我々はバックエンドAPIを作成し、我々はそれが動作していることを確認している、我々はすぐに我々のアプリで使用できるようにいくつかのフロントエンドコードを書くことができます.
内部のホームページでindex.js ファイルを変更すると、ボタンをクリックすると、新しいドキュメントがデータベースに追加されます.
import Head from 'next/head';
import Image from 'next/image';
import styles from '../styles/Home.module.css';

export default function Home() {
  const createTest = async () => {
    const randomNum = Math.floor(Math.random() * 1000);
    const res = await fetch('/api/test/add', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({
        name: `Test ${randomNum}`,
        email: `test${randomNum}@test.com`,
      }),
    });
    const data = await res.json();
    console.log(data);
  };
  return (
    <div className={styles.container}>
      <Head>
        <title>Create Next App</title>
        <meta name='description' content='Generated by create next app' />
        <link rel='icon' href='/favicon.ico' />
      </Head>

      <main className={styles.main}>
        <button onClick={createTest}>Create Test</button>
        <h1 className={styles.title}>
          Welcome to <a href='https://nextjs.org'>Next.js!</a>
        </h1>

        <p className={styles.description}>
          Get started by editing{' '}
          <code className={styles.code}>pages/index.js</code>
        </p>

        <div className={styles.grid}></div>
      </main>

      <footer className={styles.footer}>
        <a
          href='https://vercel.com?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app'
          target='_blank'
          rel='noopener noreferrer'
        >
          Powered by{' '}
          <span className={styles.logo}>
            <Image src='/vercel.svg' alt='Vercel Logo' width={72} height={16} />
          </span>
        </a>
      </footer>
    </div>
  );
}

ドキュメントの取得と表示


今では、次に使用する時間です.JSの最大の特徴!サーバー側のレンダリング.次はSSRを使用できます.JSは簡単にバックエンドノードを実行します.私たちが望むようにJSコードは、データを簡単にアクセスすることができますprops をクリックします.
にindex.js ファイルそのものをインポートしますconnectMongo and Test 再び、それらを内部で使用してくださいgetServerSideProps 我々がこのように輸出しなければならない機能👇
import connectMongo from '../utils/connectMongo';
import Test from '../models/testModel';

export const getServerSideProps = async () => {
  try {
    console.log('CONNECTING TO MONGO');
    await connectMongo();
    console.log('CONNECTED TO MONGO');

    console.log('FETCHING DOCUMENTS');
    const tests = await Test.find();
    console.log('FETCHED DOCUMENTS');

    return {
      props: {
        tests: JSON.parse(JSON.stringify(tests)),
      },
    };
  } catch (error) {
    console.log(error);
    return {
      notFound: true,
    };
  }
};
この機能では、我々は簡単に任意のデータを取得することができますし、サーバー上で行われるし、我々はそれを返す必要がありますprops . これはページにアクセスできます.あなたは約 getServerSideProps on the Next.js docs

IMPORTANT: Make sure to sanitize the tests variable with JSON.parse(JSON.stringify(tests)) because it contains ObjectID from MongoDB instead of a normal string. This trick converts it into a string that can be passed in the return object.


それだ!データを取得したら、簡単に私たちのページの小道具を介してアクセスすることで、それを表示することができますし、我々はそれを使用することができます.この場合、このようなデータをマップするので、
export default function Home({ tests }) {
  // ...
  return (
    //   ...
    <div className={styles.grid}>
      {tests.map((test) => (
        <a
          href="https://nextjs.org/docs"
          key={test._id}
          className={styles.card}
        >
          <h2>{test.name} &rarr;</h2>
          <p>{test.email}</p>
        </a>
      ))}
    </div>
    // ...
  );
}
最後に、このページは次のようになります.

私は、下記のyoutubeチュートリアルですべてを深く説明しました👇👇
私は、このポストが正常にあなたの次にマングースをセットアップするのを助けてほしい.jsアプリ.それがしたならば、同様に去ってください!
コメントをあなたの考え!常に改善の余地があるので、このプロジェクトのご提案をお知らせください!
私と私の上で私とつながってください😉
読書ありがとう✌
Fragmentのテーマ
Djangoでの停止の要求の速度を抑制する