1.RESTful 로 emps를 만드시오.
index2.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="/js/emp.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$.ajax({
type:"GET",
url: "/emps/list",
success : function(result) {
console.log(result);
let htmls="";
$("#emp-table").html('');
$("<tr>" , {
html : "<td>" + "사원번호" + "</td>"+
"<td>" + "이름" + "</td>"+
"<td>" + "직업" + "</td>"+
"<td>" + "매니저" + "</td>"+
"<td>" + "입사일자" + "</td>"+
"<td>" + "급여" + "</td>"+
"<td>" + "보너스" + "</td>"+
"<td>" + "부서번호" + "</td>"+
"<td>" + "삭제" + "</td>"
}).appendTo("#emp-table")
if(result.length <1){
htmls.push("등록된 사원이 없습니다.");
}else{
$(result).each(function(){
htmls += '<tr>';
htmls += '<td>'+ this.empno + '</td>';
htmls += '<td>'+ this.ename + '</td>';
htmls += '<td>'+ this.job + '</td>';
htmls += '<td>'+ this.mgr + '</td>';
htmls += '<td>'+ this.hiredate + '</td>';
htmls += '<td>'+ this.sal + '</td>';
htmls += '<td>'+ this.comm + '</td>';
htmls += '<td>'+ this.deptno + '</td>';
htmls += '<td>'+ '<input id=' + this.empno + " type='button' class='btn_delete' value='삭제'>" + '</td>';
htmls += '</tr>';
});
htmls+='<tr>';
htmls+='<td colspan="9"> <a href="/write_view">사원추가</a> </td>';
htmls+='</tr>';
}
$('#emp-table').append(htmls);
},
error:function(e){
console.log(e);
}
});
});
</script>
<script type="text/javascript">
$(document).ready(function () {
let emp = empService();
$(document).on("click","#emp-table .btn_delete",function(){
console.log($(this).attr("id"))
$(this).parent().parent().remove();
emp.del($(this).attr("id"));
});
});
</script>
</head>
<body>
<h1>emp 게시판 리스트</h1>
<table id="emp-table" width="500" cellpadding="0" cellspacing="0" border="1">
</table>
</body>
</html>
RestEmpController
@RestController
@RequestMapping("/emps")
public class RestEmpController {
@Autowired
private EmpService empService;
@GetMapping("/list")
public List<EmpVO>list(){
return empService.getList();
}
@DeleteMapping("/{empno}")
public ResponseEntity<String> delete(EmpVO emp){
ResponseEntity<String>entity=null;
try {
int rn=empService.remove(emp.getEmpno());
entity=new ResponseEntity<String>(String.valueOf(rn),HttpStatus.OK);
} catch (Exception e) {
e.printStackTrace();
entity = new ResponseEntity<String>(e.getMessage(),HttpStatus.BAD_REQUEST);
}
return entity;
}
}emp.js
let empService = function() {
function list(callback) {
$.ajax({
type: "GET",
url: "/emps/list",
success: function(result) {
console.log(result);
if(callback){
callback(result);
}
},
error: function(e) {
console.log(e);
}
});
}
function del(empno) {
$.ajax({
type: "DELETE",
url: "/emps/" + empno,
success: function(result) {
if(result=="SUCCESS")
console.log("삭제된 갯수" + result);
},
error: function(e) {
console.log(e);
}
});
}
return {
list: list,
del : del,
}
}결과
2.금일 아침 수업내용중 index.html 에서 이미지를 랜덤으로 생성하여 완성하시오.
