Heim >Web-Frontend >js-Tutorial >Nächste JS-Blog-App

Nächste JS-Blog-App

王林
王林Original
2024-09-05 17:32:091005Durchsuche

Next JS Blog App

Um eine Blog-App mit Next.js mit Backend und Frontend zu erstellen, in der Benutzer Blogs hinzufügen und löschen und die Daten in einer Datenbank speichern können, führen Sie die folgenden Schritte aus:

1. Next.js-Projekt einrichten

Erstellen Sie zunächst ein neues Next.js-Projekt, falls Sie dies noch nicht getan haben:

npx create-next-app@latest blog-app
cd blog-app
npm install

2. Datenbank einrichten

Für dieses Projekt verwenden wir MongoDB über Mongoose als Datenbank.

  • Mongoose installieren:
npm install mongoose
  • Erstellen Sie eine MongoDB-Datenbank mit Diensten wie MongoDB Atlas oder verwenden Sie ein lokales MongoDB-Setup.

  • Stellen Sie eine Verbindung zu MongoDB her, indem Sie eine lib/mongodb.js-Datei erstellen:

// lib/mongodb.js
import mongoose from 'mongoose';

const MONGODB_URI = process.env.MONGODB_URI;

if (!MONGODB_URI) {
  throw new Error('Please define the MONGODB_URI environment variable');
}

let cached = global.mongoose;

if (!cached) {
  cached = global.mongoose = { conn: null, promise: null };
}

async function dbConnect() {
  if (cached.conn) {
    return cached.conn;
  }

  if (!cached.promise) {
    cached.promise = mongoose.connect(MONGODB_URI).then((mongoose) => {
      return mongoose;
    });
  }
  cached.conn = await cached.promise;
  return cached.conn;
}

export default dbConnect;

Fügen Sie den MONGODB_URI zu Ihrer .env.local-Datei hinzu:

MONGODB_URI=mongodb+srv://<username>:<password>@cluster0.mongodb.net/blog-app?retryWrites=true&w=majority

3. Blog-Schema definieren

Erstellen Sie ein Modell für Blogs in models/Blog.js:

// models/Blog.js
import mongoose from 'mongoose';

const BlogSchema = new mongoose.Schema({
  title: {
    type: String,
    required: true,
  },
  content: {
    type: String,
    required: true,
  },
}, { timestamps: true });

export default mongoose.models.Blog || mongoose.model('Blog', BlogSchema);

4. API-Routen für Blog erstellen

In Next.js können Sie API-Routen im Verzeichnis „pages/api“ erstellen.

  • Erstellen Sie „pages/api/blog/index.js“ für die Bearbeitung von GET- und POST-Anfragen (Hinzufügen von Blogs):
// pages/api/blog/index.js
import dbConnect from '../../../lib/mongodb';
import Blog from '../../../models/Blog';

export default async function handler(req, res) {
  const { method } = req;

  await dbConnect();

  switch (method) {
    case 'GET':
      try {
        const blogs = await Blog.find({});
        res.status(200).json({ success: true, data: blogs });
      } catch (error) {
        res.status(400).json({ success: false });
      }
      break;
    case 'POST':
      try {
        const blog = await Blog.create(req.body);
        res.status(201).json({ success: true, data: blog });
      } catch (error) {
        res.status(400).json({ success: false });
      }
      break;
    default:
      res.status(400).json({ success: false });
      break;
  }
}
  • Erstellen Sie seiten/api/blog/[id].js für die Bearbeitung von DELETE-Anfragen:
// pages/api/blog/[id].js
import dbConnect from '../../../lib/mongodb';
import Blog from '../../../models/Blog';

export default async function handler(req, res) {
  const { method } = req;
  const { id } = req.query;

  await dbConnect();

  switch (method) {
    case 'DELETE':
      try {
        const blog = await Blog.findByIdAndDelete(id);
        if (!blog) {
          return res.status(400).json({ success: false });
        }
        res.status(200).json({ success: true, data: {} });
      } catch (error) {
        res.status(400).json({ success: false });
      }
      break;
    default:
      res.status(400).json({ success: false });
      break;
  }
}

5. Erstellen Sie ein Frontend zum Hinzufügen und Anzeigen von Blogs

  • Erstellen Sie eine Seite „pages/index.js“ zum Auflisten aller Blogs und ein Formular zum Hinzufügen neuer Blogs:
// pages/index.js
import { useState, useEffect } from 'react';
import axios from 'axios';

export default function Home() {
  const [blogs, setBlogs] = useState([]);
  const [title, setTitle] = useState('');
  const [content, setContent] = useState('');

  useEffect(() => {
    async function fetchBlogs() {
      const response = await axios.get('/api/blog');
      setBlogs(response.data.data);
    }
    fetchBlogs();
  }, []);

  const addBlog = async () => {
    const response = await axios.post('/api/blog', { title, content });
    setBlogs([...blogs, response.data.data]);
    setTitle('');
    setContent('');
  };

  const deleteBlog = async (id) => {
    await axios.delete(`/api/blog/${id}`);
    setBlogs(blogs.filter(blog => blog._id !== id));
  };

  return (
    <div>
      <h1>Blog App</h1>
      <form onSubmit={(e) => { e.preventDefault(); addBlog(); }}>
        <input
          type="text"
          value={title}
          onChange={(e) => setTitle(e.target.value)}
          placeholder="Blog Title"
        />
        <textarea
          value={content}
          onChange={(e) => setContent(e.target.value)}
          placeholder="Blog Content"
        />
        <button type="submit">Add Blog</button>
      </form>
      <h2>Blogs</h2>
      <ul>
        {blogs.map(blog => (
          <li key={blog._id}>
            <h3>{blog.title}</h3>
            <p>{blog.content}</p>
            <button onClick={() => deleteBlog(blog._id)}>Delete</button>
          </li>
        ))}
      </ul>
    </div>
  );
}

6. Starten Sie den Server

Führen Sie Ihre Anwendung aus:

npm run dev

7. Testen der App

  • Sie können jetzt Blogs hinzufügen und löschen und alle Daten werden in Ihrer MongoDB-Datenbank gespeichert.

Lassen Sie mich wissen, wenn Sie weitere Details benötigen!

Das obige ist der detaillierte Inhalt vonNächste JS-Blog-App. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn