開発詳細フォーミュラページ

0.詳細レシピページimg

1)レンダリング時に表示されるページ

2)「フォーミュラ」タブページ

3)[マテリアル]タブページ

4)「コメント」タブページ

1.最初に実装されたjs

$(document).ready(function(){

    $('ul.tabs li').click(function(){
    let tab_id = $(this).attr('data-tab');

    $('ul.tabs li').removeClass('current');
    $('.tabContent').removeClass('current');

    $(this).addClass('current');
    $("#"+tab_id).addClass('current');
    })


})

これは、タブ全体を含むdivを使用して組み合わせたコードで、2つのタブのいずれかをクリックすると、クリックしたタブオブジェクトに「現在」クラスを追加できます.
1つのタブオブジェクトをクリックして別のタブオブジェクトをクリックした場合、既存のクリックしたタブオブジェクトのcurrentクラスを消去し、新しくクリックしたタブオブジェクトにcurrentクラスを付与できます.

2.第2の実装のjs

$(document).ready(function () {
        // 레시피 이름 url에서 가져오기
            const urlParams = new URLSearchParams(window.location.search);
            const name = urlParams.get("recipe_name");
            })

後でこのレシピのデータをロードするときに使用するためにlistページでクリックしたレシピの名前をurlとして取得します.

3.第3の実装のjs

$.ajax({
                type: "GET",
                url: `/detail/recipe-detail?recipe_name=${name}`,
                data: {},
                success: function (response) {

                    let targetRecipe = response['target_recipe']
                    // console.log(targetRecipe)

                    let recipeName = targetRecipe['recipe_name']
                    let recipeImg = targetRecipe['recipe_img']
                    let recipeIngs = targetRecipe['recipe_ing']
                    let recipeDiff = targetRecipe['recipe_diff']
                    let recipeTime = targetRecipe['recipe_time']
                    let recipeDetails = targetRecipe['recipe_detail']
                    let recipeLike = targetRecipe['recipe_like']
                    let recipeWritter = targetRecipe['recipe_writter']
                    // console.log(recipeName, recipeImg, recipeIngs, recipeDiff, recipeTime, recipeDetails, recipeLike, recipeWritter)

            // 레시피 이미지, 레시피 타이틀 박스, 레시피 탭의 아이콘 박스 append
                    temp_html = `<img class="recipe_img" src="${recipeImg}">`
                    temp_html2 = `<span class="recipe_name" id="name">${recipeName}</span><br>
                                  <span class="recipe_writter" id="writter">${recipeWritter}</span><br>
                                  <span class="recipe_diff"><img src="/static/img/diffIcon.png" class="diffIcon">${recipeDiff}</span><br>
                                  <div class="recipe_add">
                                      <button type="button" id="bookmarkBtn"><img src="/static/img/addIcon.png" class="addIcon"></button>
                                      <p class="arrow_box">즐겨찾기에 추가!</p>
                                  </div>
                                  <span class="recipe_like"><img src="/static/img/likeIcon.png" class="likeIcon">${recipeLike}</span>`

                    temp_html3 = `<div class="timeIconWrap">
                                      <img src="/static/img/timeIcon.png" class="timeIcon">
                                      <span class="timeBox">${recipeTime}</span>
                                  </div>
                                  <div class="diff2IconWrap">
                                      <img src="/static/img/3starsIcon.png" class="diff2Icon">
                                      <span class="diff2Box">${recipeDiff}</span>
                                  </div>`

                    $('#imgWrap').append(temp_html)
                    $('#titleWrap').append(temp_html2)
                    $('#iconWrap').append(temp_html3)

これはurlで受信したクリックレシピ名に関するデータをサーバから受信する.そして,temp htmlという変数を用いて,レシピ中の画像,タイトルボックス内の各種名称,推奨数,調理過程などを実際のWeb上に体現する.