自動化無しに生活無し

WEBとかAIとかLinux関係をひたすら書く備忘録系ブログ

  • 【Restful】Django+Reactビギナーが40分で掲示板アプリ(SPA)を作る方法【axios + 関数コンポーネント】

    【Restful】Django+Reactビギナーが40分で掲示板アプリ(SPA)を作る方法【axios】 ではクラスベースのコンポーネントを使っている。 最近の開発では関数ベースのコンポーネントが主流のため、一部を書き換えた。 React App.js import React, { useState, useEffect } from "react"; import Modal from "./components/Modal"; import axios from "axios"; const App = () => { const [topicList, setTopicList] = useState([]); const [modal, setModal] = useState(false); const [activeTopic, setActiveTopic] = useState({ comment: "" }); // コンポーネントがレンダリングされるときに実行する useEffect(() => { refreshList(); }, []); // ページロード const refreshList = () => { axios .get("/api/topics/") ...
  • Django(DRF)+ReactのSPAでJWTを使った認証を実装する

    この構成の場合、Djangoのデフォルトの認証機能でも実現はできるが、SPAのコンセプトが台無しになるため、JWTを使う。 JWT とは? JSON Web Token の略である。 JWTとは、認証情報や権限を含んだ文字列(トークン)のこと。JSON形式で送受信される。 参照: https://ja.wikipedia.org/wiki/JSON_Web_Token クライアント側が、ログイン用のユーザー名とパスワードを入力 サーバーがその検証をする。検証の結果、問題なければトークンを生成、これがJWTである。 レスポンスと ...
  • 【Restful】Django+Reactビギナーが40分でCRUD掲示板アプリ(SPA)を作る方法【FetchAPI】

    本記事は、【Restful】Django+Reactビギナーが40分で掲示板アプリ(SPA)を作る方法【axios】のFetchAPI版である。 axiosを別途インストールせず、FetchAPIを使っている。 流れ React、Djangoの各プロジェクトを作る Djangoの必要なライブラリをインストール Djangoのsettings.pyの編集 Djangoのmodels.pyの編集 Djangoのse ...
  • 【Restful】Django+Reactビギナーが40分で掲示板アプリ(SPA)を作る方法【axios】

    『Djangoビギナーが40分で掲示板アプリを作る方法 』を終え、DjangoとReactを組み合わせ、SPAを作りたいと思った方向け。 40分はあくまでも目安。 内部構造に関しては、『DjangoとReactを組み合わせる方法論と問題の考察 』に解説がある。 2023年5月3日現在、編集機能の実装を考慮中。近日追記予定。 2024年4月30日追記。モーダルダイアログを使用して編集機能を搭載。 流れ React、 ...