Zenn
Closed10

マッスルオンライン

Flask
React
API
ぐちおぐちお

Reactの開発環境をdockerで立ち上げる

下記のようにコマンドをうち、Reactをインストールする。

npx create-react-app .

Reactのファイル構造

index.js→app.jsが読み込まれる形となっている。

ぐちおぐちお

React-routerv6

app.jsにルートの設定を記述する。

<BrowserRouter>
      <Routes>
        <Route path={`/`} element={<Home />} />
        <Route path={`/about`} element={<About />} />
      </Routes>
</BrowserRouter>

応用

react-routerとRender Propsを一緒にどうやって実現するかわからなかった。

 <Route path={`/`} element={<Home {...props} loggedInStatus={loggedInStatus}/>} />
ぐちおぐちお

新規登録のやり方

  1. 新規登録フォームの作成
<form onSubmit={handleSubmit}>
        <input 
          type="email" 
          name="email" 
          placeholder="メールアドレス" 
          value={email} 
          onChange={event=> setEmail(event.target.value)}
        />
        <input 
          type="password"
          name="password" 
          placeholder="パスワード"
          value={password}
          onChange={event=> setPassword(event.target.value)}
        />
        <input 
          type="password" 
          name="password_confirmation" 
          placeholder="確認用パスワード" 
          value={passwordConfirmation}
          onChange={event=> setPasswordConfirmation(event.target.value)}
        />
        <button type="submit">登録</button>
      </form>
  1. onsubmit関数の作成
onst handleSubmit =(event)=>{ 
    console.log(email)
    console.log(password)
    axios.post("http://localhost:5000/signup",
    {
      user:{
        email:email,
        password:password,
        password_confirmation: passwordConfirmation
      }
    },
    { withCredentials: true } //cookieを含むか
    ).then(res=>{ //ユーザー作成成功
       console.log("registration res", res)
    }).catch(err=>{//ユーザー作成失敗
      console.log("registration res", err)
    })
    event.preventDefault()
  }
ぐちおぐちお

ログインしている場合、pathを通す

下記のようにtokenがあるかないかで判別を行う

<BrowserRouter>
      <Routes>
        <Route path={`/`} element={<Top />} />
        <Route path={`/signup`} element={<Signup />}/>
        <Route path={`/signin`} element={<Signin setToken={setToken}/>}/>
     {/* トークンがない場合 */}
        {!token && token!=="" &&token!== undefined?  
        <Route path={`/signin`} element={<Signin setToken={setToken}/>}/>
        :(
          <>
              <Route path={`/home`}  element={ <Home  token={token} />}/>
              <Route path={`/battlelog`}  element={ <Battlelog token={token} setToken={setToken}/> }/>
              <Route path={`/mypage`}  element={ <Mypage token={token}  />} />
          </>
        )}
      </Routes>
    </BrowserRouter>

参考記事
https://dev.to/nagatodev/how-to-add-login-authentication-to-a-flask-and-react-application-23i7

ぐちおぐちお

ログイン時にtokenを保存

const handleSubmit =(event)=>{ 
    axios.post("http://localhost:5001/signin",
    {
      user:{
        email:email,
        password:password,
      }
    }
    ).then(res=>{ //ユーザー作成成功
        props.setToken(res.data.data.token)//josnからtoken取得
        if (res.data.code===1){
          console.log("ログイン成功しました")
          console.log(res.data.data.token)
          navigate('/home')
        }
    }).catch(err=>{//ユーザー作成失敗
        console.log("registration res", err)
        console.log(err.response)
        console.log(err.response.status)
        console.log(err.response.headers)
    })
    setEmail("")
    setPassword("")
    event.preventDefault()
  }

ログインボタンを押した際に、handleSubmitメソッドを発火。
・api先を指定
・送るデータを指定
・thenで props.setToken(res.data.data.token)
　→josnからtoken取得する
　if文でapiの成功したステータスとres.data.codeがあっていた場合、
　ホームに遷移する

リダイレクトするやり方

import { useNavigate,Link } from 'react-router-dom';

const navigate=useNavigate()

navigate('/home')

こうすることで　http://localhost/home　に遷移することができる。
https://qiita.com/apollo_program/items/53e733c400ee266289b3

