mindol1004/Blog_Project
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

[Spring][쇼핑몰 프로젝트][32] 상품 목록 화면 구현(이미지 출력)

Browse Source 
https://kimvampa.tistory.com/250
This commit is contained in:
SeoJin Kim
2021-09-17 09:48:06 +09:00
parent d6fd8ab0d2
commit c750ac00cc
9 changed files with 181 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
VamPa/src/main/java/com/vam/service/BookServiceImpl.java
View File

@@ -6,7 +6,9 @@ import java.util.List;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import com.vam.mapper.AttachMapper;
import com.vam.mapper.BookMapper;
import com.vam.model.AttachImageVO;
import com.vam.model.BookVO;
import com.vam.model.Criteria;
@@ -19,6 +21,9 @@ public class BookServiceImpl implements BookService{
@Autowired
private BookMapper bookMapper;
@Autowired
private AttachMapper attachMapper;
/* 상품 검색 */
@Override
public List<BookVO> getGoodsList(Criteria cri) {
@@ -42,7 +47,19 @@ public class BookServiceImpl implements BookService{
}
}
return bookMapper.getGoodsList(cri);
List<BookVO> list = bookMapper.getGoodsList(cri);
list.forEach(book -> {
int bookId = book.getBookId();
List<AttachImageVO> imageList = attachMapper.getAttachList(bookId);
book.setImageList(imageList);
});
return list;
}
/* 사품 총 갯수 */

30
VamPa/src/main/webapp/WEB-INF/views/search.jsp
View File

@@ -103,7 +103,11 @@
<tbody id="searchList>">
<c:forEach items="${list}" var="list">
<tr>
<td class="image"></td>
<td class="image">
<div class="image_wrap" data-bookid="${list.imageList[0].bookId}" data-path="${list.imageList[0].uploadPath}" data-uuid="${list.imageList[0].uuid}" data-filename="${list.imageList[0].fileName}">
<img>
</div>
</td>
<td class="detail">
<div class="category">
[${list.cateName}]
@@ -259,12 +263,36 @@
$(document).ready(function(){
// 검색 타입 selected
const selectedType = '<c:out value="${pageMaker.cri.type}"/>';
if(selectedType != ""){
$("select[name='type']").val(selectedType).attr("selected", "selected");
}
/* 이미지 삽입 */
$(".image_wrap").each(function(i, obj){
const bobj = $(obj);
if(bobj.data("bookid")){
const uploadPath = bobj.data("path");
const uuid = bobj.data("uuid");
const fileName = bobj.data("filename");
const fileCallPath = encodeURIComponent(uploadPath + "/s_" + uuid + "_" + fileName);
$(this).find("img").attr('src', '/display?fileName=' + fileCallPath);
} else {
$(this).find("img").attr('src', '/resources/img/goodsNoImage.png');
}
});
});

10
VamPa/src/main/webapp/resources/css/search.css
View File

@@ -178,6 +178,16 @@ a{
font-size: 18px;
}
/* 상품 이미지 관련 */
.image_wrap {
width: 100%;
height: 100%;
}
.image_wrap img {
max-width: 85%;
height: auto;
display: block;
}
/* 페이지 버튼 인터페이스 */

2
VamPa/target/m2e-wtp/web-resources/META-INF/maven/com.vam/controller/pom.properties
View File

@@ -1,5 +1,5 @@
#Generated by Maven Integration for Eclipse
#Thu Sep 02 16:45:52 KST 2021
#Thu Sep 16 21:52:41 KST 2021
m2e.projectLocation=C\:\\Users\\sjinj\\git\\Blog_Project2\\VamPa
m2e.projectName=VamPa
groupId=com.vam

19
VamPa_MySQL/src/main/java/com/vam/service/BookServiceImpl.java
View File

@@ -6,7 +6,9 @@ import java.util.List;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import com.vam.mapper.AttachMapper;
import com.vam.mapper.BookMapper;
import com.vam.model.AttachImageVO;
import com.vam.model.BookVO;
import com.vam.model.Criteria;
@@ -19,6 +21,9 @@ public class BookServiceImpl implements BookService{
@Autowired
private BookMapper bookMapper;
@Autowired
private AttachMapper attachMapper;
/* 상품 검색 */
@Override
public List<BookVO> getGoodsList(Criteria cri) {
@@ -42,7 +47,19 @@ public class BookServiceImpl implements BookService{
}
}
return bookMapper.getGoodsList(cri);
List<BookVO> list = bookMapper.getGoodsList(cri);
list.forEach(book -> {
int bookId = book.getBookId();
List<AttachImageVO> imageList = attachMapper.getAttachList(bookId);
book.setImageList(imageList);
});
return list;
}
/* 사품 총 갯수 */

71
VamPa_MySQL/src/main/webapp/WEB-INF/views/admin/goodsEnroll.jsp
View File

