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

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