게시물 보기

게시물 보기 페이지 만들기에 관해 설명합니다.

Data ID

GET_POST

Request

Name Value
post_key 게시물 고유 키
page_link_url 코멘트 목록 페이징의 링크 URL
page_link_hash 페이징의 이동 링크 Hash(Hash 페이지 내에서 Hash링크로 이동해야 하는경우 필요)
page 코멘트 페이지 번호
list_per_page 페이지당 출력될 코멘트 개수
block_per_page 페이지 내 페이징 블럭에 표시될 페이지 링크 수
get_most_read_post_flg 많이 본 게시물 data 요청 여부(Y 또는 N)
most_read_post_limit 표시할 많이 본 게시물 수

Response

JSON : output.post[0], PHP : $output['post'][0]

Name Value
avatar_url 아바타 URL
bbs_name 게시판 명
bbs_seq 게시판 시퀀스
contents 게시물 내용 Array(['content'=>내용])
create_date 등록일시 Y-m-d H:i:s 형식
create_date_type_ymhi 등록일시 y-m-d h:i 형식
member_seq 게시자 회원 시퀀스
modify_date 수정일시 Y-m-d H:i:s 형식
nickname 게시자 닉네임(현재 시점)
post_key 게시물 고유키
read_count 게시물 조회수
reg_name 게시자 닉네임(게시물 등록시점)
seq 게시물 시퀀스
subject 제목
tags 태그 Array(['tag'=>'태그1'],['tag'=>'태그2'])
related_post 관련 글 목록 Array
[
'subject'=>'제목',
'reg_name'=>'등록인 이름',
'avatar_url'=>'등록인 이름',
'create_date'=>'등록일',
'post_key'=>'게시글 고유키'
]

HTML attributes

Value의 대괄호 안에 값은 사용자가 변경해야 하는 값입니다.

Tag : div 게시물이 표시되는 영역

Name Value Description
id post  
data-post-key [post_key] \{\{output.post[0].post_key\}\}, $output['post'][0]['post_key']

Tag : a 게시물 수정 버튼

Name Value Description
href [URL]?post_key=[post_key] post_key 파라미터를 포함한 게시물 수정 페이지 URL

Tag : a 또는 button 게시물 삭제 버튼(button일 경우 type="button")

Name Value Description
class h-btn-delete 삭제 event bind용 selector class
data-return-url [URL] 게시물 삭제 후 이동할 페이지 URL

HTML

게시판 명

게시물의 제목이 표시됩니다.

24-12-24 01:27 by
등록인

H:Dev+는 MVC(Model-View-Controller) 모델을 기반으로 하며, Back-End 영역에서 Model과 Controller를 제공하여 Front-End 개발에 집중할 수 있도록 지원합니다. Front-End와 Back-End 간의 통신은 RESTful 방식을 사용합니다. 이를 위해 Connector을 통해 POST 요청(Request)을 보내고 JSON 형태로 결과를 반환(Response)합니다. URL 대신 dataID를 사용하여 고유 리소스 식별자를 지정하며, 보안을 위해 secureKey가 필요합니다.

태그1 태그2 태그3

VueJS

