うわぁぁぁぁぁぁぁ！！！！！！！！！

ログイン画面作りたいいいいいいいい！！！！！

宮路です。この連載を始めた時、喘息で本当に死にかけたんですが、病院に行ってもらった薬で今は落ち着いています。喘息なめたらあかんね...

今回も死にそうになりながら、ログイン画面作っていきます。

とはいえ前回環境構築しかしてない。

というわけで、今回はそれなりに動くものを作っていきたい。

中身を見てみよう

さて、前回作ったプロジェクトファイルの構成はこんな感じです。

├── node_modules
│   └── ...
├── public
│   ├── favicon.ico
│   └── index.html
├── src
│   ├── assets
│   │   └── logo.png
│   ├── components
│   │   └── HelloWorld.vue
│   ├── views
│   │   ├── About.vue
│   │   └── Home.vue
│   ├── App.vue
│   ├── main.js
│   ├── router.js
│   └── store.js
├── .gitignore
├── babel.config.js
├── package.json
├── README.md
└── yarn.lock

それなりに動く？

前回の記事で私、

必要なものにカーソルを合わせてスペースでチェックを入れていきましょう。 今のところ必要なのは以下の2つ。

• Router: ページ遷移するのに必要
• Vuex: 後述

こんなこと言ってます。ページ遷移にRouterが必要です。

ここでログインのシステムにはどういった画面が必要なのかを考えてみましょう。

このように、ログインのシステムには複数のページが必要です。これをURL別でアクセスできるようにしたい。

そんなときにRouterが必要になります。早速router.jsを見てみましょう。

import Vue from 'vue'
import Router from 'vue-router'
import Home from './views/Home.vue'

Vue.use(Router)

export default new Router({
  mode: 'history',
  base: process.env.BASE_URL,
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    },
    {
      path: '/about',
      name: 'about',
      // route level code-splitting
      // this generates a separate chunk (about.[hash].js) for this route
      // which is lazy-loaded when the route is visited.
      component: () => import(/* webpackChunkName: "about" */ './views/About.vue')
    }
  ]
})

routesの中を見てみてください。

このroutesに書かれている部分がURLを区別しています。

path: '/',は、localhost:8080以降のURLを表しています。つまりlocalhost:8080/ということ。

path: 'about',も同じです。この場合URLはlocalhost:8080/aboutになります。npmを起動させた状態でアクセスしてみましょう。

$ npm run serve

localhost:8080/aboutにアクセスします。

Aboutページが表示されました！やったぜ。

では、このAboutページはどのファイルで作成しているのでしょうか？

ここに書いてあります。

component: () => import(/* webpackChunkName: "about" */ './views/About.vue')

とあります。なるほど、ここでコンポーネントを指定しているんですね。

早速About.vueを見てみましょう。

<template>
  
    This is an about page
  
</template>

いや質素。でもこれで1ページができています。

なるほど理解、では作ろう

さて、何となくRouterの仕組みが分かったところで、早速ログインに必要な画面を作っていきましょう。

新しくvueファイルを作成します。

src/views/login.vue
src/views/signup.vue

<template>
  
    ログイン
    
      

      

    
    <button @click="login">ログイン</button>
    <p>
      新規登録は
      <router-link to="/signup">こちら</router-link>
    </p>
  </div>
</template>


  export default {
    name: 'login',
    data () {
      return {
        username: '',
        password: ''
      }
    },
    methods: {
      login: function () {
        this.$router.push('/')
      }
    }
  }



<template>
  
    新規登録
    
      ログインは
      こちら
    
    
      

      

      新規登録
    
  </div>
</template>


  export default {
    name: 'Signup',
    data () {
      return {
        username: '',
        password: ''
      }
    },
    methods: {
      signup: function () {
        alert("登録されたアドレスにメールを送信しました！確認してください");
        this.$router.push('/login')
      }
    }
  }



ついでにHome.vueもいじっちゃいましょう。
<template>
  
    
      ログイン成功！
      
    
    <button @click="logout">ログアウト</button>
  </div>
</template>


export default {
  name: "Home",
  methods: {
    logout: function() {
      this.$router.push("/login")
    }
  }
};



今度は先ほど追加したLogin.vueとSignup.vueを表示するために、router.jsに追記します。
import Vue from 'vue'
import Router from 'vue-router'
import Home from './views/Home.vue'
import Login from './views/Login'
import Signup from './views/Signup'

Vue.use(Router)
.
.
.
      component: () => import(/* webpackChunkName: "about" */ './views/About.vue')
    },
    {
      path: '/login',
      name: 'login',
      component: Login
    },
    {
      path: '/signup',
      name: 'signup',
      component: Signup
    }
  ]
})


npmを起動します。
$ npm run serve

localhost:8080/loginにアクセスしてみましょう。








ちゃんとlogin.vueで記述した内容が適用されていますね。
新規登録はこちら
とあります。リンクをクリックしてみましょう。








Signup.vueで記述した内容が適用されています。
そしてURLもlocalhost:8080/signupになっています。




ログインはこちらボタンを押してみましょう。












またlocalhost:8080/loginに戻ってきました。
今度はログインボタンを押してみましょう。








ログイン成功画面にきました。URLはlocalhost:8080です。
最後に、ログアウトボタンを押してみましょう。








再びlocalhost:8080/loginに戻ってきました。ページ遷移の完成です！
結局今日は何ができたの？
今回はログイン・新規登録画面の作成と、ページ遷移を行いました。
まとめるとこんな感じ








ただ、まだボタンを押したりURLを直打ちしてページ遷移をするだけなので、これをベースにログイン認証等の肉付けをしていきます。








疲れたね。。。
次回は実際にメールアドレスとパスワードを入力してログインできるようにしてみたいと思います。




宮路でした。