React 및 Appwrite로 포럼 만들기 - 2부
11477 단어 appwritejavascriptopensourcewebdev
이 부분은 아마도 짧을 것입니다. appwrite 기능을 사용하기 시작했기 때문에 자체 문서에 게시물을 추가하고 싶습니다. 베어주세요!
데이터 베이스
먼저 Appwrite 콘솔로 이동하여 '데이터베이스'를 클릭합니다. 카테고리에 대한 게시물을 보관하려면 새 컬렉션이 필요합니다. 컬렉션 추가를 클릭하고 아래와 같이 프롬프트를 작성합니다.
속성
방금 생성한 컬렉션의 속성 탭으로 이동하여 다음 속성을 추가합니다.
속성 ID
유형
크기
필수의
정렬
기본값
카테고리 ID
끈
255
예
사용자 ID
끈
255
예
제목
끈
255
아니
콘텐츠
끈
255
아니
작가
끈
255
아니
인덱스
방금 만든 컬렉션의 인덱스 탭으로 이동하여 다음 인덱스를 추가합니다.
인덱스 키
유형
속성
사용자 ID
열쇠
사용자 ID(ASC)
카테고리 ID
열쇠
카테고리 ID(ASC)
💾 새 파일
현재 프로젝트 폴더에 있는지 확인하고 다음 명령을 실행하여 내가 생성한 몇 가지 새 템플릿 파일을 가져올 수 있습니다.
git pull
다음과 같은 새 파일이 추가된 것을 볼 수 있습니다.
이 파일은 범주 목록으로 돌아가서 새 게시물 만들기(다음 할부!)를 처리하기 위한 두 개의 새로운 UI 요소뿐만 아니라 범주의 게시물 나열과 관련됩니다.
🖱 카테고리 클릭
먼저 각 범주를 클릭할 때 '속으로' 탐색할 수 있는 기능을 추가해야 합니다.
src/Components/Forum/Categories/Category/Category.js
로 이동하여 다음과 같이 업데이트합니다.export function Category(props){
const {id, name, description} = props;
const navigate = useNavigate();
return (
<Card style={{marginTop: '1rem'}}>
<CardActionArea onClick={() => {
// Navigate to the 'posts' route with the 'id' property of the category ID.
navigate(`/posts?id=${id}`);
}} >
<CardContent>
<Typography gutterBottom variant="h5" component="div">
{name}
</Typography>
<Typography variant="body2" color="text.secondary">
{description}
</Typography>
</CardContent>
</CardActionArea>
</Card>
)
}
또한
src/Components/Forum/Categories/Categories.js
로 이동하여 다음을 업데이트해야 합니다.return categories.map((category) => (
<Category key={category.$id} id={category.$id} name={category.name} description={category.description} />
));
모든 작업을 올바르게 수행했다면(앞서 설명한 새 제공된 파일 다운로드 포함) 이제 범주를 클릭할 수 있습니다.
✉️ 목록 게시물
'가짜' 게시물을 보는 것은 별로 재미도 없고 유용하지도 않습니다. 이미 데이터베이스에 몇 가지 테스트 게시물을 추가하여 쿼리하고 있음을 알 수 있습니다.
src/Components/Forum/Posts/Posts.js
로 이동하여 return 문 앞에 다음을 추가합니다.const [searchParams, setSearchParams] = useSearchParams();
const navigate = useNavigate();
function fetchPosts(){
api.listDocuments(REACT_APP_POSTS_COLLECTION, [Query.equal('categoryId', searchParams.get("id"))]).then((result) => {
setPosts(result.documents);
}))
}
useEffect(() => {
if(searchParams.get("id")){
fetchPosts();
} else {
navigate('/');
}
}, []);
그런 다음 return 문에서
<PostItem title={'Test PostItem'} />
를 다음으로 바꿉니다.{posts.map((post) => (
<PostItem title={post.title} description={post.description} author={post.author} key={post.$id}/>
))}
이제 해당 카테고리를 클릭하면 Appwrite 콘솔에 추가한 게시물을 볼 수 있습니다.
결론
이 부분에서는 범주를 클릭하고 게시물을 나열하는 방법을 살펴보았습니다. 중첩 부분에서는 실제로 포럼 UI에서 바로 새 게시물을 추가하고 권한이 올바르게 설정되었는지 확인합니다(게시물을 편집/제거하기 위한 관리자 역할의 기초 작업!).
늘 그렇듯이 제가 잘 설명하지 못하거나 놓친 부분이 있으면 연락주세요! 다음 기사를 게시할 때 내 눈을 유지!
📚 더 알아보기
Reference
이 문제에 관하여(React 및 Appwrite로 포럼 만들기 - 2부), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/alexcodes/creating-a-forum-with-react-and-appwrite-part-2-498b텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)