@@ -14,7 +14,36 @@
<script src="https://cdn.ckeditor.com/ckeditor5/26.0.0/classic/ckeditor.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="//code.jquery.com/ui/1.8.18/jquery-ui.min.js"></script>
</head>
<style type="text/css">
#result_card img{
max-width: 100%;
height: auto;
display: block;
padding: 5px;
margin-top: 10px;
margin: auto;
}
#result_card {
position: relative;
}
.imgDeleteBtn{
position: absolute;
top: 0;
right: 5%;
background-color: #ef7d7d;
color: wheat;
font-weight: 900;
width: 30px;
height: 30px;
border-radius: 50%;
line-height: 26px;
text-align: center;
border: none;
display: block;
cursor: pointer;
}
</style>
</head>
<body>
@@ -135,14 +164,24 @@
<span class="ck_warn bookContents_warn">책 목차를 입력해주세요.</span>
</div>
</div>
<div class="form_section">
<div class="form_section_title">
<label>상품 이미지</label>
</div>
<div class="form_section_content">
<input type="file" id ="fileItem" name='uploadFile' style="height: 30px;">
<div id="uploadResult">
<!--
<div id="result_card">
<div class="imgDeleteBtn">x</div>
<img src="/display?fileName=test.png">
</div>
-->
</div>
</div>
</div>
</div>
</form>
<div class="btn_section">
<button id="cancelBtn" class="btn">취 소</button>
@@ -444,7 +483,24 @@ $("#enrollBtn").on("click",function(e){
});
/* 이미지 업로드 */
$("input[name='bookPrice']").on("change", function(){
let userInput = $("#discount_interface");
let discountInput = $("input[name='bookDiscount']");
let discountRate = userInput.val(); // 사용자가 입력한 할인값
let sendDiscountRate = discountRate / 100; // 서버에 전송할 할인값
let goodsPrice = $("input[name='bookPrice']").val(); // 원가
let discountPrice = goodsPrice * (1 - sendDiscountRate); // 할인가격
if(!isNaN(discountRate)){
$(".span_discount").html(discountPrice);
}
});
/* 할인값 처리 */
$("input[name='bookPrice']").on("change", function(){
let userInput = $("#discount_interface");
@@ -469,7 +525,7 @@ $("#enrollBtn").on("click",function(e){
if($(".imgDeleteBtn").length > 0){
deleteFile();
}
let formData = new FormData();
let fileInput = $('input[name="uploadFile"]');
let fileList = fileInput[0].files;
@@ -518,7 +574,8 @@ $("#enrollBtn").on("click",function(e){
return true;
}
}
/* 이미지 출력 */
function showUploadImage(uploadResultArr){
@@ -548,6 +605,7 @@ $("#enrollBtn").on("click",function(e){
}
/* 이미지 삭제 버튼 동작 */
$("#uploadResult").on("click", ".imgDeleteBtn", function(e){
@@ -580,7 +638,8 @@ $("#enrollBtn").on("click",function(e){
alert("파일을 삭제하지 못하였습니다.")
}
});
}
}
</script>

30
VamPa_MySQL/src/main/webapp/WEB-INF/views/search.jsp
View File

@@ -103,7 +103,11 @@
<tbody id="searchList>">
<c:forEach items="${list}" var="list">
<tr>
<td class="image"></td>
<td class="image">
<div class="image_wrap" data-bookid="${list.imageList[0].bookId}" data-path="${list.imageList[0].uploadPath}" data-uuid="${list.imageList[0].uuid}" data-filename="${list.imageList[0].fileName}">
<img>
</div>
</td>
<td class="detail">
<div class="category">
[${list.cateName}]
@@ -258,12 +262,36 @@
$(document).ready(function(){
// 검색 타입 selected
const selectedType = '<c:out value="${pageMaker.cri.type}"/>';
if(selectedType != ""){
$("select[name='type']").val(selectedType).attr("selected", "selected");
}
/* 이미지 삽입 */
$(".image_wrap").each(function(i, obj){
const bobj = $(obj);
if(bobj.data("bookid")){
const uploadPath = bobj.data("path");
const uuid = bobj.data("uuid");
const fileName = bobj.data("filename");
const fileCallPath = encodeURIComponent(uploadPath + "/s_" + uuid + "_" + fileName);
$(this).find("img").attr('src', '/display?fileName=' + fileCallPath);
} else {
$(this).find("img").attr('src', '/resources/img/goodsNoImage.png');
}
});
});

10
VamPa_MySQL/src/main/webapp/resources/css/search.css
View File

@@ -178,6 +178,16 @@ a{
font-size: 18px;
}
/* 상품 이미지 관련 */
.image_wrap {
width: 100%;
height: 100%;
}
.image_wrap img {
max-width: 85%;
height: auto;
display: block;
}
/* 페이지 버튼 인터페이스 */

2
VamPa_MySQL/target/m2e-wtp/web-resources/META-INF/maven/com.vam/controller/pom.properties
View File

@@ -1,5 +1,5 @@
#Generated by Maven Integration for Eclipse
#Thu Sep 02 16:45:54 KST 2021
#Thu Sep 16 21:52:42 KST 2021
m2e.projectLocation=C\:\\Users\\sjinj\\git\\Blog_Project2\\VamPa_MySQL
m2e.projectName=VamPa_MySQL
groupId=com.vam