23.04.27 목 34일차
jQuery
- node.js
* 데이터 수정(put)
app.put('/products/:id', function(request,response){
var id = Number(request.params.id);
console.log("확인 : " + id)
var name = request.query.name;
var price= request.query.price;
console.log("이름 : " + name)
if(items[id]){
items[id].name = name
items[id].price = price
response.send({message:'데이터를 수정했습니다.', data:items[id]});
} else {
response.send({error:'존재하지 않는 데이터 입니다. !!'});
}
})
----------------------------------------------------------------------
* 데이터 삭제(delete)
app.del('/products/:id', function(request, response){
var id = Number(request.params.id);
if(isNaN(id)){
response.send({error:'숫자를 입력하세요 !'});
} else if(items[id]){
items.splice(id, 1);
response.send({message:'데이터를 삭제 했습니다!'});
} else {
response.send({error:'존재하지 않는 데이터 입니다!!'});
}
})
splice (몇번째, 몇번째 부터 개수만큼 삭제) 한다는 뜻
EX)
items.splice(id, 0); 아무것도 삭제 되지 않는다.!!
items.splice(id, 2); 0을 입력하면 0번째 배열 와 1번째 배열 2개 삭제
* 결과값 확인 URL 입력
- 데이터 수정(put) 확인
:put - http://127.0.0.1:52273/products/0?name=소주&price=4000
아이템 0번 주소 값의 이름을 소주 값을 4000 으로 변경
- 데이터 삭제(delete) 확인
:delete - http://127.0.0.1:52273/products/1
아이템 1번 주소 값을 삭제
:get - http://127.0.0.1:52273/products
데이터 목록에서 수정 및 삭제확인- 클라이언트 페이지 만들기(form)
get 방식의 form (select)
<html>
<head>
<title>선택 보기 화면 </title>
</head>
<body>
<form action="/products" method="get">
<h2> [선택 보기 버튼] </h2>
선택값 : <input type="text" name="id"/>
<input type="submit" value="전체출력"/>
<hr />
<h2> [선택 보기 링크] </h2>
<a href="http://127.0.0.1:52273/products?id=0" > 0번 상품확인 링크</a><br>
<a href="http://127.0.0.1:52273/products?id=1" > 1번 상품확인 링크</a><br>
<a href="http://127.0.0.1:52273/products?id=2" > 2번 상품확인 링크</a><br>
</form>
</body>
</html>서버 (버튼 동작 시 선택한 아이템 목록 보기)
// 모듈 추출
var http = require('http');
var express = require('express');
//웹 서버 생성
var app = express();
// 미들웨어 생성
// 사용자가 요청한 정보를 제공하는것을 router 라고 한다.
app.use(express.bodyParser());
app.use(app.router);
app.use(express.static('public_html'))
// 변수 선언
var items = [
{name:'우유', price:'2000'},
{name:'커피', price:'3000'},
{name:'콜라', price:'2500'}
]; // 변수 items 구성
// 개별 데이터 조회 (아이템의 주소 값으로 존재 유무 확인)
app.get('/products', function(request, response){
// 쿼리값으로 ID 값 받도록 설정
if (request.query.id == ""){
response.send({error:'값을 입력해 주세요 ! '});
}else{
var id = Number(request.query.id);
if(isNaN(id)){
response.send({error:'숫자를 입력하세요. !!'});
}else if(items[id]){
response.send(items[id]);
}else {
response.send({error:'존재하지 않는 데이터 입니다.!!'});
}
}
})
// 서버 동작
http.createServer(app).listen(52273, function() {
console.log('Server Running at http://127.0.0.1:52273');
});- 느낀점
오늘은 아이템 목록을 수정하고 삭제하는 내용을 배웠다.
put을 이용해 아이템 메뉴를 수정하고
delete를 이용해서 아이템 메뉴를 삭제 할 수 있었다.
또한 클라이언트 form 페이지에서 버튼을 눌러 아이템을 불러오는
방식의 내용을 작성했는데 쿼리문으로 받아오는 ID값을
쿼리가 아닌 파라미터의 값으로 가져와 어려움이있었다.
쿼리문과 파라미터의 차이점은 URL에 표기되는 주소에서
넘어가는 값의 표기가 다르다.
파라미터 형식
(/)
: http://127.0.0.1:522373/products/id=0
쿼리문 형식
(?)
: http://127.0.0.1:522373/products?id=0
이런 내용을 꼭 잊지말고 기억하도록 해야겠다.
Back-end Developer Preparation Students