ユーザーがいくつかの論文を作成し、テンプレート内のすべてのデータを表示できるアプリケーションを作成しました。すべてのペーパーには、作成時に生成される結合コードがあります。
web.phpで結合ルートを次のように定義しました。
Route::get('/conceptPaper/lobby/{joincode}', 'App\Http\Controllers\ConceptPaperController@join');
コントローラの結合機能は次のようになります。
public function join($joincode)
{
try {
$conceptPaper = ConceptPaper::where('join_code', $joincode)->firstOrFail();
return response()->json($conceptPaper);
} catch(ModelNotFoundException $e)
{
return view('errors.404');
}
}
私が使用firstOrFailを参加コードが存在するかどうかを確認します。存在する場合は応答を返す必要があり、存在しない場合はユーザーをカスタム404ページにリダイレクトする必要があります。
参加コードをルートパラメータとして取得し、コンセプトペーパーを表示するカスタムコンポーネントを作成しました
{
path: '/conceptPaper/lobby/:joincode',
name: 'conceptPaper',
component: () => import('./views/ConceptPaper.vue')
},
したがって、ユーザーが適切なコードでロビーに参加すると、対応する紙のすべてのデータを含むページにリダイレクトされます。
showPaper: async function (conceptPaper) {
const joinCode = conceptPaper.join_code;
this.$router.push({ name: "conceptPaper", params: { joincode: joinCode }, });
},
私の問題は、ユーザーが間違ったコードを入力しても、ビューにリダイレクトされることです。ネットワークタブで応答を確認すると、404ページが表示されます。
私はそれを根本的に間違って構築したと思います。誰かがそれを正しい方法で行う方法を教えてもらえますか？suerが正しい結合コードを入力すると、ConceptPaper.vueビューが表示されます。コードが間違っている場合は、404ページにリダイレクトする必要があります。
コードから、VueJをSPAとして使用していて、laravelバックエンドAPIからデータを取得していると想定しています。
これに基づいて、join関数はフロントエンドで使用するjsonデータを返すことになっていますが、がConceptPaper見つからなかった場合は、jsonの代わりにビューを返します。これは、データを変更するだけなのであまり変更されません。フロントエンドが受信しますが、フロントエンドコンポーネントは変更されません。
私がすることは、APIから404応答を返すtry catchブロックを削除し、vueで404ケースを処理し、vueでNotFoundビューを作成することです。
Laravel
public function join($joincode)
{
$conceptPaper = ConceptPaper::where('join_code', $joincode)->firstOrFail();
return response()->json($conceptPaper);
}
見る
router/index.js
const routes = [
// previous routes
{
path: '/not-found',
name: 'NotFound',
component: () => import('../views/NotFound.vue')
}
]
NotFound.vue
<template>
// page here
</template>
export {
name: 'NotFound'
}
そして最後に、axiosを使用している場合は、見つからないAPI呼び出しを処理します
axios.get('/conceptPaper/lobby/-1000')
.catch(function (error) {
if (error.response.status === 404) {
this.$router.push('NotFound');
}
});
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加