moya의 웹다이어리

#목표

intellij에서 스프링 부트(Spring Boot)를 기반으로한 예제 프로젝트를 만들어보기 -> 페이지 띄우기

1. 프로젝트 생성

intellij에서 

File -> Project -> Spring Initializr -> Selected Dependencies

필요한 모듈을 선택한다.

Selected Dependencies

모듈선택후 프로젝트 생성 완료

2. 컨트롤러 생성

java폴더밑에 Controller 생성 (@Controller 추가)

3. 페이지생성

resources -> templates에 뷰 파일을 생성한다. 

(위 사진에서 확인가능) 

이때 "<meta charset="utf-8"/>" 을 셋팅하지않으면 애러가 난다.

4. 어플리케이션 실행

해당 어플리케이션을 실행한다. 

5. 화면띄우기

주소는 "localhost:8080" 이며 톰캣이없어도 스프링부트 내장 톰캣으로 실행된다. 

#목표

검색어를 검색하면 바로바로 리스트가 바뀌어서 보여진다.

해당 리스트의 검색창에 검색어를 입력하면 리스트에 해당 검색어의 아이템만 보여진다. 

#구현

javascript indexof() 함수를 통해서 해당 검색어가 있으면 엘리먼츠를 display = "block" 으로 하고 없을경우 dispaly = "none"으로 한다. 

이렇게 구현할경우 검색 필터가 순서대로인 단어만 검색해서 한글의경우 완성형 글자가 아닌 글자를 타이핑하고있을때 검색결과창에 해당 검색결과가 나오지않는다. 

초성으로도 검색이 되지않는다.

indexof 로 검색하기때문에 생기는 문제점들인데 검색방법을 달리하면 개선할수 있을것으로 보인다. 

function list_filter(){

    var input, keyword, filter, item, title;

    input  = $("#keyword");
    keyword = input.val().toUpperCase();
    item = $("tbody > tr");
    filter = $("#filter-keyword").text();

    console.log(filter);

    for(var i = 0; i < item.length; i++){
        title = item[i].getElementsByClassName("item-title")[0].innerHTML;

        if(title.toUpperCase().indexOf(keyword) > -1){
            item[i].style.display = "";
        }else{
            item[i].style.display = "none";
        }
    }
}

#차후 목표

한글 검색어 타이핑중 리스트가 사라지는것에 대해 개선해보기 

#목표

웹페이지에서 파일을 업로드시 얼마나 올렸는지 게이지를 확인할 수 있다.

#구현

기본적으로 업로드 프로그레스바는 jquery에 있는 ajax 를 이용한다.

XMLHttpRequest()에서 upload 이벤트로받는 인자값이 파일의 데이터량을 주는데 이것을 전체크기와 현재 로드된 크기를 나눠서 현재 업로드양을 확인할 수 있다.

업로드와 마찬가지로 다운로드도 똑같이 파일 로드된 크기를 알수있지만 브라우저 자체에서 다운로드받는 기능과 겹치면서 두번다운로드받거나 실제로 파일이 받아지지않고 파일내용만 받는 경우가 보였다. 차후에 개선해야될부분이다.

프로그레스바는 부트스트랩을 활용하여 적용하였다. 

$(document).ready(function(){

    $("#progress > span").html("0%");

    var formData = document.getElementById('file');
    var fileData = null;

    formData.addEventListener("change", handleFile, false);

    function handleFile(){
        fileData = new FormData($("#fileUpload")[0]);
    }

    $("#fileUpload").submit(function (evt){
        evt.preventDefault();

        var progressText = $("#progress > span");
        var progress = $("#progress");
        var upload = $("#upload");

        if(fileData != null){
            upload.attr('disabled',true);
            $.ajax({
                xhr : function(){
                    var xhr = new window.XMLHttpRequest();
                    //Upload progress
                    xhr.upload.addEventListener("progress", function(evt){
                        if (evt.lengthComputable) {
                            var percentComplete = ((evt.loaded / evt.total) * 100).toFixed(1);
                            //Do something with upload progress

                            //<![CDATA[
                            if(parseInt(percentComplete) >= 100){
                                progressText.html("100% 전송완료");
                                upload.attr('disabled',false);
                            }else{
                                progressText.html(percentComplete + "%");
                            }
                            //]]>

                            progress.css({
                                width : percentComplete + "%"
                            });
                        }
                    }, false);
                    return xhr;
                },
                type : "POST",
                url : "/uploadFile.do",
                data : fileData,
                contentType: false,
                processData: false,
                success : function(result){

                    $(location).attr('href',result);

                    console.log(typeof result);
                    console.log(result);

                }
            });
        }else{
            alert("업로드할 파일을 지정해주세요");
        }
    });
});