학원 수업 45일차 221025
- 9-10
프로젝트명 : springWeb05-design
(terms.js)
function termsEachClicked(){}
모두 체크되었을 때 이용약관 전체동의 켜지고
하나라도 꺼지면 이용약관 전체동의 꺼지는 기능 구현중
modal을 적용해봅시다
jQuery modal
jquerymodal.com
https://jquerymodal.com/#install
https://github.com/kylefox/jquery-modal#installation
읽어보니 재밌네 https://yozm.wishket.com/magazine/detail/706/
(springWeb05-design/src/main/resources/templates/sign/signup.html)
<head> 태그 안에
<!-- jQuery Modal -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.css" />넣어주고
메인페이지 내용 구현하고 그 하단부에
<div id="ex1" class="modal">
<p>모달이 적용된 클래스</p>
<p>[필수] 만 14세 이상입니다. 약관내용들.....을 들어가면 출력됩니다.</p>
<a href="#" rel="modal:close">Close</a>
</div>넣어주고
필요한 곳에서
<a href="ex1" rel="modal:open">보기</a>이렇게 적용
팝업창 vs 모달창
- 10-11
(springWeb05-design/src/main/resources/templates/admin/home.html)
1.12.8. View Controllers
https://docs.spring.io/spring-framework/docs/current/reference/html/web.html#mvc-config-view-controller
(WebConfig.java)
@Configuration
@EnableWebMvc
public class WebConfig implements WebMvcConfigurer { //페이지 이동 지원
//단순 페이지 이동은 controller 쓰지말고 이걸로 처리하자
@Override
public void addViewControllers(ViewControllerRegistry registry) {
registry.addViewController("/").setViewName("index");
registry.addViewController("/admin").setViewName("admin/home");
}
}아직은 이런게 있다 정도로만 알아둬
당장은 안쓸거야 파일 삭제함
1.12.10. Static Resources
https://docs.spring.io/spring-framework/docs/current/reference/html/web.html#mvc-config-static-resources
- 11-12
(home.html)(admin.css)(layout-admin.html) 타임리프thymeleaf 설정
(write.html) 관리자페이지 상품등록 만들기
summernote.org
https://summernote.org/getting-started/#include-jscss
Include js/css
내용 복사하여 <head>태그에 삽입
- 2-3
CSS The !important Rule : 우선 적용
https://www.w3schools.com/css/css_important.asp
#footer{
display: none !important;
}
<textarea id="summernote" name="editordata"></textarea>
<head>
<script type="text/javascript">
$(function(){
$(".summernote").summernote();
});
</script>
</head>
상품등록페이지 만드는 중
HTML Form Attributes
https://www.w3schools.com/html/html_forms_attributes.asp
enctype : Specifies how the form-data should be encoded when submitting it to the server (only for method="post")
HTML <form> enctype Attribute
https://www.w3schools.com/tags/att_form_enctype.asp
- application/x-www-form-urlencoded : Default. All characters are encoded before sent (spaces are converted to "+" symbols, and special characters are converted to ASCII HEX values)
- multipart/form-data : This value is necessary if the user will upload a file through the form
- 3-4
(GoodsController.java)
이미지업로드(서버)
@PostMapping("/goods")
public String save(MultipartFile img) throws IOException {
String filePath="/images/temp/";
ClassPathResource cpr=new ClassPathResource("static"+filePath);
// "static/images/temp/"
File location = cpr.getFile(); //폴더
String fileOrgName=img.getOriginalFilename();
File dest = new File(location, fileOrgName);
img.transferTo(dest);
System.out.println("파일업로드완료!");
return "goods/list";
}
사진이 안올라간다면? 용량이 너무 커서!
(application.yml)
servlet:
multipart:
#단일 파일 사이즈 제한
max-file-size: 5MB #용량 늘려주기
#한번 요청할 때
max-request-size: 10MB
게시글 등록이 아닌 파일을 선택했을때 이미지 파일이 temp에 업로드되도록 하고싶어
jQuery change() Method
https://www.w3schools.com/jquery/event_change.asp
(write.html)
jQuery AJAX Methods
https://www.w3schools.com/jquery/jquery_ref_ajax.asp
jQuery ajax() Method
https://www.w3schools.com/jquery/ajax_ajax.asp
- 4-5
FormData
https://developer.mozilla.org/en-US/docs/Web/API/FormData
'jquery 파일전송' 검색! 여러가지 방법 있음
파일처리
(write.html)
.css();
jQuery - css() Method
https://www.w3schools.com/jquery/jquery_css.asp
- 5-6
js 동적태그 생성
onclick this
https://byunej.tistory.com/16
(write.html)
function btnAddClicked(el){}
추가 이미지 등록 기능 구현중 -> 나중에
jQuery Traversing - Ancestors
https://www.w3schools.com/jquery/jquery_traversing_ancestors.asp
jQuery clone() Method
https://www.w3schools.com/jquery/html_clone.asp
jQuery removeAttr() Method
https://www.w3schools.com/jquery/html_removeattr.asp
jquery traversing