PHP:Laravel-07の参考URLをもとにしていろいろと変更していきます。
1.CSSで、Bootstrapを利用します
npm install bootstrap-vue
※ Composerは、PHPの依存関係を管理するツールです。 Packagistを使用して依存関係に関する情報を取得し、適切にインストールします。
NPMはNodeエコシステムの一部であり、主にNode.jsアプリケーションの依存関係を管理するために構築されました。
2.設計関係の確認
下記の設計関係のドキュメントが必要です。理由はプロダクトの際に必要になる情報です。
常に製造の品質を上げるときは設計が重要です。設計することによってテスト内容が把握でき、結果の保証します。
参考にしているURLには設計関係のものがありますので参考にして、今後、追加と修正をしていきます。
- 画面設計
- 画面遷移図
- データベース設計
- ＵＲＬ設計
3.bootstrap-vueの利用
■bootstrap-vueを利用しているので、これを利用できるようにします
resources/app.js に下記を追加
・・・
import BootstrapVue from 'bootstrap-vue'
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'
// BootstrapVueのプラグインの利用
Vue.use(BootstrapVue)
Vue.config.productionTip = false
・・・
4.ログイン関係の修正
クライアント側での動きの制御がVue、Vuex
サーバ側での動きはLaravelのAPI
この動きを設計書に基づき、プロダクトを見てみましょう
■resources/app.js
import './bootstrap'
import Vue from 'vue'
import router from './router'
import store from './store'
import App from './app.vue'
import BootstrapVue from 'bootstrap-vue'
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'
// BootstrapVueのプラグインの利用
Vue.use(BootstrapVue)
Vue.config.productionTip = false
const createApp = async () => {
await store.dispatch('auth/currentUser')
new Vue({
el: '#app',
router,
store,
components: { App },
template: '<App />'
})
}
createApp()
App.vue
初期画面構成となります
router.js
VueRouterプラグインを使用したルーティングを行います
コンポーネントと紐づけをしています
<RouterView />が利用可能になる
const routes = [
{
path: '/',
component: PhotoList,
props: route => {
const page = route.query.page
return { page: /^[1-9][0-9]*$/.test(page) ? page * 1 : 1 }
}
},
{
path: '/photos/:id',
component: PhotoDetail,
props: true
},
{
path: '/login',
component: Login,
beforeEnter(to, from, next) {
if (store.getters['auth/check']) {
next('/')
} else {
next()
}
}
},
{
path: '/500',
component: SystemError
},
{
path: '*',
component: NotFound
}
]
■resources/store/index.js
resources/app.js が参照しているresources/store配下のjsを見てみましょう
import Vue from 'vue'
import Vuex from 'vuex'
import auth from './auth'
import error from './error'
import message from './message'
Vue.use(Vuex)
const store = new Vuex.Store({
modules: {
auth, // 認証関係
error, // エラー関係
message // メッセージ関係
}
})
export default store
storeで利用できるものは
- auth, // 認証関係
- error, // エラー関係
- message // メッセージ関係
となります
■resources/store/auth.js
ソースに詳細を記入しています
import { OK, CREATED, UNPROCESSABLE_ENTITY } from '../util'
const state = {
user: null,
apiStatus: null,
loginErrorMessages: null,
registerErrorMessages: null
}
/**
* ゲッターの定義
* storeを参照できる
*/
const getters = {
check: state => !!state.user,
username: state => state.user ? state.user.name : '',
}
/**
* ミューテーションの登録
* Vuex のストアの状態を変更できる唯一の方法は、
* ミューテーションをコミットすること
*/
const mutations = {
setUser(state, user) {
state.user = user
},
setApiStatus(state, status) {
state.apiStatus = status
},
setLoginErrorMessages(state, messages) {
state.loginErrorMessages = messages
},
setRegisterErrorMessages(state, messages) {
state.registerErrorMessages = messages
}
}
/**
* アクションの登録
*/
const actions = {
// 会員登録系
async register(context, data) {
// context.commit('setApiStatus', null):引数はtypeと値
context.commit('setApiStatus', null)
// サーバに対してAPI要求
const response = await axios.post('/api/register', data)
// サーバのレスポンス情報で処理を分けている
if (response.status === CREATED) {
context.commit('setApiStatus', true)
context.commit('setUser', response.data)
return false
}
context.commit('setApiStatus', false)
if (response.status === UNPROCESSABLE_ENTITY) {
context.commit('setRegisterErrorMessages', response.data.errors)
} else {
context.commit('error/setCode', response.status, { root: true })
}
},
// ログイン系
async login(context, data) {
context.commit('setApiStatus', null)
const response = await axios.post('/api/login', data)
if (response.status === OK) {
context.commit('setApiStatus', true)
context.commit('setUser', response.data)
return false
}
context.commit('setApiStatus', false)
if (response.status === UNPROCESSABLE_ENTITY) {
context.commit('setLoginErrorMessages', response.data.errors)
} else {
context.commit('error/setCode', response.status, { root: true })
}
},
// ログアウト
async logout(context) {
context.commit('setApiStatus', null)
const response = await axios.post('/api/logout')
if (response.status === OK) {
context.commit('setApiStatus', true)
context.commit('setUser', null)
return false
}
context.commit('setApiStatus', false)
context.commit('error/setCode', response.status, { root: true })
},
// ログインユーザーチェック
async currentUser(context) {
context.commit('setApiStatus', null)
const response = await axios.get('/api/user')
const user = response.data || null
if (response.status === OK) {
context.commit('setApiStatus', true)
context.commit('setUser', user)
return false
}
context.commit('setApiStatus', false)
context.commit('error/setCode', response.status, { root: true })
}
}
export default {
namespaced: true,
state,
getters,
mutations,
actions
}
URLから、dispathされ、actionに渡されて、actionが起動、そして、APIを起動します
ログインを見てみましょう
// ログイン系
async login(context, data) {
context.commit('setApiStatus', null)
const response = await axios.post('/api/login', data)
if (response.status === OK) {
context.commit('setApiStatus', true)
context.commit('setUser', response.data)
return false
}
context.commit('setApiStatus', false)
if (response.status === UNPROCESSABLE_ENTITY) {
context.commit('setLoginErrorMessages', response.data.errors)
} else {
context.commit('error/setCode', response.status, { root: true })
}
},
context.commit('setApiStatus', null) ミューテーションを呼び出します
例では setApiStatus に null をセットします
const response = await axios.post('/api/login', data)
例ではloginコントローラが呼び出される
画面については次回になります
