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

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

502e9bc1d89f8cb5dd79267bd4a0e49a?s=47 booink
December 17, 2019

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

502e9bc1d89f8cb5dd79267bd4a0e49a?s=128

booink

December 17, 2019
Tweet

Other Decks in Programming

Transcript

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

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

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

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

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

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

  7. ͱ͍͏Θ͚Ͱ ຊ୊

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

    7VFY w 7VFSPVUFS
  9. EFNP༻ͷϦϙδτϦ w IUUQTHJUIVCDPNCPPJOLWVFUJGZEFNP

  10. ಥવͰ͕͢

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

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

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

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

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

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

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

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

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

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

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

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

    w ϖʔδ΋ϖʔδʹ໭ͬͯΔ͠ʝ
  23. 7VF3PVUFSͷొ৔ • https://router.vuejs.org/ja/

  24. 7VF3PVUFSͷొ৔ • this.$router.push({ query: { id: 1 } }) w

    ˢ͜Μͳײ͡ͷॲཧΛೖΕΕ͹͍͍ײ͡ʹͳΔͷͰ ͸ʝʁ w ݕࡧͷλΠϛϯάʹೖΕͯΈΑ͏
  25. %FNP http://localhost:15000/vr-shops

  26. ͓ͬͳΜ͔͍͍ײ͡

  27. Ͱ΋ͳΜ͔͏·͍͔͘ͳ͍ w ϖʔδϯά͢ΔͱQBHFͱ͔͍ͭͯ΄͍͠ͳ w QBHFͷTFUUFSʹSPVUFSQVTI௥Ճ͢Δ͔ w Ϧϩʔυ͢Δͱɺ63-͸ͦͷ··ͳͷʹදࣔσʔλ͕શ݅ʹͳΔͳ w ͡ΌDSFBUFEͷGFUDIॲཧʹSPVUFRVFSZͷ஋ͰݕࡧͰ͖ΔΑ͏ʹ͠Α͏ w

    ϒϥ΢βόοΫͯ͠΋ɺදࣔσʔλ͕มΘΒͳ͍ͧ w ʜ w ҰମͲ͏͢Ε͹͍͍Μͩʂʂʂ
  28. φϏήʔγϣϯΨʔυ w IUUQTSPVUFSWVFKTPSHKBHVJEFBEWBODFE OBWJHBUJPOHVBSETIUNM

  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() },
  30. Ͳ͏΍Β w 63-ʹϚον͢ΔSPVUFͷίϯϙʔωϯτΛಡΈࠐΜͩ࣌ ʹCFGPSF3PVUF&OUFS͕ݺͼग़͞ΕΔ w ಉ͡ίϯϙʔωϯτ಺Ͱ63-͕ ݕࡧϑΥʔϜ΍ϖʔδϯ άʹΑͬͯ มߋ͞ΕΔ࣌ʹCFGPSF3PVUF6QEBUF͕ݺ ͼग़͞ΕΔ

    w 63-͕SPVUFͷίϯϙʔωϯτͰ͸ແ͘ͳΔ࣌ʹ CFGPSF3PVUF-FBWF͕ݺͼग़͞ΕΔ
  31. ͳͷͰ w CFGPSF3PVUF&OUFSͰ2VFSZ4USJOHͷ஋ΛݩʹGFUDIॲཧΛݺͼग़ͤ ͹ྑͦ͞͏ w TIPQTͷ৔߹΋ɺTIPQT JE͕खೖྗ͞Εͨ৔߹΋ରԠͰ͖ Δ w CFGPSF3PVUF6QEBUF΋CFGPSF3PVUF&OUFSͱಉ͡ॲཧͰྑ͛͞

    w ΍Γ͍ͨ͜ͱ͸શ͘Ұॹ w CFGPSF3PVUF-FBWF͸Կ΋͠ͳ͍͍͔ͯ͘ͳ w ಛʹॳظԽॲཧͱ͔͸ෆཁͳ͸ͣ
  32. %FNP http://localhost:15000/shops

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

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