DetailView从Django在NextJS 13中（获取数据）

huangapple
go评论113阅读模式
英文:

DetailView from Django in NextJS 13 (fetching data)

问题

我有一个基于Django的后端应用程序，以及一个前端使用NextJS的应用程序。在我的Django应用程序中，我有一个名为Post的模型，其中包含两个视图 - PostDetailView 和 PostListView。

  1. from django.shortcuts import get_object_or_404
  2. from django.template import TemplateDoesNotExist
  3. from rest_framework.views import APIView
  4. from rest_framework.response import Response
  5. from rest_framework import status
  6. from .models import Post
  7. from .serializers import PostSerializer
  8. from rest_framework.renderers import JSONRenderer
  9. from django.http import Http404, HttpResponse
  11. class JSONResponse(HttpResponse):
  12.     def __init__(self, data, **kwargs):
  13.         content = JSONRenderer().render(data)
  14.         kwargs['content_type'] = 'application/json'
  15.         super(JSONResponse, self).__init__(content, **kwargs)
  17. class PostListView(APIView):
  18.     def get(self, request):
  19.         posts = Post.objects.all()
  20.         serializer = PostSerializer(posts, many=True)
  21.         return JSONResponse(serializer.data)
  23. class PostDetailView(APIView):
  24.     def get(self, request, pk):
  25.         try:
  26.             post = Post.objects.get(pk=pk)
  27.             serializer = PostSerializer(post)
  28.             return Response(serializer.data, status=status.HTTP_200_OK)
  29.         except Post.DoesNotExist:
  30.             raise Http404

我还设置了serializers.py和urls.py。

  1. # serializers.py
  3. from rest_framework import serializers
  4. from .models import Post
  6. class PostSerializer(serializers.ModelSerializer):
  7.     class Meta:
  8.         model = Post
  9.         fields = '__all__'
  11. # urls.py
  12. from django.contrib import admin
  13. from django.urls import include, path
  14. from . import views
  16. urlpatterns = [
  17.     path('api/posts/', views.PostListView.as_view(), name='post-list'),
  18.     path('api/posts/<int:pk>/', views.PostDetailView.as_view(), name='post-detail'),
  19. ]

在我的NextJS应用程序中，我正在使用一种新的文件夹结构，位于src/app。这是我的文件夹结构。

  1. - src/app
  2.   -- blog
  3.     --- page.tsx (这是我的 'ListView')
  4.   -- [id]
  5.     --- page.tsx (这是我的 'DetailView')

我的ListView运行良好，它显示了所有对象。

  1. interface Post {
  2.     id: number;
  3.     title: string;
  4.     image_url: string | null;
  5.     content: string;
  6. }
  8. const PostsList: React.FC = () => {
  9.     const [posts, setPosts] = useState<Post[]>([]);
  11.     useEffect(() => {
  12.         fetchData();
  13.     }, []);
  15.     const fetchData = async () => {
  16.         try {
  17.             const response: AxiosResponse<Post[]> = await axios.get('http://127.0.0.1:8000/blog/api/posts/');
  18.             const data: Post[] = response.data;
  19.             setPosts(data);
  20.         } catch (error) {
  21.             console.error('Error fetching data:', error);
  22.         }
  23.     };
  25.     return (
  26.         // 返回你的ListView组件部分
  27.     );
  28. };

但是我在DetailView中遇到了问题。我不知道如何显示它。你有解决这个问题的方法吗？

在本地主机上，我的链接如下：

  1. #Django (rest API)
  2. List View: http://127.0.0.1:8000/blog/api/posts/
  3. Detail View: http://127.0.0.1:8000/blog/api/posts/2/（其中2是我的帖子ID）
  5. #NextJS
  6. List View: http://127.0.0.1:3000/blog
  7. Detail View: http://127.0.0.1:3000/blog/2（其中2是我的帖子ID）

我尝试了类似于这样的东西，不幸的是它只显示“Loading...”，这是我无法获取数据的信息。

  1. import React, { useEffect, useState } from 'react';
  2. import axios, { AxiosResponse } from 'axios';
  3. import { usePathname, useRouter, useSearchParams } from 'next/navigation';
  5. interface Post {
  6.     id: number;
  7.     title: string;
  8.     image_url: string | null;
  9.     content: string;
  10. }
  12. const PostDetail: React.FC = () => {
  13.     const [post, setPost] = useState<Post | null>(null);
  15.     const searchParams = useSearchParams()
  16.     const id = searchParams.get('')
  18.     const fetchData = async () => {
  19.         try {
  20.             const response: AxiosResponse<Post> = await axios.get(`http://127.0.0.1:8000/blog/api/posts/${id}/`);
  21.             const data: Post = response.data;
  22.             setPost(data);
  23.         } catch (error) {
  24.             console.error('Error fetching data:', error);
  25.         }
  26.     };
  28.     fetchData();
  30.     if (!post) {
  31.         return <div>Loading...</div>;
  32.     }
  34.     return (
  35.         // 返回你的DetailView组件部分
  36.     );
  37. };
  39. export default PostDetail;

