글목록 GET => http://1.234.5.158:23000/board101/select.json?page=1&text=
글쓰기 POST => http://1.234.5.158:23000/board101/insert.json => title, content, writer
글수정 PUT => http://1.234.5.158:23000/board101/update.json?no=113 => title, content, writer
글삭제 DELETE => http://1.234.5.158:23000/board101/delete.json?no=113
글1개조회 GET => http://1.234.5.158:23000/board101/selectone.json?no=668
조회수증가 PUT => http://1.234.5.158:23000/board101/updatehit.json?no=668
await axios.get(url, {headers});
await axios.post(url, body, {headers});
await axios.put(url, body, {headers});
await axios.delete(url, {headers:headers, data:body});객체 이해용
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>게시판목록</title>
<style>
.container {
width : 800px;
margin : 0px auto;
padding : 10px;
border : 3px solid #cccccc;
}
</style>
</head>
<body>
<div class="container">
<h3>게시판목록</h3>
<a href="/boardwrite1.html"><button>게시판글쓰기</button></a>
<hr />
<h3>obj 실습</h3>
<div id="output"></div>
<hr />
<h3>obj1 실습</h3>
<div id="output1"></div>
<hr />
</div>
<script>
// 위쪽의 태그를 찾아서 보관(태그에 정보를 추가, 가져오기 가능)
const div = document.getElementById('output');
const div1 = document.getElementById('output1');
console.log(div, div1); //확인용 (여러개 동시 출력가능)
// 백엔드에 게시물1개 정보를 줄때
const obj = {
no : 1,
title : '제목',
writer : '작성자',
hit : 123,
regdate :'2022-12-13 14:56:21'
}
//여기서 앞에 있는건 뒤에 있는 정보를 알려주는 키일뿐. 필요한건 : 이후의 정보
//키는 우리가 정하는게 아니라 백엔드에서 정해서 알려준다. 그걸 이용해서 필요한 정보를 찾아내야 하는것.
// 위에서 찾은 div태그에 뒤쪽의 내용을 추가 ( += )
div.innerHTML += `<p>글번호 : ${obj.no}</p>`;
div.innerHTML += `<p>글제목 : ${obj.title}</p>`;
div.innerHTML += `<p>작성자 : ${obj.writer}</p>`;
div.innerHTML += `<p>조회수 : ${obj.hit}</p>`;
div.innerHTML += `<p>등록날짜 : ${obj.regdate}</p>`;
//여기서 중요한건 가져오는 정보를 obj.no 식으로 표현한다는 것이다.
//콘솔창에서 원하는 정보 값을 확인한 후 출력할 줄 아는게 중요.
// 백엔드에서 받은 JSON 문서 구조
const obj1 = {
status : 200,
total : 1,
result : {
code : 1,
name : '가나다',
price : 200
}
}
div1.innerHTML += `<p>물품코드 : ${obj1.result.code}</p>`;
div1.innerHTML += `<p>물품명 : ${obj1.result.name}</p>`;
div1.innerHTML += `<p>물품가격 : ${obj1.result.price}</p>`;
//더 하위값으로 가려면 .을 찍으면 된다.
// 백엔드에 JSON 문서 받음
// Object객체 obj => {no:1} => obj.no
// Array 배열 arr => [21,22,33,44] => arr[2]=33
const obj2 = {
status : 200,
result : [
{no:1, name:'a1'},
{no:2, name:'a2'},
{no:3, name:'a3'}
]
}
//객체와 배열이 혼합된 형태. 형식은 무한한 방식으로 조합이 가능하다. 그런 형식 내에서 이 데이터가 객체인지 배열인지를 알아내서 원하는 정보를 뽑아내는게 중요.
//주로 {} => 객체, [{}, ..., {}] => 배열 이지만 반드시 그런건 아님. [{}] 꼴의 객체도 있다.
// tmp2 => [{…}, {…}, {…}] => Object 3개를 보관하는 배열
const tmp2 = obj2.result;
// for는 반복문. 반드시 tmp2가 배열형태여야 한다 [ {}...{} ]
for(let tmp of tmp2) {
console.log(tmp.no, tmp.name); //콘솔을 3번 돌리는것과 똑같음. 한개 꺼낼때 마다 tmp에 보관되는것.
}
// tmp2 => [ {1},{2},{3} ]
// tmp => { }
</script>
</body>
</html>파일명 : board1.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>게시판목록</title>
<style>
.container {
width : 600px;
margin : 0px auto;
padding : 10px;
border : 3px solid #cccccc;
}
table {
width : 100%;
background-color : azure;
border-collapse : collapse; //보기 싫은 두줄 테두리 사라짐
}
</style>
</head>
<body>
<div class="container">
<h3>게시판목록</h3>
<a href="/boardwrite1.html"><button>게시판글쓰기</button></a>
<hr />
<table border="1">
<thead>
<tr>
<th>번호</th>
<th>제목</th>
<th>작성자</th>
<th>조회수</th>
<th>날짜</th>
</tr>
</thead> // 기본 테이블 틀을 미리 작성 해둔것.
<tbody id="tbody"></tbody> // 백엔드에서 받아오는 데이터를 tbody에 받아야 한다. 그러기 위해서 id 부여.
</table>
</div>
<script src="js/axios.min.js" type="text/javascript"></script>
// 백엔드에서 데이터를 받는 라이브러리에는 XMLHttpRequest, fetch, axios.. 등 있음. 그중 axios를 사용한것.
//라이브러리는 준비물이므로 우리가 짜는 스크립트 보다 위에 있어야한다.
<script>
// 위에 내용을 추가할 태그 연결하기
const tbody = document.getElementById('tbody');
//tbody에 데이터를 추가 하고 싶으므로 tbody를 찾음
/* 조회수 증가용 함수 */
/* ex) function 함수명( 받고싶은 값 ) { } */
async function handleHit(e) {
//async는 await를 쓰면 필수적으로 붙여야함.
//e는 글 번호를 받아오는 변수(?)
//함수는 자동실행 되지 않고 호출을 해야 수행됨. 그럼 그냥 함수 안쓰고 바로 출력된는걸로 쓰면 안되나? async는 함수에만 붙기 때문에 await를 쓸려면 함수를 쓰고 호출을 ㅎ해야함.
/* 조회수를 1증가시키고 */
const url = `http://1.234.5.158:23000/board101/updatehit.json?no=${e}`; // url은 데이터를 보내는 주소
//백틱을 써야 변수 표현이 바로 되므로 ' 보다는 `를 쓰자.
const headers = {"Content-Type":"application/json" }; // header는 데이터의 타입
const body = {}; // 전달할 내용없어도 {} 빈객체 만들어야 함.
const {data} = await axios.put(url, body, {headers});
//여기에 body가 들어가야 하기때문에. 이런 형식은 배포한 사람이 정해놓은것. 그대로 따라야함.
//await을 쓰는 이유는 데이터를 받기위해서는 다른 서버로 갔다와야 하므로 시간이 필요. await가 없으면 기다리지 못하고 바로 값을 출력->값이 없다고 뜬다.
console.log(data);//필요한 정보는 data내에 있으므로 확인. 나머지 정보들은 데이터의 상태를 알려주는 것이다.
//프론트에서 사용자 한테 데이터를 잘 받았는지 상태를 알려줘야 하므로 데이터가 잘 전송됐는지 여부가 항상 뜨는것
if(data.status === 200) {
// 성공하면 이동해야 됨.
window.location.href=`/boardone1.html?no=${e}`;
//window.location은 a태그와 같은 역할이지만 스크립트에서 역할을 하는것. a태그는 html에서 역할 하는것... 같이 배우고 있다고 혼동하지 말자.
//e가 글번호의 정보를 가지는 변수
}
}
// 목록을 가져오는 함수
async function onMounted() {
const url = `http://1.234.5.158:23000/board101/select.json?page=1&text=`;
const headers = {"Content-Type":"application/json"};
// 벡엔드를 호출하고 결과받기
// { data } 는 response.data와 같은 기능
const { data } = await axios.get(url, {headers});
if(data.status === 200) {
//if는 함수가 동작했다는걸 전제로 하고있으므로 함수 내부에 존재
// tbody태그에 내용을 추가
//const data.rows = [{},{},{}...{}]
for(let tmp of data.rows) {
//console.log(tmp);
tbody.innerHTML +=
`<tr>` +
`<td>${tmp._id}</td>`+
`<td><a href='#' onclick='handleHit(${tmp._id})'>${tmp.title}</a></td>`+
`<td>${tmp.writer}</td>`+
`<td>${tmp.hit}</td>`+
`<td>${tmp.regdate}</td>`+
`</tr>`
}
//받는건 데이터 이므로 th가 아니라 td를 사용
//조회수 증가를 게시판 목록에서 짜지 않고 게시물 내에서 짜면 새로고침할때마다 조회수가 올라간다. 게시판 목록에서 짜는 것이 정석.
//조회수 증가는 수정이므로 PUT 사용.
//조회수 증가를 하기 위해서는 게시글을 클릭하면 '조회수 1 증가 요청->결과를 받아서 조회수 갱신->클릭한 페이지로 이동'의 3단계가 필요하다.
//1, 2번째 단계를 처리하기 전에 클릭한 페이지로 이동하면 안되므로 a 태그에 # 처리를 해서 눌려지기는 하지만 이동은 하지 않는 상태로 바꿔둔것.
//조회수 1 증가 요청은 const url, headers, body 부분으로 처리 됨
//눌렀을때 어느 게시글을 눌렀는지 구분이 되야함->누른 게시글 번호를 변수로 받아서 알려준다.
//여기까진 알겠는데... 왜 e로 굳이 받는지...?
}
else {
alert('서버 오류');
}
}
// 함수를 호출함.
onMounted();
</script>
</body>
</html>파일명 : boardwrite1.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>게시판글쓰기</title>
<style>
.container {
width : 600px;
margin : 0px auto;
padding : 10px;
border : 3px solid #cccccc;
}
.lbl {
display : inline-block;
width :100px;
}
.item {
margin-bottom: 5px;
}
</style>
<link href="//cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet" />
</head>
<body>
<div class="container">
<h3>게시판글쓰기</h3>
<hr />
<div class="item">
<label class="lbl">제목</label>
<input type="text" id="title" placeholder="제목입력" autofocus />
</div>
<div class="item">
<label class="lbl">내용</label>
<div id="editor" style="height:300px"></div>
</div>
<div class="item">
<label class="lbl">작성자</label>
<input type="text" id="writer" placeholder="작성자입력"/>
</div>
<div class="item">
<label class="lbl"></label>
<button onclick="handleInsert()">글쓰기</button>
<a href="/board1.html"><button>목록</button></a>
</div>
</div>
<script src="//cdn.quilljs.com/1.3.6/quill.min.js"></script>
<script src="js/axios.min.js" type="text/javascript"></script>
<script>
var quill = new Quill('#editor', {
theme: 'snow'
});
// 가져오기
// 에디터의 내용 가져오기 => quill.getText();
// 위의 태그를 찾아서 변수로 연결하기
const title = document.getElementById('title');
const writer = document.getElementById('writer');
// 함수 생성, 호출되어야 실행됨.
async function handleInsert() {
console.log('handleInsert');
if(title.value.length <= 0){
alert('제목을 입력하세요.');
title.focus();
return false; // 함수가 종료됨.
}
// asdf
// quill.getText() => asdf
// quill.getText().length => 4
// length를 쓰지않고 <=0으로 쓰면 글 내용의 값이 0보다 작거나 같다면 유효성 검사에 걸린다.
if(quill.getText().length <= 1) {
alert('내용을 입력하세요.');
quill.root.focus();
return false;
}
// 다운받아서 사용한 js 기본값이 1이라서 <=1 로 표기함
// 위의 if문이 수행되지 않는 위치, 벡엔드로 전송할 위치
const url = `http://1.234.5.158:23000/board101/insert.json`;
const headers = {"Content-Type":"application/json"};
//Object로 묶어서 전송, title, content, writer 벡엔드
const body = {
title : title.value,
content : quill.getText(),
writer : writer.value
};
// 벡엔드에서 완료되는 정보를 받기위한 시간이 필요 await
const { data } = await axios.post( url, body, {headers});
console.log(data);
if(data.status === 200){
alert('글쓰기 성공');
window.location.href="/board1.html"; //a 태그와 같은 기능
}
}
</script>
</body>
</html><!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>게시판내용</title>
<style>
.container {
width : 600px;
margin : 0px auto;
padding : 10px;
border : 3px solid #cccccc;
}
</style>
</head>
<body>
<div class="container">
<h3>게시물 내용</h3>
<hr />
<div id="div"></div>
</div>
<script src="js/axios.min.js" type="text/javascript"></script>
<script>
const div = document.getElementById('div');
// js에서 주소의 정보 읽기
console.log(window.location);
//서버주소:5000/boardone1.html?no=668
//서버주소:5000/boardone1.html?abc=668&def=123&asdf=234
const href = new URL(window.location);
const no = href.searchParams.get("no");
console.log(no); //668이 출력됨
// 함수생성, 자동호출되지 않음
async function handleData() {
const url = `http://1.234.5.158:23000/board101/selectone.json?no=${no}`;
const headers = {"Content-Type":"application/json"};
const { data } = await axios.get(url, {headers});
console.log(data);
if(data.status ===200){
div.innerHTML += `글번호 : <p>${data.result._id}</p>`;
}
}
// 호출함
handleData();
</script>
</body>
</html>###그밖에
- https://www.w3schools.com/js/js_this.asp <<<<<this의 정체에 관한것. 내가 본건 이벤트에서 this 는 받은 이벤트의 요소라는것...!
- https://opentutorials.org/course/1223/5369 <<<<< 메소드.. 등 기본 용어에 대해 정립할 필요가 있겠음 -> '코어 스크립트' 책 사기
- 다운받아서 사용하는 백엔드 데이터가 보기 불편할때
크롬 내에서 확장팩 설치로 편하게 볼 수 있다.
크롬 웹스토어 검색->json검색->json formatter추가->백엔드 데이터 새로고침하면 보기 편안 - 라이브러리 axios 사용
axios cdn 검색->jsde... 사용->주소창에 복사, 붙여 넣기->점점점에서 도구 더보기->페이지를 다른이름으로 저장 - 게시판 목록에서 특정 게시글로 이동하려면 각각의 게시글 url에 id를 부여하는데 어떻게 하나?
게시글 제목 클릭하면 이동하는<a href='/boardone2.html'></a>태그 에서 놀랍게도 주소 뒤에 ?만 붙이면 해결됨.. 그뒤로 원하는 id값을 입력하면 된다<a href='/boardone2.html?no=${tmp._id}'></a>처럼.. 한참 헤맸는데 허무
###궁금한점
- 조회수 증가 함수에서 글번호는 $로 변수처리 했는데 갑자기 e는 왜 튀어나오는건지?
알았음. 게시글 목록 데이터 가져오는 함수 안에서 처리된 변수이므로(for 구문 사용하면서) 조회수 증가 함수에서는 정의되지 않은 변수. 그래서 게시글 목록 데이터 가져오는 함수안에서 e로 다시 변수 처리 하고 이 변수 값을 조회수 증가 함수로 가져오는것. 이라고 이해함.
keep going