hanjae-jea/index.html

## index.html
<!--
  프로젝트 작업 추천 순서
   0. 강의자료 한 번 따라해보기
   1. html / javascript 만 완성해보기
     -> "서버 연동 처리 전에 작업하는 코드" 참고해서, 서버 연동 결과를 있다고 치고, 변수에 미리 넣고 작업해보기
   2. python 서버 완성해보기
     -> python 코드를 참고하되, DB 연동 결과는 있다고 치고, 변수에 미리 넣고 서버 만들어보기
   3. 1에서 완성한 html과, 2에서 완성한 서버를 연동해보기 (난이도: 상)
   4. DB 만들어서, python 서버와 연동해보기
-->
<html>
  <style>
    td {
      border: 1px solid black;
    }
  </style>
  <!-- CSS only -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-uWxY/CJNBR+1zjPWmfnSnVxwRheevXITnMqoEIeG1LJrdI0GlVs/9cVSyPYXdcSF" crossorigin="anonymous">
  <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
  <script>
    // 서버 연동 처리 전에 작업하는 코드
    /*$(window).ready(function() {
      // DB 연동
      var sang = [
      {name: '유모차', like: 5, link: "https://img.hankyung.com/photo/201907/BD.20020843.1.jpg"},
      {name: '자동차', like: 3},
      {name: '우산', like: 2},
      {name: '컴퓨터', like: 1}
      ];
    for( var i = 0 ; i < sang.length ; i ++ ){
      $('tr').append(`
        <td class="card">
          등수 : ${i+1}<br />
          ${sang[i].name}<br />
          <img width="400" height="300" src="${sang[i].link}">
          추천 : ${sang[i].like}<br />
        </td>
        `);
    }
    });*/
    $.ajax({
      url: "/sanglist",
      method: "GET",
      success: function (sangpum) {
        console.log(sangpum);
        for( var i = 0 ; i < sangpum.length ; i ++ ){
        $('tr').append(`
          <td class="card">
            등수 : ${i+1}<br />
            ${sangpum[i].name}<br />
            <img width="400" height="300" src="${sangpum[i].link}">
            추천 : ${sangpum[i].like}<br />
          </td>
        `);
        }
      }
    });
  </script>
  <body>
    <table>
      <tr>
      </tr>
    </table>
  </body>
</html>


------------------------ 파이썬 ----------------------------
import Flask

app = Flask(__main__)

@app.route("/")
def index():
  # index.html 은 프로젝트 안에 templates 폴더 안에 있어야 함
  return render_template("index.html")

@app.route("/sanglist", methods=["GET"])
def sanglist():
  # DB 연동 어떻게 저쩌고 해서 받아옴.
  # 지금은 DB가 있다고 치고 변수에 넣어두겠습니다.
  db_sangpum = [
      {"name": '유모차', 'like': 5, 'link': "https://img.hankyung.com/photo/201907/BD.20020843.1.jpg"},
      {"name": '자동차', "like": 3},
      {"name": '우산', "like": 2},
      {"name": '컴퓨터', "like": 1}
  ]

  return db_sangpum
	<!--
	프로젝트 작업 추천 순서
	0. 강의자료 한 번 따라해보기
	1. html / javascript 만 완성해보기
	-> "서버 연동 처리 전에 작업하는 코드" 참고해서, 서버 연동 결과를 있다고 치고, 변수에 미리 넣고 작업해보기
	2. python 서버 완성해보기
	-> python 코드를 참고하되, DB 연동 결과는 있다고 치고, 변수에 미리 넣고 서버 만들어보기
	3. 1에서 완성한 html과, 2에서 완성한 서버를 연동해보기 (난이도: 상)
	4. DB 만들어서, python 서버와 연동해보기
	-->
	<html>
	<style>
	td {
	border: 1px solid black;
	}
	</style>
	<!-- CSS only -->
	<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-uWxY/CJNBR+1zjPWmfnSnVxwRheevXITnMqoEIeG1LJrdI0GlVs/9cVSyPYXdcSF" crossorigin="anonymous">
	<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
	<script>
	// 서버 연동 처리 전에 작업하는 코드
	/*$(window).ready(function() {
	// DB 연동
	var sang = [
	{name: '유모차', like: 5, link: "https://img.hankyung.com/photo/201907/BD.20020843.1.jpg"},
	{name: '자동차', like: 3},
	{name: '우산', like: 2},
	{name: '컴퓨터', like: 1}
	];
	for( var i = 0 ; i < sang.length ; i ++ ){
	$('tr').append(`
	<td class="card">
	등수 : ${i+1}<br />
	${sang[i].name}<br />
	<img width="400" height="300" src="${sang[i].link}">
	추천 : ${sang[i].like}<br />
	</td>
	`);
	}
	});*/
	$.ajax({
	url: "/sanglist",
	method: "GET",
	success: function (sangpum) {
	console.log(sangpum);
	for( var i = 0 ; i < sangpum.length ; i ++ ){
	$('tr').append(`
	<td class="card">
	등수 : ${i+1}<br />
	${sangpum[i].name}<br />
	<img width="400" height="300" src="${sangpum[i].link}">
	추천 : ${sangpum[i].like}<br />
	</td>
	`);
	}
	}
	});
	</script>
	<body>
	<table>
	<tr>
	</tr>
	</table>
	</body>
	</html>



	------------------------ 파이썬 ----------------------------
	import Flask

	app = Flask(__main__)

	@app.route("/")
	def index():
	# index.html 은 프로젝트 안에 templates 폴더 안에 있어야 함
	return render_template("index.html")

	@app.route("/sanglist", methods=["GET"])
	def sanglist():
	# DB 연동 어떻게 저쩌고 해서 받아옴.
	# 지금은 DB가 있다고 치고 변수에 넣어두겠습니다.
	db_sangpum = [
	{"name": '유모차', 'like': 5, 'link': "https://img.hankyung.com/photo/201907/BD.20020843.1.jpg"},
	{"name": '자동차', "like": 3},
	{"name": '우산', "like": 2},
	{"name": '컴퓨터', "like": 1}
	]

	return db_sangpum