希望这些部分对你有所帮助。

英文:

I've got Django based app as my back-end, and NextJS as front-end. I've got a Post model in my Django App with two views - PostDetailView and PostListView.

  1. from django.shortcuts import get_object_or_404
  2. from django.template import TemplateDoesNotExist
  3. from rest_framework.views import APIView
  4. from rest_framework.response import Response
  5. from rest_framework import status
  6. from .models import Post
  7. from .serializers import PostSerializer
  8. from rest_framework.renderers import JSONRenderer
  9. from django.http import Http404, HttpResponse
  11. class JSONResponse(HttpResponse):
  12. def __init__(self, data, **kwargs):
  13.     content = JSONRenderer().render(data)
  14.     kwargs[&#39;content_type&#39;] = &#39;application/json&#39;
  15.     super(JSONResponse, self).__init__(content, **kwargs)
  17. class PostListView(APIView):
  18. def get(self, request):
  19.     posts = Post.objects.all()
  20.     serializer = PostSerializer(posts, many=True)
  21.     return JSONResponse(serializer.data)
  23. class PostDetailView(APIView):
  24. def get(self, request, pk):
  25.     try:
  26.         post = Post.objects.get(pk=pk)
  27.         serializer = PostSerializer(post)
  28.         return Response(serializer.data, status=status.HTTP_200_OK)
  29.     except Post.DoesNotExist:
  30.         raise Http404

I've also set up serializers.py and urls.py.

  1. #serializers.py
  3. from rest_framework import serializers
  4. from .models import Post
  6. class PostSerializer(serializers.ModelSerializer):
  7. class Meta:
  8.     model = Post
  9.     fields = &#39;__all__&#39;
  11. #urls.py
  12. from django.contrib import admin
  13. from django.urls import include, path
  15. from . import views
  17. urlpatterns = [
  18. path(&#39;api/posts/&#39;, views.PostListView.as_view(), name=&#39;post-list&#39;),
  19. path(&#39;api/posts/&lt;int:pk&gt;/&#39;, views.PostDetailView.as_view(), name=&#39;post-detail&#39;),
  20. ]

In my NextJS App I'm using new approach for folder structure with src/app. This is my folder structure.

  1. - src/app
  2. -- blog
  3. --- page.tsx (here is my &#39;ListView&#39;)
  4. -- [id]
  5. --- page.tsx (here is my &#39;DetailView&#39;)

My ListView works fine, it displays all my objects.

  1. interface Post {
  2.  id: number;
  3.  title: string;
  4.  image_url: string | null;
  5.  content: string;
  6. }
  8. const PostsList: React.FC = () =&gt; {
  9. const [posts, setPosts] = useState&lt;Post[]&gt;([]);
  11. useEffect(() =&gt; {
  12.  fetchData();
  13. }, []);
  15.  const fetchData = async () =&gt; {
  16.     try {
  17.      const response: AxiosResponse&lt;Post[]&gt; = await axios.get(&#39;http://127.0.0.1:8000/blog/api/posts/&#39;);
  18.      const data: Post[] = response.data;
  19.      setPosts(data);
  20.    } catch (error) {
  21.      console.error(&#39;Error fetching data:&#39;, error);
  22.    }
  23.  };
  25.  return (

But I've got a problem with my DetailView. I don't know how display this. Have you got any solutions for this?

On local host my link look like this:

  1. #Django (rest API)
  2. List View: http://127.0.0.1:8000/blog/api/posts/
  3. Detail View: http://127.0.0.1:8000/blog/api/posts/2/ (where 2 is ID for my post)
  5. #NextJS
  6. List View: http://127.0.0.1:3000/blog
  7. Detail View: http://127.0.0.1:3000/blog/2 (where 2 is ID form my post

I've tried with something like this, unfortunetly it displays only 'Loading...' which is my info for bad fetching.

  1. import React, { useEffect, useState } from &#39;react&#39;;
  2. import axios, { AxiosResponse } from &#39;axios&#39;;
  3. import { usePathname, useRouter, useSearchParams } from &#39;next/navigation&#39;;
  5. interface Post {
  6.   id: number;
  7.   title: string;
  8.   image_url: string | null;
  9.   content: string;
  10. }
  12. const PostDetail: React.FC = () =&gt; {
  13.   const [post, setPost] = useState&lt;Post | null&gt;(null);
  15.   const searchParams = useSearchParams()
  16.   const id = searchParams.get(&#39;&#39;)
  18.   const fetchData = async () =&gt; {
  19.     try {
  20.       const response: AxiosResponse&lt;Post&gt; = await axios.get(`http://127.0.0.1:8000/blog/api/posts/${id}/`);
  21.       const data: Post = response.data;
  22.       setPost(data);
  23.     } catch (error) {
  24.       console.error(&#39;Error fetching data:&#39;, error);
  25.     }
  26.   };
  28.   fetchData();
  30.   if (!post) {
  31.     return &lt;div&gt;Loading...&lt;/div&gt;;
  32.   }
  34.   return (
  35.     &lt;div&gt;
  36.       &lt;h1 className=&#39;font-6xl font-red-800&#39;&gt;{post.title}&lt;/h1&gt;
  37.         &lt;/div&gt;
  38.   );
  39. };
  41. export default PostDetail;

答案1

得分: 0

你正在从Next.js的URL中获取帖子ID。由于你正在使用文件结构[id]/page.tsx，Next.js将自动在查询参数中填充id值。你可以使用next/router中的useRouter hook从查询参数中获取id：

  1. import React, { useEffect, useState } from 'react';
  2. import axios, { AxiosResponse } from 'axios';
  3. import { useRouter } from 'next/router';
  5. interface Post {
  6.   id: number;
  7.   title: string;
  8.   image_url: string | null;
  9.   content: string;
  10. }
  12. const PostDetail: React.FC = () => {
  13.   const [post, setPost] = useState<Post | null>(null);
  14.   const router = useRouter();
  15.   const { id } = router.query;
  17.   useEffect(() => {
  18.     if (id) {
  19.       fetchData();
  20.     }
  21.   }, [id]);
  23.   const fetchData = async () => {
  24.     try {
  25.       const response: AxiosResponse<Post> = await axios.get(`http://127.0.0.1:8000/blog/api/posts/${id}/`);
  26.       const data: Post = response.data;
  27.       setPost(data);
  28.     } catch (error) {
  30.     }
  31.   };
  33.   if (!post) {
  34.     return <div>Loading...</div>;
  35.   }
  37.   return (
  38.     <div>
  39.       <h1 className='font-6xl font-red-800'>{post.title}</h1>      
  40.     </div>
  41.   );
  42. };
  44. export default PostDetail;

请注意，这是你提供的代码的中文翻译。

英文:

You are getting the post ID from the URL in Next.js. Since you are using the file structure [id]/page.tsx, Next.js will automatically populate the id value in the query parameter. You can get the id from the query parameter with useRouter hook from next/router:

  1. import React, { useEffect, useState } from &#39;react&#39;;
  2. import axios, { AxiosResponse } from &#39;axios&#39;;
  3. import { useRouter } from &#39;next/router&#39;;
  5. interface Post {
  6.   id: number;
  7.   title: string;
  8.   image_url: string | null;
  9.   content: string;
  10. }
  12. const PostDetail: React.FC = () =&gt; {
  13.   const [post, setPost] = useState&lt;Post | null&gt;(null);
  14.   const router = useRouter();
  15.   const { id } = router.query;
  17.   useEffect(() =&gt; {
  18.     if (id) {
  19.       fetchData();
  20.     }
  21.   }, [id]);
  23.   const fetchData = async () =&gt; {
  24.     try {
  25.       const response: AxiosResponse&lt;Post&gt; = await axios.get(`http://127.0.0.1:8000/blog/api/posts/${id}/`);
  26.       const data: Post = response.data;
  27.       setPost(data);
  28.     } catch (error) {
  30.     }
  31.   };
  33.   if (!post) {
  34.     return &lt;div&gt;Loading...&lt;/div&gt;;
  35.   }
  37.   return (
  38.     &lt;div&gt;
  39.       &lt;h1 className=&#39;font-6xl font-red-800&#39;&gt;{post.title}&lt;/h1&gt;      
  40.     &lt;/div&gt;
  41.   );
  42. };
  44. export default PostDetail;

答案2

得分: 0

I've found solutions for this one.

  1. const [post, setPost] = useState<Post | null>(null);
  2. const pathname = usePathname();
  3. const id = pathname.split('/').pop();
  5. useEffect(() => {
  6.   if (id) {
  7.     fetchData();
  8.   }
  9. }, [id]);
  11. const fetchData = async () => {
  12.   try {
  13.     const response: AxiosResponse<Post> = await axios.get(`http://127.0.0.1:8000/blog/api/posts/${id}/`);
  14.     const data: Post = response.data;
  15.     setPost(data);
  16.   } catch (error) {}
  17. };

(Note: The code is provided without translation as per your request.)

英文:

I've found solutions for this one.

  1. const [post, setPost] = useState&lt;Post | null&gt;(null);
  2. const pathname = usePathname();
  3. const id = pathname.split(&#39;/&#39;).pop();
  5. useEffect(() =&gt; {
  6. if (id) {
  7.   fetchData();
  8. }
  9. }, [id]);
  11. const fetchData = async () =&gt; {
  12. try {
  13.   const response: AxiosResponse&lt;Post&gt; = await axios.get(`http://127.0.0.1:8000/blog/api/posts/${id}/`);
  14.   const data: Post = response.data;
  15.   setPost(data);
  16. } catch (error) {}
  17. };

huangapple
  • 本文由 发表于 2023年7月23日 22:16:40
  • 转载请务必保留本文链接：https://go.coder-hub.com/76748706.html
  • django
  • next.js
  • next.js13
  • rest
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定