ぐちおぐちお

tokenを保存できていないバク

import {useState} from "react"

const useToken=()=>{
   //ローカルストレージからトークンの取得
   const getToken=()=>{
       const userToken=localStorage.getItem('token');
       return userToken && userToken //トークンが存在する場合にのみトークンを返す
   }
   
   const [token,setToken]=useState(getToken())

   //トークンを保存する
   const saveToken=(userToken)=>{
       localStorage.setItem('token',userToken)
       setToken(userToken);
   }

   //トークンの削除
   const removeToken=()=>{
       localStorage.removeItem("token")
       setToken(null);
   }
   
   return {
   setToken: saveToken,
   token,
   removeToken
 }

}

export default useToken;

useToken.jsを作成し、
・apiからのtokeの取得
・tokenの保存
・tokenの削除
をおこない
それをreturn に返す　処理をおこなっている
がここでは間違いがなかった。

ログイン時にミスがないか確認

const handleSubmit =(event)=>{ 
   axios.post("http://localhost:5001/signin",
   {
     user:{
       email:email,
       password:password,
     }
   }
   ).then(res=>{ //ユーザー作成成功
       props.setToken(res.data.data.token)//josnからtoken取得
       if (res.data.code===1){
         console.log("ログイン成功しました")
         console.log(res.data.data.token_auth)
         navigate('/home')
       }
   }).catch(err=>{//ユーザー作成失敗
       console.log("registration res", err)
       console.log(err.response)
       console.log(err.response.status)
       console.log(err.response.headers)
   })
   setEmail("")
   setPassword("")
   event.preventDefault()
 }

となっていた。

間違っていたのは、

props.setToken(res.data.data.token_auth)//josnからtoken取得

ここの部分で、
resの中身を確認したところ

data{
    token: ~~~~~~~~
}

となっているので、

props.setToken(res.data.data.token)//josnからtoken取得

と指定することで対処することができた。

ぐちおぐちお

apiから戦歴を取得し、表示する方法

useeffectを利用し、

  1. トークンをpostし、tokenが同じ場合、値を保存する。
  2. その保存した値を、表示する。
ぐちおぐちお

エラー　表示はすることができたが、ホーム画面から対戦ログ画面に遷移すると表示されない

仮説
・画面遷移時にuseeffectが起動するよりも先に画面描画されるため、エラーが起きる

結果
・useStateの初期値がミスしていたため、エラーが起きていた。

const [userlog,setUserlog]=useState()

const [userlog,setUserlog]=useState([])
ぐちおぐちお

Loading画面の追加

react-slickを使いスライドショーの作成

import Slider from "react-slick";
import "slick-carousel/slick/slick.css";
import "slick-carousel/slick/slick-theme.css";

const Loading=()=>{

    const settings = {
      dots: true,
      infinite: true,
      speed: 1000,
      slidesToShow: 1,
      slidesToScroll: 1
    };
    
    return(
        <>
            <div className={classes.telopContainer}>
                <p className={classes.telopText}>画面を横にしてお待ちください</p>
            </div>
            <Slider {...settings}>
              <div >
                <img src={`${process.env.PUBLIC_URL}/img/image1.png`} alt="a" className={classes.img}/>
              </div>
              <div>
               <img src={`${process.env.PUBLIC_URL}/img/image2.png`} alt="a" className={classes.img}/>
              </div>
              <div>
                <img src={`${process.env.PUBLIC_URL}/img/image3.png`} alt="a" className={classes.img}/>
              </div>
              <div>
               <img src={`${process.env.PUBLIC_URL}/img/image4.png`} alt="a" className={classes.img}/>
              </div>
              <div>
               <img src={`${process.env.PUBLIC_URL}/img/image5.png`} alt="a" className={classes.img}/>
              </div>
            </Slider>
            <div className={classes.footerContainer}>
            </div>
        </>
    )
}

https://react-slick.neostack.com/docs/example/simple-slider
https://mebee.info/2020/04/14/post-7305/
https://qiita.com/kijibato/items/8f142535b9897ee02b3e

ぐちおぐちお

react-webcameraからのリアルタイム映像を画像として処理する

このスクラップは2022/10/06にクローズされました