プロジェクト#1|Motivation Diary#5


- TODAY I LEARN ERROR 🦠


今日直面する問題
  • は1週間のフロントエンド開発期間が終了し、バックエンド開発期間が開始します.
  • 私が実装した部分は、Webサイトの詳細ページのAPIを担当しています.
  • データベースは、応答
  • を実現するために、フロントエンド詳細ページディレクトリデータと同じフォーマットにデータを加工する.
  • pathパラメータ/product/:idを適用して製品データ
  • にアクセス

    - HOW TO FIX MY ERROR 💊

  • Daoファイルでは、クエリー文とJavaScriptを使用してデータを所望の形状に加工する
  • .
    import prisma from '../prisma';
    
    const getProductById = async (id) => {
      const detailImages = await prisma.$queryRaw`
        SELECT
          key_number as keyNumber,
          di.detail_image_url as detailImg
        FROM
          products P
        LEFT JOIN
          detail_images di
        ON
          di.product_id = p.id
        WHERE
          p.id = ${id}
      `;
    
      const subImages = await prisma.$queryRaw`
        SELECT
          key_number as keyNumber,
          si.sub_image_url as subImg
        FROM
          products P
        LEFT JOIN
          sub_images si
        ON
          si.product_id = p.id
        WHERE
          p.id = ${id}
      `;
    
      const [product] = await prisma.$queryRaw`
        SELECT 
          p.id,
          p.name,
          p.price,
          p.description,
          p.textile_information as textileInfo,
          p.main_image_url as mainImg
        FROM 
          products p
        WHERE
          p.id = ${id}
      `;
    
      if (product) {
        product.detailImg = detailImages;
        product.subImg = subImages;
      }
    
      return product;
    };
    
    export default { getProductById };
    

    -実装画面



    -難しい部分

  • データベースにデータを挿入し、チームメンバーと共有するのに予想以上の時間がかかります.最初に設定したデータベース形式では、新しいテーブルを追加したり、コラムを再設定したりするなど、フロントエンド開発後、再構成が必要な部分が多く、チームメンバーとのコミュニケーションや再設定が非常に困難です.
  • フロントエンドに必要なデータの形式はオブジェクト値の形式で並べられているため、文の選択文をクエリーすることで解決できません.また、新しいクエリー文を作成してオブジェクトに挿入する配列を作成し、javascript構文を使用して配列をオブジェクトに挿入してAPIを完了します.
  • -今後の計画

  • バックエンド開発終了後、フロントエンドとバックエンドのマージ作業を行います.