스프링 - 상품 조회 게시판 만들기(2)

java

스프링 - 상품 조회 게시판 만들기(2)

dev_summer 2021. 2. 27. 14:10

(1)에서는 DB등을 연결하고 selete하여 jsp페이지에 간단하게 뿌려보았다.

아래는 초기화면이다.

초기화면은 전체보기화면이다.

베이커리, 커피를 클릭하면 페이지넘김 없이 ajax로 type이 베이커리, 커피인 것을 출력 할 것이고

가격순, 주문순 버트능 클릭하면 지금 현재 페이지에 있는 데이터에서 가격순, 주문순으로 정렬 할 것이다.

-product.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>seoha_procudt</title>
</head>
<body>
	<button id="product">전체보기</button>
	<button id="bakery">베이커리</button>
	<button id="coffee">커피</button>
	<button id="price_desc">가격순</button>
	<button id="order_desc">주문순</button>
	<table border="1">
		<tr id="title">
			<th>id</th>
			<th>name</th>
			<th>price</th>
			<th>orderCount</th>
			<th>type</th>
		</tr>
		
		<c:forEach var="product" items="${products}">

			<tr class="item">
				<td>${product.id}</td>
				<td>${product.name}</td>
				<td>${product.price}</td>
				<td>${product.orderCount}</td>
				<td>${product.type}</td>

			</tr>
		</c:forEach>

	</table>


	<script
		src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
	<script>

		let type="";

		
 		$('#product').on('click', function() {
			$.ajax({
				type : 'GET',
				url : '/product',
				data : 'json'
			}).done(function(result){
				console.log(result);
				$('.item').remove();
				for(var r of result){
					var item_el= "<tr class='item'><td>"+r.id+"</td><td>"+r.name+"</td><td>"+r.price+"</td><td>"+r.orderCount+"</td><td>"+r.type+"</td></tr>";
					$('#title').after(item_el);
				}
			}).fail(function(result){
				console.log('에러');
				console.log(result);
			});;
		});

		$('#bakery').on('click', function(){

		
			
			$.ajax({
				type: 'GET',
				url: '/product/베이커리',
				dataType: 'json'
			}).done(function(result){
				type="베이커리";
				console.log(result);
				$('.item').remove();
				for(var r of result){
					var item_el= "<tr class='item'><td>"+r.id+"</td><td>"+r.name+"</td><td>"+r.price+"</td><td>"+r.orderCount+"</td><td>"+r.type+"</td></tr>";
					$('#title').after(item_el);
				}
				
			}).fail(function(result){
				console.log('에러');
				console.log(result);
			});;
		});


		$('#coffee').on('click', function(){
	
			$.ajax({
				type: 'GET',
				url: '/product/커피',
				dataType: 'json'
			}).done(function(result){
				type="커피";
				console.log(result);
				$('.item').remove();
				for(var r of result){
					var item_el= "<tr class='item'><td>"+r.id+"</td><td>"+r.name+"</td><td>"+r.price+"</td><td>"+r.orderCount+"</td><td>"+r.type+"</td></tr>";
					$('#title').after(item_el);
				}
			}).fail(function(result){
				console.log('에러');
				console.log(result);
			});;
		});

		

		$('#price_desc').on('click', function(){

			$.ajax({
				type: 'GET',
				url: '/product/price/'+type,
				dataType: 'json'
			}).done(function(result){
				console.log(result);
				$('.item').remove();
				for(var r of result){
					var item_el= "<tr class='item'><td>"+r.id+"</td><td>"+r.name+"</td><td>"+r.price+"</td><td>"+r.orderCount+"</td><td>"+r.type+"</td></tr>";
					$('#title').after(item_el);
				}
			}).fail(function(result){
				console.log('에러');
				console.log(result);
			});;
		});

		$('#order_desc').on('click', function(){

			$.ajax({
				type: 'GET',
				url: '/product/orderByCount/'+type,
				dataType: 'json'
			}).done(function(result){
				console.log(result);
				$('.item').remove();
				for(var r of result){
					var item_el= "<tr class='item'><td>"+r.id+"</td><td>"+r.name+"</td><td>"+r.price+"</td><td>"+r.orderCount+"</td><td>"+r.type+"</td></tr>";
					$('#title').after(item_el);
				}
			}).fail(function(result){
				console.log('에러');
				console.log(result);
			});;
		});

		

		
	</script>
