add product_list.html

2d124cd2 · 정 의찬 · 32c31251 · 2d124cd2 · 2d124cd2
Commit 2d124cd2 authored 1 month ago by 정 의찬
--- a/src/main/java/com/example/demo/controller/TestController.java
+++ b/src/main/java/com/example/demo/controller/TestController.java
@@ -5,6 +5,7 @@ import org.springframework.web.bind.annotation.RequestMethod;
 import org.springframework.web.bind.annotation.RequestParam;
 import org.springframework.web.bind.annotation.RestController;

+import com.google.gson.JsonArray;
 import com.google.gson.JsonObject;


@@ -24,4 +25,33 @@ public class TestController {

    }

+    @RequestMapping(value = "/productlist", method = RequestMethod.GET)
+    public String productList(){
+
+        JsonObject obj1 = new JsonObject();
+        obj1.addProperty("item_nm", "수제 햄버거");
+        obj1.addProperty("item_detail", "소고기 패티와 토마토가 들어 있는 햄버거");
+        obj1.addProperty("item_reg_date", "2022/04/22");
+        obj1.addProperty("item_price", "4000");
+
+        JsonObject obj2 = new JsonObject();
+        obj2.addProperty("item_nm", "카레라이스");
+        obj2.addProperty("item_detail", "매운 3분 카레라이스");
+        obj2.addProperty("item_reg_date", "2022/03/10");
+        obj2.addProperty("item_price", "8000");
+
+        JsonObject obj3 = new JsonObject();
+        obj3.addProperty("item_nm", "라면");
+        obj3.addProperty("item_detail", "소고기 라면");
+        obj3.addProperty("item_reg_date", "2021/09/10");
+        obj3.addProperty("item_price", "1500");
+
+        JsonArray infoArray = new JsonArray();
+        infoArray.add(obj1);
+        infoArray.add(obj2);
+        infoArray.add(obj3);
+
+        return infoArray.toString();
+    }
+
 }
--- a/src/main/resources/static/product_list.html
+++ b/src/main/resources/static/product_list.html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Product</title>
+    <link rel="stylesheet" href="/webjars/bootstrap/5.1.3/css/bootstrap.min.css">
+    <script src="/webjars/jquery/3.6.0/jquery.min.js"></script>
+    <script src="/webjars/popper.js/2.9.3/umd/popper.min.js"></script>
+    <script src="/webjars/bootstrap/5.1.3/js/bootstrap.min.js"></script>
+    <script>
+        $(document).ready(function(){
+          $("button").click(function(){
+
+            $.ajax({
+
+              type: 'GET',
+              url: '/productlist',
+              success: function(data){
+                var array = JSON.parse(data);
+                for(i=0; i < array.length; i++){
+                    var obj = array[i];
+                    html = '';
+                    html += '<tr>';
+                    html += '<td>' + obj.item_nm + '</td>'
+                    html += '<td>' + obj.item_detail + '</td>'
+                    html += '<td>' + obj.item_reg_date + '</td>'
+                    html += '<td>' + obj.item_price + '</td>'
+                    html += '</tr>';
+                    $("#tableBody").append(html);
+                }
+
+              }
+
+            });
+
+
+          });
+        });
+    </script>
+
+</head>
+<body>
+<h1>상품 데이터 목록 출력</h1>
+<button>조회</button>
+<table class="table table-hover">
+    <thead class="thead-dark">
+        <tr>
+            <th>상품이름</th>
+            <th>상품상세설명</th>
+            <th>상품등록일</th>
+            <th>상품가격</th>
+        </tr>
+    </thead>
+    <tbody id="tableBody">
+    </tbody>
+</table>
+</body>
+</html>