[ver2.x]残課題

[suzy1031]

課題

共通

• エラーメッセージのfont-size、color、position
• ログインエラー時のemail、passwordどちらが間違っているか、inputフィールドのoutlineを赤くする => pending vee-validateなどのplugin使う
• 'api/v1/studies'ページにて一定時間過ぎると、データが取得できなくなってしまう（ログアウトすれば正常に戻る）

  GET http://localhost:5000/api/v1/studies 500 (Internal Server Error)
  Uncaught (in promise) Error: Request failed with status code 500

• スマホchromeにて登録ボタン押下後にページがリロードしない
• systemテスト => pendding

Log In

• 未登録のemailでログインしようとするとエラーメッセージが表示されない
• 401(Unauthorized)エラーの時はNot Authorizedのエラーメッセージが出るが、404(Not Found)の時はコンソールにしかエラーメッセージが表示されない
• ~~サインアップ時に同じメールアドレスで登録しようとすると、422(Unprocessable Entity)エラーが コンソールにしかエラーメッセージが表示されない~~

Sign Up

• 一意チェック →422(Unprocessable Entity)エラー時に「既に登録されているEメールです」のメッセージ表示

Record

• user_idを保存

完了

共通

• Input elements should have autocomplete attributes →フィールドにautocomplete="off"のプロパティを追加

Sign Up Email →hoge@hoge.comのメール形式の際のエラーメッセージ →バリデーション Password →422(Unprocessable Entity)エラー→タグにrequired="required"を追加 Password comfirmation →422(Unprocessable Entity)エラー→タグにrequired="required"を追加

[suzy1031]

routing error ('/')以外の画面でリロードするとroutesエラーになる routesの設定がおかしい？

Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to current location: "/".

※udemyのプロジェクトで同じ処理使っていたかもしれないので確認する →URLを直叩きした時や、ログイン状態でログイン画面へ行こうとした場合、ログインしていないのにRecord画面へ行こうとした場合などの為に設定が必要 ナビゲーションガード

参考 同じエラーのissue vue側の問題だと思う historyモードのせい？ SPAにありがちな更新処理を行うと404になっちゃう問題(VueとHeroku版) SPA を開発する際に必須のタスクの一つとして、History APIのフォールバックがある。

historyモードを解除することでリロード問題はクリア URLに#が含まれてしまうのでhistoryモードでリロード問題を解消する

[suzy1031]

postするとPOST http://localhost:5000/api/studies 500 (Internal Server Error) 事象

• DBにはデータがinsertされている
• 画面をリロードすると正常に戻る
• vue側をデバックすると.thenの処理へ入らないで抜けてしまう

参考 axios.postの際に500 server errorが出た時の原因突き止め方

この記事を参考にして開発者ツールのnetworkを確認してみる studiesの選択 > Responseを確認

# 以下のエラーが発生している
"undefined method `study_url' for #<Api::StudiesController:0x00007fd31bd71cc0>"

参考 Rails: NoMethodError (Undefined method _url for _controller. I can't seem to respond_with json properly after my create. Why?

リダイレクト先の指定方法が良くない

location: study
# これだとrailsは以下のURLを返そうとする
study_url
# vue.jsのrouter.jsで定義しているURL
/Record

createアクションは200 okだが、その後のリダイレクト処理でサーバ(rails)側からリダイレクト先のhtmlが返って来ない為、500 server errorを返していた

this is an API and there is no real redirecting, but the default Rails responder doesn't know that. It also doesn't know about your routing namespaces.

Rails does not understand your route namespaces when inferring the route, so it attempts hotel_url - a route which does not exist!

これで500 server errorは解消

画面がリロードされずデータが更新されていない

# Record.vue
# この処理ができていない
this.$router.go({path: this.$router.currentRoute.path, force: true})

修正

-this.study.push(response.data)
+let e = response.data
this.$router.go({path: this.$router.currentRoute.path, force: true})

画面がリロードされてデータが更新されるようになった

↓

ver2.0以降で再びリロードできないエラーが発生

# 学習時間の登録後の画面遷移
# 以下の箇所を修正して試してみる（PC chromeは動作する）
-this.$router.go({path: this.$router.currentRoute.path, force: true})
+this.$router.go({ name: 'Record' })

参考 teratrail =>リロードされず

#studies_controller
-study = current_user.studies.build(study_params)
+study = current_user.studies.new(study_params)

=>リロードされず

#studies_controller
private
def study_params
-params.require(:study).permit(:time, :total, :user_id)
+params.require(:study).permit(:time, :total).merge(user_id: current_user.id)
end

=>リロードされず

ajax通信で反映させる => わざわざリロードさせなくてもaxiosを使っていればajax通信してくれているのでデータを非同期で取得できるはず ※タイポしていただけ？

-let e = response.data
-this.study.push(response.data)
+this.studies.push(response.data)
-this.$router.go({path: this.$router.currentRoute.path, force: true})

[suzy1031]

signupエラーメッセージ表示

user_controller.rb
~~省略~~
render json: { error: user.errors.full_messages.join(' ') }, status: :unprocessable_entity
~~省略~~

# Signup.vue
<template>
+<div class="common-error-message" v-if="error">{{ error }}</div>
</template>

<script>
export default {
data() {
+error: ''
}
}
</script>

メールの一意チェックのバリデーションが有効になりエラーメッセージが表示される パスワード確認用が間違っていた場合のバリデーションが有効になりエラーメッセージが表示される

[suzy1031]

sign upするとlogin('/')にリダイレクトされてエラー

vue-router.esm.js:1943 Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to current location: "/".

遷移先パスを変更

# SignUp.vue
signupSuccessful(response){
-this.$router.replace('/')
+this.$router.replace('/record')
}

[suzy1031]

ログイン状態で'/'に遷移するとduplicateエラーが発生

# Login.vue
checkSignedIn() {
if (localStorage.signedIn) {
-this.$router.replace('/')
+this.$router.replace('/record')
}
}
# Signup.vue
checkSignedIn() {
if (localStorage.signedIn) {
-this.$router.replace('/')
+this.$router.replace('/record')
}
}