Heim >Web-Frontend >js-Tutorial >Nächste 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:
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
Für dieses Projekt verwenden wir MongoDB über Mongoose als Datenbank.
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
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);
In Next.js können Sie API-Routen im Verzeichnis „pages/api“ erstellen.
// 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; } }
// 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; } }
// 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> ); }
Führen Sie Ihre Anwendung aus:
npm run dev
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!