기본 구조
Front-End
View
Connector
POST
JSON
POST
JSON
Back-End
Controller
Model
H:Dev+는 MVC(Model-View-Controller) 모델을 기반으로 하며, Back-End 영역에서 Model과 Controller를 제공하여 Front-End 개발에 집중할 수 있도록 지원합니다.
Front-End와 Back-End 간의 통신은 RESTfull과 유사한 방식을 사용하나 Request와 Response는 그와 다른 규칙이 적용됩니다 사용합니다. 이를 위해 Connector을 통해 POST 요청(Request)을 보내고 JSON 형태로 결과를 반환(Response)합니다. URL 대신 dataID를 사용하여 고유 리소스 식별자를 지정하며, 보안을 위해 secureKey가 필요합니다.
Data ID
변수 명 : dataID
dataID는 Front-End와 Back-End 간에 데이터를 전송하기 위한 고유한 리소스 식별자입니다. 각각의 기능 문서에서 해당 dataID를 명시하고 있습니다. dataID를 정의하는 방법은 아래의 Request 섹션에서 안내됩니다.
Secure Key
변수 명 : secureKey
Secure key는 Front-End와 Back-End 간의 통신 과정에서 보안을 위해 사용되는 키입니다. 키는 회원 가입 후 마이페이지에서 확인할 수 있습니다.
Request
Javascript
<html>
<head>
...
<!-- REQUEST DATA -->
<script>
const requestData = {'dataID':'GET_POST_LIST','bbs_seq':1,'page':1};
</script>
</head>
<body>
<div id="app">
....
</div>
<!-- JQUERY REQUIRED -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/jquery-form/form@4.3.0/dist/jquery.form.min.js"></script>
<!-- VUE -->
<script src="https://unpkg.com/vue@3"></script>
<script src="https://unpkg.com/vue-router@4"></script>
<script src="https://cdn.jsdelivr.net/npm/axios@1.1.2/dist/axios.min.js"></script>
<!-- CONNECTOR -->
<script src="/_connector/yellow.501.js"></script>
</body>
</html>
PHP
<?php
/* REQUEST DATA */
$arrRequestData = ['dataID':'GET_POST_LIST','bbs_seq':1,'page':1];
/* CONNECTOR */
include($_SERVER['DOCUMENT_ROOT'].'_connector/yellow.501.php');
?>
<html>
<head>
...
</head>
<body>
....
<pre>
<?php print_r($output); ?>
</pre>
<!-- JQUERY REQUIRED -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/jquery-form/form@4.3.0/dist/jquery.form.min.js"></script>
<!-- DEFAULT JAVASCRIPT -->
<?php foreach($output['controller_info']['js'] as $strJSUrl){ ?>
<script src="<?=$strJSUrl;?>"></script>
<?php } ?>
</body>
</html>
Response
JSON : output
{
'session':{
'id':....
'token':....
},
'user':{
'auth_flg':false,
'email':'....',
'cell_phone':'....',
'name':'....',
'level':'....',
'nickname':'....'
},
....
'env':{
'js':[...],
'mobile_flg':true
}
}
PHP : $output
[
'session'=>[
'id'=>....
'token'=>....
],
'user'=>[
'auth_flg'=>false,
'email'=>'....',
'cell_phone'=>'....',
'name'=>'....',
'level'=>'....',
'nickname'=>'....'
],
....
'env'=>[
'js'=>[...],
'mobile_flg'=>true
]
]
| Key depth 1 | Key depth 2 | Value |
|---|---|---|
| session | id | Session ID |
| token | Back-End Access를 위한 보안 토큰 | |
| user | auth_flg | 로그인 여부(true:로그인,false:비 로그인) |
사용자 이메일 auth_flg = true일 경우 반환 | ||
| cell_phone | 사용자 휴대폰 auth_flg = true일 경우 반환 | |
| name | 사용자 이름 auth_flg = true일 경우 반환 | |
| level | 사용자 레벨 auth_flg = true일 경우 반환 | |
| nickname | 사용자 닉네임 auth_flg = true일 경우 반환 | |
| env | js | 기본으로 제공되는 JavaScript |
| mobile_flg | 모바일 접속 여부(true:모바일,false:모바일 아님) |