atsushi0124
commented
11 months ago 追記いたします。 2023/12/30 httpリクエストでDBに接続する方法は理解することができました。 しかし、ログイン後にどうやってログインしたトークンをメモの追加の際に取得できなくて、行き詰まってしまいました。
試したこと 最初に質問したコードのまま、Dockerを再起動したところ、エラーで401エラーが返ってくるようになりました。
キャプチャーは下記の通りです。 https://drive.google.com/file/d/1Ntyhrm1wWOPkJlxfdmDArKzQbv7f-kt4/view?usp=sharing ![Uploading スクリーンショット 2023-12-31 11.34.44.png…]()
わからないこと サインインで使用したトークンをメモを追加した際に mavs-task/backend/src/middleware/authenticate.js このファイルでトークンを管理していることが分かったのですが、なぜ、トークン情報を取得することができないのかがわからないです。
お手隙の際にご教示していただきたいです！ よろしくお願いいたします。
sho-mavs
行き詰まっているところ signin.vueを参考にcreateArticle.vueに書き換え、バックエンドの mavs-task/backend/src/routes/articles/articles.router.jsに接続できるように 「
${apiBaseUrl}/articles/createArticle,」を追加したのですが、実際に接続できているのかの確認の方法がわからなくて、行き詰まっています。まずは、DBの接続を確認したいと思っているので、ご教示していただければ、幸いです。
画面のキャプチャです。 https://github.com/atsushi0124/mavs-task/assets/71283865/7521be7a-a9ce-40b9-b199-b2801275721f
下記に追加したコード記載いたします。
お手隙の際にご回答いただければ幸いです。
===================================================================
追記したコード frontend/src/pages/createArticle.vue `// フォームの設定 const { handleSubmit, isSubmitting } = useForm({ // バリデーションルール validationSchema: { email(value: string) { // 必須 if (!value) { return "タイトルを入力してください"; } return true; }, password(value: string) { if (!value) { return "内容を入力してください"; } return true; }, }, });
// フィールドの値とエラーメッセージを取得 const { value: memoTitle, errorMessage: emailErrorMessage } = useField("memoTitle"); const { value: memoDesc, errorMessage: passwordErrorMessage } = useField("memoDesc");
// addMemoという名前の関数を定義 // この関数は、ユーザーが保存ボタンをクリックしたときに実行されます const addMemo = handleSubmit(async () => { try { console.log(memoTitle.value, memoDesc.value); // ログインAPIを呼び出す -> /backend/src/routes/articles/createArticleを参照 const { data } = await useFetch(
${apiBaseUrl}/articles/createArticle, { method: "POST", body: { title: memoTitle.value, content: memoDesc.value, }, } ); console.log(data); } catch (error) { console.log(error); } });`=================================================================== frontend/src/types/api.ts
export interface AddMemoResponse { title: string; content: string; }===================================================================
backend/src/routes/articles/articles.router.js 既存のコードを使用 `import articleService from '../../services/articles/ArticleService.js'; import express from 'express'; import authenticate from '../../middleware/authenticate.js';
const router = express.Router();
/**
メモ新規登録 */ router.post('/createArticle', authenticate, async (req, res, next) => { try { // リクエストパラメーター const { title, content, created_at } = req.body;
// 新しい記事を作成 const newArticle = await articleService.createArticle('', title, content, created_at);
// 返却用データを生成 const body = { id: newArticle.id, title: newArticle.title, content: newArticle.content, created_at: newArticle.created_at, };
res.status(200).json(body); } catch (error) { console.error(error); res.status(500).json({}); } });
export default router;`