映画検索サービス

6440 ワード
mixitup pagination skeleton HistoryAPI テキストリンク

movieApp



https://developers.themoviedb.org/4/getting-started/authorizationのapiを使用して、映画検索サービスを作成します.
ページングの場合は、コンポーネントとして個別に実装したい.
DEMOこっちへ!
番号はこちらです。

機能

  • 検索
  • スケルトン
  • ページnation
  • ソート
  • ルータ前、後ボタン

    • 使用するテクノロジー

  • mixitup.js(ソート)
  • history API(前後ボタン)

    • 学識


    CSS


  • flex centerを適用する兄弟で1つの位置だけを調整するには、調整するページの余白-topを変更するだけです.(title marging-top変更を参照)

  • Aをサスペンションする場合、変更したい要素があれば以下のようになります.
    • .A:hover element {
    blah
    blah
}

  • movieのオーバーフローをhiddenに変更するため、overviewの効果を表示できます.
  • scoreを映画の最上端に置こうとしたが、hiddenのためscoreの上端が隠されていた.Google検索の結果、親のオーバーフローをカバーすることはできません.だから最終的にinfoを右側の真ん中に位置させます.

  • 子供が絶対的であれば、直属の親が相対的であることを確認したり、上に登ったりします.
  • .movie .score.animated-bgは.score.animated-bgより点数が高いので優先度が高い.ということで.movie .score.animated-bgということで、propertyを適用してみました.

  • いくらなんでも.posterとheight:10%は反応しませんでした.これは、.posterの親ラベルがheightをpx、em、remなどと明確に指定していないためである.(逆にwidth親widthがない場合はviewport widthに従う)したがって、.movieではなく.posterでheightを指定する必要があります.https://stackoverflow.com/questions/5657964/css-why-doesn-t-percentage-height-workを参照してください.

  • ページングでprevをクリックし、サブレベルのspanまたはfasアイコンをクリックし続けます.本来なら親としてのprevはクリックされるはず!したがって、Google検索で以下のコードを入力すると、サブエレメントのクリックイベントは無効になり、親のみがクリックできるようになります.
    .prev *,
.next * {
  pointer-events: none;
}
/* 별표는 모든 자식을 뜻함 */
  • [blahblah]{}は、blahblahの属性を有するタグ(ページングによって理解される)を表し、JSではdocument.querySelectorAll('[href]')として表すことができる(hrefの属性を有するノードを選択する)

  • ボタンをクリックして色を変えるのはJSではなく、cssでfocusセレクタとして実現できます.

  • 基本的に,開発者ツールはサスペンション状態のスタイルを表示していない.サスペンション時に適用されるスタイルを表示するには、開発者ツールの右上隅にあるフィルタの横にある「:hov」をクリックします.
  • は、ページングされたhoverが継承され、navに不透明度が適用されることを示す.したがって、次のコードを使用してスケールできます.
    • ul li:hover:not(nav .dropdown) {
  opacity: 0.7;
}

  • 詳細については、ドロップダウンリンクを参照してください.

  • aラベルではありません.movieにscaleを適用する必要がありますsortの後、aタグにインラインスタイルが適用されるため、scaleが上書きされて失効する.
    • また,互換性のために,以下のコードに示すように変換を適用する.
    ```css
transition: transform 0.35s;
-o-transition: transform 0.35s;
-moz-transition: transform 0.35s;
-webkit-transition: transform 0.35s;
```

    JS


  • APIの使い方を知りたい場合は、https://developers.themoviedb.org/3/getting-started/introductionに入り、検索バーでコンテンツを検索できます.

  • 近親は私の祖先にのみ適用され、祖先の兄弟姉妹には適用されません.

  • mixでエラーが発生したのは、mixのtargetがajax呼び出し前のtargetデータを有し、ajax呼び出し後のtargetに適用しようとしたためです.

  • 例えば、ajaxが呼び出される前にmainのコンテンツはUncaught (in promise) TypeError: Cannot read properties of null (reading 'removeChild')であると仮定する.ただし、2ページ目をクリックしたりカテゴリを変更したりすると、targetも変更されるべきであり、mixに格納されているtargetはdbType:trend ,page:1のままである.したがって、mainでトレンド内のターゲットを1つずつ検索および移動する必要があるmixitupでエラーが発生します.見つかりません.nullと表示されているようです.

  • したがって、前のmixインスタンスを削除し、新しいmixを作成し、targetを設定する必要があります.その時に必要な方法はdbType:trend ,page:1!(mixitup apiドキュメントで提供)したがって,ページ,カテゴリが変化するたびにdestroyが行われ,インスタンスがリフレッシュされる.コメントドキュメント

  • mixitupで.destroy()エラーが発生し、data attributeに何が欠けているかを示します.私ならdateがなければ、このエラーが発生します.したがって,templateでo.tolowercase is not a function.を解析することでエラーを解決できる.

  • New Custome、Dispatcher、History APIルーティングを使用します.アティクロを整理する.妖気
  • $anchor.dataset.date = release_date ? release_date : 0;のエラーが発生しました.今回は、movieDataまたはshowMoviesByDBのmovieDataに登録するのではなく、逐次漸進的に説明しました.したがって、showMoviesByDBは、movieDataに値が付与されていないと推測することができる.

  • よく見ると、ifにdbkeyがある場合は、dbから取り出すだけでshowMoviesByObjectで表示されます.movieDataに何も割り当てられていないので、undefinedが返されます.

  • 以前は、cannot destructure total_pages of movieData as it is undefined(main.js 100줄 쯤)の問題の原因を知りたくなくて、無条件にログを閲覧して、大まかな方法で間違いを探したいだけでしたが、冷静に遡ってみると、思ったより間違いが簡単だと気づきました!このように問題の原因を考える練習をしましょう!!

  • 検索後(検索語は「well」と言います)、前後キーを押してpageを押すとurlにqueryが、dbTypeにqueryが表示されます.(well?page=2はこのように)차분하게が表示されます.(dbType:well,getDataByCurrentDbType関数はswitchで選択されないためundefinedが返される.)

  • onPageで間違えたようです

  • onPageでdbTypeを検索するべきですが、「well」です.つまり、あなたはsetStateを間違えました.

  • ではonRouteでエラー! Cannot destructure property 'results' of 'movieData' as it is undefined.ではなくdbKey === 'searching'であるべきですしたがって、dbTypeはrouterです.js-popstateの時に渡してくれました

  • このように,現在の現象を冷静に考えると,その現象に影響する関数,変数が見つかる.それは手がかりがあり始めた.
    • 『フィナンシャルモデリング』をPythonで実装してみた（１）株価データをインポート
    Talibで使えるローソク足に関する関数のまとめ （１）完成版