</body>
</html>

ajax url에 베이커리, 커피를 한글로 내가 타이핑했는데 진도를 나가다보니 그 안에서 value값을 들고와서 하나의 jax문으로 합칠 수도 있을 것 같당.

그리고 현재 어떤 타입으로 리스트가 뿌려져있는지를 확인할 수 있는 let type는 자바의 static의 기능과도 비슷한 let을 사용하여 저장하여서 쉽게 뿌릴수 있었다. 이런 기능이 없엇더라면 버튼을 클릭할때마다 어떠한 변수에 이것을 담았어야겠지..

- ProductController

package com.seoha.product.controller;

import java.util.List;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.ResponseBody;

import com.seoha.product.model.Product;
import com.seoha.product.repository.ProductRepository;

@Controller
public class ProductController {

	@Autowired
	private ProductRepository productRepository;

	@GetMapping({ "", "/" })
	public String index(Model model) {
		
		List<Product> products = productRepository.findAll();
		model.addAttribute("products", products);
		return "product";
		
	}

	@GetMapping("/product")
	public @ResponseBody List<Product> product() {
		List<Product> products = productRepository.findAll();
		return products;
	}
	
	@GetMapping("/product/{type}")
	public @ResponseBody List<Product> productType(@PathVariable String type){
		List<Product> products = productRepository.findType(type);
		return products;
	}

	@GetMapping("/product/orderByCount/{type}")
	public @ResponseBody List<Product> productOrderbyCount(@PathVariable String type){
		List<Product> products = productRepository.orderByCount(type);
		return products;
	}
	
	@GetMapping("/product/price/{type}")
	public @ResponseBody List<Product> productOrderbyprice(@PathVariable String type){
		List<Product> products = productRepository.orderByPrice(type);
		return products;
	}
	
}

- product.xml

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper
  PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
  "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper
	namespace="com.seoha.product.repository.ProductRepository">

	<select id="findAll" resultType="com.seoha.product.model.Product">
		select * from product
	</select>
	
	<select id="findType" resultType="com.seoha.product.model.Product">
		select * from product where type= #{type}
	</select>

	<select id="orderByPrice" resultType="com.seoha.product.model.Product">
		select * from product where type= #{type} order by price desc;
	</select>
	
	<select id="orderByCount" resultType="com.seoha.product.model.Product">
		select * from product where type= #{type} order by orderCount desc;
	</select>


</mapper>

- ProductRepository

package com.seoha.product.repository;

import java.util.List;

import com.seoha.product.model.Product;

public interface ProductRepository {
	List<Product> findAll();
	List<Product> findType(String type);
	List<Product> orderByPrice(String type);
	List<Product> orderByCount(String type);
}

진짜 1도 모르겠는데 하다보니까 알겠다..

다른게 마법이 아니고 이게 마법이네..

'java' 카테고리의 다른 글

스프링 Session (0)	2021.02.27
AJAX 사용법 (0)	2021.02.27
스프링 - 상품 조회 게시판 만들기(1) (0)	2021.02.27
스프링 - 유효성검사, 파일업로드 (0)	2021.02.27
스프링 mysql 연결하기 (0)	2021.02.27

현재글스프링 - 상품 조회 게시판 만들기(2)

'왜'라는 질문에 대한 답이 굳건하고 단단해질때 지속성은 늘어난다.

jsp, 인프랩, MySQL, docker mysql 시드데이터, 디앤디사이드프로젝트, DND, lambda rds, docker초기생성, 2022개발회고, java, 톰캣, 인프런퇴근길밋업, nodejs밋업, 디앤디, dnd프로젝트, NestJS, lambda, rds connection, 사이드프로젝트, Connection Pool,

Today :
Yesterday :

일	월	화	수	목	금	토
					1	2
3	4	5	6	7	8	9
10	11	12	13	14	15	16
17	18	19	20	21	22	23
24	25	26	27	28	29	30

🐾