0. JQuery?
- 특정태그를 명시해서 갖고 올 때 좀 더 편하게 사용 가능
- ajax요청이 쉽다
- bootstrab은 기본적으로 jqery가 연동되어 있다
- 하지만 ajax는 slim에 포함되지 않기 때문에 Jqeury에서 cdn 방식으로 갖고 와줘야 한다!
- fcuser의 base.html에 있는 기존 jqery는 지우고 새로운 cdn 입력!
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, inital-scale=1">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css"
integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"
integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous">
</script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"
integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous">
</script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.min.js"
integrity="sha384-+YQ4JLhjyBLPDQt//I+STsc9iw4uQqACwlvpslubQzn4u2UU2UFM80nGisd026JF" crossorigin="anonymous">
</script>
{% block header %}
{% endblock %}
</head>
<body>
<div class="container">
{% block contents %}
{% endblock %}
</div>
</body>
</html>
1. DEF와 통합(1)
01. product.html에 API 연동하기!
{% extends "base.html" %}
<!-- 필터를 사용할 수 있게 해준다 -->
{% load humanize%}
{% block header %}
<script>
// 현재 웹 페이지가 준비가 되었을 때(로딩 후) 함수를 호출해 달라
$(document).ready(function () {
$.ajax({
url: "/api/product",
success: function (result) {
console.log(result);
}
});
})
</script>
{% endblock %}
{% block contents %}
<div class="row mt-5">
<div class="col-12">
<table class="table table-light">
<thead class="thead-light">
<tr>
<th scope="col">#</th>
<th scope="col">상품명</th>
<th scope="col">가격</th>
<th scope="col">등록날짜</th>
</tr>
</thead>
<tbody class="text-dark">
{% for product in product_list %}
<tr>
<th scope="row">{{product.id}}</th>
<th><a href="/product/{{ product.id }}">{{product.name}}</a></th>
<th>{{product.price|intcomma}}원</th>
<th>{{product.register_date|date:'Y-m-d H:i'}}</th>
</tr>
{% endfor %}
</tbody>
</table>
</div>
</div>
{% endblock %}
02. 마우스를 올렸을 때 API 요청되게 하기(popover 만들기)
- 각 product의 a태그에 아이디를 주어서 mouseentered와 mouseleave 적용시키기!
<!-- 필터를 사용할 수 있게 해준다 -->
{% load humanize%}
{% block header %}
<script>
// 현재 웹 페이지가 준비가 되었을 때(로딩 후) 함수를 호출해 달라
$(document).ready(function () {
$.ajax({
url: "/api/product",
success: function (result) {
console.log(result);
}
});
})
</script>
{% endblock %}
{% block contents %}
<div class="row mt-5">
<div class="col-12">
<table class="table table-light">
<thead class="thead-light">
<tr>
<th scope="col">#</th>
<th scope="col">상품명</th>
<th scope="col">가격</th>
<th scope="col">등록날짜</th>
</tr>
</thead>
<tbody class="text-dark">
{% for product in product_list %}
<tr>
<th scope="row">{{product.id}}</th>
<th><a id="product-{{ product.id }}" href="/product/{{ product.id }}">{{product.name}}</a></th>
<th>{{product.price|intcomma}}원</th>
<th>{{product.register_date|date:'Y-m-d H:i'}}</th>
</tr>
{% endfor %}
</tbody>
</table>
</div>
</div>
{% endblock %}
2. DEF와 통합(2)
01. 이벤트 등록
{% extends "base.html" %}
<!-- 필터를 사용할 수 있게 해준다 -->
{% load humanize%}
{% block header %}
<script>
function product_detail(id) {
$.ajax({
url: "/api/product/" + id,
success: function (result) {
$("#product-" + id).popover({
html: true,
content: result.name + "<br/>" + result.price
}).popover('show');
}
});
}
function product_leave(id) {
$("#product-" + id).popover('hide');
}
// 현재 웹 페이지가 준비가 되었을 때(로딩 후) 함수를 호출해 달라
$(document).ready(function () {
$.ajax({
url: "/api/product",
success: function (result) {
console.log(result);
}
});
})
</script>
{% endblock %}
{% block contents %}
<div class="row mt-5">
<div class="col-12">
<table class="table table-light">
<thead class="thead-light">
<tr>
<th scope="col">#</th>
<th scope="col">상품명</th>
<th scope="col">가격</th>
<th scope="col">등록날짜</th>
</tr>
</thead>
<tbody class="text-dark">
{% for product in product_list %}
<tr>
<th scope="row">{{product.id}}</th>
<th><a id="product-{{ product.id }}" onmouseenter="product_detail({{ product.id }})" ;
onmouseleave="product_leave({{ product.id }})"
href="/product/{{ product.id }}">{{product.name}}</a></th>
<th>{{product.price|intcomma}}원</th>
<th>{{product.register_date|date:'Y-m-d H:i'}}</th>
</tr>
{% endfor %}
</tbody>
</table>
</div>
</div>
{% endblock %}
아직까지는 코린이!