Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Vuetifyで管理画面ツクール.pdf

booink
December 17, 2019

 Vuetifyで管理画面ツクール.pdf

booink

December 17, 2019
Tweet

Other Decks in Programming

Transcript

  1. 7VFUJGZͰ
    ؅ཧը໘πΫʔϧ

    View Slide

  2. ࠓճͷςʔϚ
    7VFUJGZͰ؅ཧը໘πΫʔϧʂ

    View Slide

  3. ؅ཧը໘͸͓޷͖Ͱ͔͢ʁ

    View Slide

  4. ؅ཧը໘ͷΠϝʔδ
    w 443Ͱγϯϓϧͳ)5.-Ͱ͍͍͡ΌΜ
    w 41"ʹͨ͜͠ͱʹΑͬͯɺ͍Ζ͍Ζ࡞ΓࠐΉͷ͕ΊΜͲ͘
    ͘͞ͳ͍ʁ

    View Slide

  5. ؅ཧը໘ͷΠϝʔδ
    w 443Ͱγϯϓϧͳ)5.-Ͱ͍͍͡ΌΜ
    w 41"ʹͨ͜͠ͱʹΑͬͯɺ͍Ζ͍Ζ࡞ΓࠐΉͷ͕ΊΜͲ͘
    ͘͞ͳ͍ʁ

    View Slide

  6. 443ͷମݧΛଛͶͣʹ
    ͞Βʹ
    ϦονͰ࢖͍΍͍͢
    ؅ཧը໘ΛπΫʔϧʂ

    View Slide

  7. ͱ͍͏Θ͚Ͱ
    ຊ୊

    View Slide

  8. ಈ࡞؀ڥ
    w 7VF
    w /VYUKT
    w 7VFUJGZ
    w NPEFbTQB`
    w 7VFY
    w 7VFSPVUFS

    View Slide

  9. EFNP༻ͷϦϙδτϦ
    w IUUQTHJUIVCDPNCPPJOLWVFUJGZEFNP

    View Slide

  10. ಥવͰ͕͢

    View Slide

  11. ؅ཧը໘Λ
    41"ʹ͠Α͏ͱࢥ͚ͬͨͲ
    ҙ֎ͱ΍Δ͜ͱଟͯ͘
    πϥͨΜʂʂ

    View Slide

  12. ͜Μͳܦݧ͸
    ͋Γ·ͤΜ͔ʁ

    View Slide

  13. Կ͕πϥͨΜ͔
    w σʔλϕʔεͷσʔλΛҰཡදࣔ͸WEBUBUBCMFͰαΫο
    ͱͰ͖͚ͨͲɺݕࡧϑΥʔϜͷ֤߲໨Λ63-ʹϚοϐϯ
    ά͢Δͷ͕ɺ݁ߏΊΜͲ͍͘͞ɻ
    w ͱ͍͏͔ͦ΋ͦ΋Ͳ͏΍Δͷʼʻ

    View Slide

  14. σʔλϕʔεͷσʔλΛҰཡද
    ࣔ͸WEBUBUBCMFͰαΫοͱ
    Ͱ͖͚ͨͲɺݕࡧϑΥʔϜͷ
    ֤߲໨Λ63-ʹϚοϐϯά͢
    Δͷ͕ɺ݁ߏΊΜͲ͍͘͞ɻ

    View Slide

  15. Ͳ͏͍͏͜ͱ͔
    ͜͏͍͏ͷ

    View Slide

  16. ͜͏͍͏͜ͱ
    2VFSZ4USJOHͰҰཡදࣔ͢ΔσʔλΛϑΟϧλϦϯά͍ͨ͠

    View Slide

  17. ͜͏͍͏͜ͱ
    2VFSZ4USJOHͰҰཡදࣔ͢ΔσʔλΛϑΟϧλϦϯά͍ͨ͠
    w ݕࡧ݁Ռͷ63-Λڞ༗Ͱ͖Δͷ࠷ߴ
    w 443ͩͬͨΒݕࡧલͱݕࡧޙΛϒϥ΢βόοΫͰ໭ͬͨΓͰ͖Δ͠

    View Slide

  18. ͜͏͍͏͜ͱ
    443ʹ͢Ε͹؆୯͡ΌΜͬʂʂʂ
    2VFSZ4USJOHͰҰཡදࣔ͢ΔσʔλΛϑΟϧλϦϯά͍ͨ͠

    View Slide

  19. ͜͏͍͏͜ͱ
    2VFSZ4USJOHͰҰཡදࣔ͢ΔσʔλΛϑΟϧλϦϯά͍ͨ͠
    443ʹ͢Ε͹؆୯͡ΌΜͬʂʂʂ
    41"Ͱ΍Γ·͢
    ڧ͍ҙࢤ

    View Slide

  20. %FNP
    http://localhost:15000/spa-shops

    View Slide

  21. ࠷ॳ͸ଟ෼͜Μͳؾ࣋ͪ
    w WEBUBUBCMFͰҰཡϖʔδͰ͖ͨʂ
    w WQBHJOBUJPOͰϖʔδϯά΋Φοέʔʂ
    w ݕࡧϑΥʔϜ΋௥Ճͯ͠ɺϑΟϧλϦϯά׬ᘳʂʂ

    View Slide

  22. ࠷ॳ͸ଟ෼͜Μͳؾ࣋ͪ
    w WEBUBUBCMFͰҰཡϖʔδͰ͖ͨʂ
    w WQBHJOBUJPOͰϖʔδϯά΋Φοέʔʂ
    w ݕࡧϑΥʔϜ΋௥Ճͯ͠ɺϑΟϧλϦϯά׬ᘳʂʂ
    w ͋ΕɺͰ΋ϖʔδΛϦϩʔυ͢ΔͱݕࡧϑΥʔϜͷ৚݅ޮ
    ͍ͯͳ͍ʁ
    w ϖʔδ΋ϖʔδʹ໭ͬͯΔ͠ʝ

    View Slide

  23. 7VF3PVUFSͷొ৔
    • https://router.vuejs.org/ja/

    View Slide

  24. 7VF3PVUFSͷొ৔
    • this.$router.push({ query: { id: 1 } })
    w ˢ͜Μͳײ͡ͷॲཧΛೖΕΕ͹͍͍ײ͡ʹͳΔͷͰ
    ͸ʝʁ
    w ݕࡧͷλΠϛϯάʹೖΕͯΈΑ͏

    View Slide

  25. %FNP
    http://localhost:15000/vr-shops

    View Slide

  26. ͓ͬͳΜ͔͍͍ײ͡

    View Slide

  27. Ͱ΋ͳΜ͔͏·͍͔͘ͳ͍
    w ϖʔδϯά͢ΔͱQBHFͱ͔͍ͭͯ΄͍͠ͳ
    w QBHFͷTFUUFSʹSPVUFSQVTI௥Ճ͢Δ͔
    w Ϧϩʔυ͢Δͱɺ63-͸ͦͷ··ͳͷʹදࣔσʔλ͕શ݅ʹͳΔͳ
    w ͡ΌDSFBUFEͷGFUDIॲཧʹSPVUFRVFSZͷ஋ͰݕࡧͰ͖ΔΑ͏ʹ͠Α͏
    w ϒϥ΢βόοΫͯ͠΋ɺදࣔσʔλ͕มΘΒͳ͍ͧ
    w ʜ
    w ҰମͲ͏͢Ε͹͍͍Μͩʂʂʂ

    View Slide

  28. φϏήʔγϣϯΨʔυ
    w IUUQTSPVUFSWVFKTPSHKBHVJEFBEWBODFE
    OBWJHBUJPOHVBSETIUNM

    View Slide

  29. σόοάϩάͰݟͯΈΑ͏
    beforeRouteEnter (to, from, next) {
    console.log('beforeRouteEnter')
    next()
    },
    beforeRouteUpdate (to, from, next) {
    console.log('beforeRouteUpdate')
    next()
    },
    beforeRouteLeave (to, from, next) {
    console.log('beforeRouteLeave')
    next()
    },

    View Slide

  30. Ͳ͏΍Β
    w 63-ʹϚον͢ΔSPVUFͷίϯϙʔωϯτΛಡΈࠐΜͩ࣌
    ʹCFGPSF3PVUF&OUFS͕ݺͼग़͞ΕΔ
    w ಉ͡ίϯϙʔωϯτ಺Ͱ63-͕ ݕࡧϑΥʔϜ΍ϖʔδϯ
    άʹΑͬͯ
    มߋ͞ΕΔ࣌ʹCFGPSF3PVUF6QEBUF͕ݺ
    ͼग़͞ΕΔ
    w 63-͕SPVUFͷίϯϙʔωϯτͰ͸ແ͘ͳΔ࣌ʹ
    CFGPSF3PVUF-FBWF͕ݺͼग़͞ΕΔ

    View Slide

  31. ͳͷͰ
    w CFGPSF3PVUF&OUFSͰ2VFSZ4USJOHͷ஋ΛݩʹGFUDIॲཧΛݺͼग़ͤ
    ͹ྑͦ͞͏
    w TIPQTͷ৔߹΋ɺTIPQT JE͕खೖྗ͞Εͨ৔߹΋ରԠͰ͖
    Δ
    w CFGPSF3PVUF6QEBUF΋CFGPSF3PVUF&OUFSͱಉ͡ॲཧͰྑ͛͞
    w ΍Γ͍ͨ͜ͱ͸શ͘Ұॹ
    w CFGPSF3PVUF-FBWF͸Կ΋͠ͳ͍͍͔ͯ͘ͳ
    w ಛʹॳظԽॲཧͱ͔͸ෆཁͳ͸ͣ

    View Slide

  32. %FNP
    http://localhost:15000/shops

    View Slide

  33. ·ͱΊ
    7VF3PVUFSͱ஥ྑ͘ͳΖ͏

    View Slide

  34. ͝ਗ਼ௌ
    ͋Γ͕ͱ͏
    ͍͟͝·ͨ͠

    View Slide