<div id="post" colon:data-post-key="output.post[0].post_key" class="me-3">
	<div class="py-3">
		<div class="row">
			<div class="col-12">
				<div class="d-flex justify-content-between align-items-center py-3 border-bottom">
					<div>
						<small class="ms-1 fw-bold">\{\{output.post[0].bbs_name\}\}</small>
					</div>
					<div class="d-flex justify-content-between align-items-center" vv-if="output.user.auth_flg && output.post[0].member_seq == output.user.seq">
						<a colon:href="'./modify.html?post_key='+output.post[0].post_key" class="mx-1 btn btn-dark d-flex justify-content-between align-items-center lh-1"><small class="smaller d-none text-white d-md-block">수정</small></a>
						<a href="#" data-return-url="./list.html" colon:data-post-key="output.post[0].post_key" class="h-btn-delete mx-1 btn btn-dark d-flex justify-content-between text-white align-items-center lh-1"><small class="smaller d-none d-md-block">삭제</small></a>
					</div>
				</div>
				<h1 class="fs-3 mt-4 mb-4">\{\{output.post[0].subject\}\}</h1>
			</div>
		</div>
		<div class="row">
			<div class="col-12 text-start">
				<div class="d-flex justify-content-start align-items-center">
					\{\{output.post[0].create_date_type_ymhi\}\} by
					<div class="mx-2">
						<img vv-if="output.post[0].avatar_url" colon:src="output.post[0].avatar_url" style="max-width:1.5rem;"/>
						<i vv-else class="fas fa-user-circle"></i>
					</div>
					\{\{output.post[0].reg_name\}\}
				</div>
			</div>
		</div>
	</div>
	<div class="row">
		<div class="col-12">
			<div><p class="text-justify" vv-html="output.post[0].contents[0].content"/></div>
			<div class="d-flex align-items-center justify-content-start my-4" vv-if="output.post[0].tags && output.post[0].tags.length>0">
	                <span vv-for="tags in output.post[0].tags" class="badge bg-white border me-1 fw-normal text-hbnc-secondary me-2 px-3 py-2">
	                    \{\{tags.tag\}\}
	                </span>
			</div>
		</div>
	</div>
</div>

PHP

<div id="post" data-post-key="<?=$output['post'][0]['post_key']; ?>" class="me-3">
	<div class="py-3">
		<div class="row">
			<div class="col-12">
				<div class="d-flex justify-content-between align-items-center py-3 border-bottom">
					<div>
						<small class="ms-1 fw-bold"><?=$output['post'][0]['bbs_name']; ?></small>
					</div>
					<? if($output['user']['auth_flg'] && $output['post'][0]['member_seq']==$output['seq']){ ?>
					<div class="d-flex justify-content-between align-items-center" vv-if="output.user.auth_flg && output.post[0].member_seq == output.user.seq">
						<a href="'./modify.html?post_key=<?=$output['post'][0]['post_key']; ?>" class="mx-1 btn btn-dark d-flex justify-content-between align-items-center lh-1"><small class="smaller d-none text-white d-md-block">수정</small></a>
						<a href="#" data-return-url="./list.html" data-post-key="<?=$output['post'][0]['post_key']; ?>" class="h-btn-delete mx-1 btn btn-dark d-flex justify-content-between text-white align-items-center lh-1"><small class="smaller d-none d-md-block">삭제</small></a>
					</div>
					<? } ?>
				</div>
				<h1 class="fs-3 mt-4 mb-4"><?=$output['post'][0]['subject']; ?></h1>
			</div>
		</div>
		<div class="row">
			<div class="col-12 text-start">
				<div class="d-flex justify-content-start align-items-center">
					<?=$output['post'][0]['create_date_type_ymhi']; ?> by
					<div class="mx-2">
						<? if($output['post'][0]['avatar_url']){ ?>
						<img vv-if="output.post[0].avatar_url" src="<?=$output['post'][0]['avatar_url']; ?>" style="max-width:1.5rem;"/>
						<? }else{ ?>
						<i class="fas fa-user-circle"></i>
						<? } ?>
					</div>
					<?=$output['post'][0]['reg_name']; ?>
				</div>
			</div>
		</div>
	</div>
	<div class="row">
		<div class="col-12">
			<div><p class="text-justify"/><?=$output['post'][0]['content']; ?></div>
			<? if(is_array($output['post'][0]['tags']) && count($output['post'][0]['tags'])>0){ ?>
			<div class="d-flex align-items-center justify-content-start my-4">
				<? foreach($output['post'][0]['tags'] as $arrTags){ ?>
	                <span vv-for="tags in output.post[0].tags" class="badge bg-white border me-1 fw-normal text-hbnc-secondary me-2 px-3 py-2">
	                    <?=$arrTags['tag'];?>
	                </span>
				<? } ?>
			</div>
			<? } ?>
		</div>
	</div>
</div>

관련 링크