입사하자마자 만들었었던 어드민 페이지를 개선할 일이 생겼었다
무엇을 해야하나요?
1. 요청 ->요청할 갯수와 ID들을 받아서 ->갯수만큼 랜덤으로 시리얼 생성 -> 데이터베이스에 시리얼 생성을 요청했다는 Log Group 테이블에 INSERT -> Log Group 테이블에서 ID를 가져와서 -> 실제 로그 데이터베이스에 INSERT -> 조합해서 엑셀로 출력
2. 생성한 모든 시리얼을 엑셀로 출력
렛츠 기릿...
<button type="button" class="bt-rounded btn-primary btn-lg"
name="createSerial" id="createSerial"
style="font-size: 15px; margin-left: 10px;">시리얼 생성하기</button>createSerial이라는 아이디를 가진 버튼을 누르면
$(document).on("click","#createSerial",function() {
var chk = confirm("시리얼을 생성하시겠습니까?");
if (chk == true) {
var c = $(this);
var tr = c.parent().parent();
var td = tr.children();
var active = td.eq(0).text();
var no = td.eq(0).text();
var no2 = td.eq(2).text();
console.log(no);
var id = no;
$.ajax(
{
url : '/admin/createSerial',
dataType : 'text',
async : false,
type : 'GET',
async: false,
data: {
id: id,
name : no2
},
success: function(data){
window.name = "createSerial";
var url = "/admin/createSerial";
var width = '1000';
var height = '800';
var left = Math.ceil((window.screen.width - width) / 2);
var top = Math.ceil((window.screen.height - height) / 2);
window.open('/admin/createSerial?id=' + id, 'pop', 'width=' + width
+ ', height=' + height + ', left=' + left
+ ', top=' + top);
}
})
}else{
return false;
}
});
int i = 14;
String serial = getRandomSerial(i);
static String getRandomSerial(int i) {
String serialRandom = "ABCDEFGHIJKLMNOPQRSTUVWXYZ" + "0123456789";
StringBuilder builder = new StringBuilder();
for (int a = 0; a < i; a++) {
int index = (int) (serialRandom.length() * Math.random());
builder.append(serialRandom.charAt(index));
}
return builder.toString();
}
이런식으로 시리얼을 생성해서 랜덤으로 일단 넣어준다
이건 중요한거아니니까 많은 코드... 스킵...^^..
<p>전체선택 <input type="checkbox" id="allCheck"/></p>
<div class="form-group" id="container">
</div>
<p>발행할 시리얼 갯수 :
<input type="number" id="num" name="num" min="1" value="1" class="form-control" style="width: 300px;"/>
</p>
</div>
var container = document.getElementById("container");
var checkArrString ="";
var name = '${name}';
var id = '${id}';
var containerHtml = "";
if(name != null && id != null){
var spli = name.split(',');
var spli2 = id.split(',');
for(var i = 0; i<spli.length; i++){
console.log(spli[i]);
containerHtml = containerHtml + '<input type="text" id="'+spli2[i]+'"readonly="readonly" class="form-control" style="width: 700px;" value="'+spli[i]+'"/><input type="checkbox" value="'+spli2[i]+'" pc_name="'+spli[i]+'" id="serialCheck" name="serialCheck"/>';
}
container.innerHTML = containerHtml;
}
왜 forEach 안돌리고 script를 썼냐면 데이터베이스 한 컬럼에 쉼표로 구분해서 AAA,BBB,CCC 이런식으로 들어가있어서 split으로 처리하고 그려줘야된다
선택했다 치고 시리얼 생성했다 치자
전체 엑셀 출력
location.href="/admin/getAllSerial?fileName=시리얼.xlsx&&daId=" +id;
@RequestMapping(value="/getAllSerial", method=RequestMethod.GET)
public void getAllSerial(HttpServletRequest request, HttpServletResponse response) throws Exception{
int id = Integer.parseInt(String.valueOf(request.getParameter("id")));
System.out.println(id);
List<Map<String,Object>> getAllSerialMap = adminService.getAllSerial(id);
Workbook wb = null;
wb = new SXSSFWorkbook();
Row row;
org.apache.poi.ss.usermodel.Cell cell;
org.apache.poi.ss.usermodel.Sheet sheet;
String sheetName = WorkbookUtil.createSafeSheetName("Serial");
sheet = wb.createSheet(sheetName);
CellStyle cs = wb.createCellStyle();
row = sheet.createRow(0);
cell = row.createCell(0);
cell.setCellValue("이름");
setHeaderCS(cs, cell);
cell = row.createCell(1);
cell.setCellValue("QR코드 URL");
setHeaderCS(cs, cell);
cell = row.createCell(2);
cell.setCellValue("시리얼");
setHeaderCS(cs, cell);
for(int i = 0; i<getAllSerialMap.size(); i++) {
Map<String,Object> seMap = getAllSerialMap.get(i);
String pcName = (String)seMap.get("name");
String serial = (String)seMap.get("serial_no");
String qrCodeUrl ="QR 코드 URI";
row = sheet.createRow((i+1));
cell = row.createCell(0);
cell.setCellValue(name);
cell = row.createCell(1);
cell.setCellValue(qrCodeUrl);
cell = row.createCell(2);
cell.setCellValue(serial);
}
try {
String fileName = (String) request.getParameter("fileName");
response.setContentType("application/octet-stream;");
response.setHeader("Content-Disposition", "attachment; filename*=" + "UTF-8" + "''" + URLEncoder.encode(fileName, "UTF-8"));
response.setHeader("Pragma", "no-cache;");
response.setHeader("Expires", "-1;");
FileOutputStream fos = new FileOutputStream(path);
wb.write(response.getOutputStream());
fos.flush();
}catch(Exception e) {
}finally {
}
}
클라이언트단에서 다운을 위한 설정들이
response.setContentType("application/octet-stream;");
response.setHeader("Content-Disposition", "attachment; filename*=" + "UTF-8" + "''" + URLEncoder.encode(fileName, "UTF-8"));
response.setHeader("Pragma", "no-cache;");
response.setHeader("Expires", "-1;");얘네다
백엔드에서 다 처리 해줬기때문에 그냥 url만 지정해서 get으로 넘겨버리면 끝
밑에는 프론트에서 그려버리고 cvc로 출력하는 방식
$(document).on("click","#sub",function(){
var checkArr = new Array();
var nameArr = new Array();
$("input:checkbox[name='serialCheck']:checked").each(function(){
var checked = $(this).val();
checkArr.push(checked);
var name = $(this).attr("name");
nameArr.push(name);
checkArrString = checkArr.join(',').replaceAll(' ', '').replace(']', '').replace('[','');
console.log(checkArrString);
})
var check = confirm("발행할 시리얼 갯수는 " + $('#num').val() + "장입니다");
var url = location.href;
var parameter = (url.slice(url.indexOf('?') + 2, url.length)).split('=');
console.log(parameter[1]);
var form = new FormData();
form.append("checkPcId", checkArrString);
form.append("number", $('#num').val());
form.append("id", parameter[1]);
form.append("name", nameArr);
if (check == true) {
$.ajax(
{
url : '/admin/createSerialRequest',
type : 'POST',
enctype: 'multipart/form-data',
processData : false,
contentType : false,
data:
form,
complete : function(res){
var json = JSON.stringify(res);
var json_ = JSON.parse(json);
var json__ = JSON.parse(json_.responseText);
var list = json__.data;
alert($('#num').val() + "장의 시리얼이 발행되었습니다.");
document.getElementById("make").innerHTML = '<br><button class="btn btn-primary" id="exel" name="exel" >엑셀파일로 내보내기</button>';
$(document).on("click","#exel",function(){
$.ajax({
type : 'POST',
url : '/admin/getSerialExelFile',
dataType : 'text',
data : {data : JSON.stringify(json__.data)},
success : function(result) {
var arr2 = new Array();
for(var i = 0; i<list.list.length; i++){
var arr = new Array();
console.log(list.list[i]);
var serial_no = list.list[i].serial_no;
var id = list.list[i].id;
var qrCodeUrl = "QR CODE URI";
arr.push(list.list[i].pcName);
arr.push(qrCodeUrl);
arr.push(serial_no);
arr2.push(arr);
}
generateCSV(arr2);
},
error : function(request, status, error) {
console.log(error)
}
})
});
}
});
}else{
return false;
}
});
아이디랑 이름, 갯수 체크해서 일단 시리얼 생성해주고 끝나면 엑셀로 출력하는 버튼이 생긴다
엑셀로 출력하는 버튼을 클릭하면
function generateCSV(res) {
var csv = '컬럼들\n';
res.forEach(function(row) {
csv += row.join(',');
csv += "\n";
});
var hiddenElement = document.createElement('a');
hiddenElement.href = 'data:text/csv;charset=utf-8,' + encodeURI(csv);
hiddenElement.target = '_blank';
hiddenElement.download = 'data.csv';
hiddenElement.click();
}함수 호출, 끝!
음악하다가 개발자로 취업한 썰 푼다