react撞牆

初次啟動

npx create-react-app my-react-app
create-react-app my-react-app

react用的

npm install --save-dev gh-pages

.git資料夾的遠端推送設定優先於所有設定 所以先看遠端 再改設定

git remote -v
git remote set-url origin git@github.com:itamiokanjiro/test.github.io.git

一鍵部屬

rm -rf build && npm run build && npm run deploy

靜態檔案package.json設定

"homepage": "https://itamiokanjiro.github.io/test.github.io",
"devDependencies": {
"gh-pages": "^6.3.0"
}

改推送分之為main

"scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "predeploy": "npm run build",
    "deploy": "gh-pages -d build -b main"
},

{onLogin}是指傳入參數
輸入框內容改變 → 更新內部的 account 狀態。

<input value={account} onChange={(e) => setAccount(e.target.value)} />

定義account這個變數 setAccount 狀態函數useState(‘’)表示空字串
const [account, setAccount] = useState(‘’);

import React, { useState } from 'react';

function LoginForm({onLogin}) {
const [account, setAccount] = useState('');
const [password, setPassword] = useState('');
const [message, setMessage] = useState('');

const handleLogin = async () => {
    if (!account || !password) {
    setMessage('請輸入帳號與密碼');
    return;
    }

    try {
    const response = await fetch('https://huahaohuahua.ddns.net:4000/login', {
        method: 'POST',
        headers: {
        'Content-Type': 'application/json',
        },
        body: JSON.stringify({ account, password }),
    });

    const result = await response.json();

    if (!response.ok) {
        setMessage(result.error || '登入失敗');
        return;
    }

    // 登入成功：儲存 token 到 cookie（或 localStorage）
    document.cookie = `token=${result.token}; path=/; max-age=2592000`; // 30 天
    setMessage('✅ 登入成功，歡迎 ' + result.user.account);
    console.log('取得的 token:', result.token);
    onLogin?.(); // 通知 AuthSwitch 刷新狀態

    } catch (error) {
    console.error('登入失敗:', error);
    setMessage('登入時發生錯誤');
    }
};

return (
    <div style={{ padding: '1rem' }}>
    <h2>使用者登入</h2>
    <div>
        <input
        type="text"
        placeholder="帳號"
        value={account}
        onChange={(e) => setAccount(e.target.value)}
        />
    </div>
    <div>
        <input
        type="password"
        placeholder="密碼"
        value={password}
        onChange={(e) => setPassword(e.target.value)}
        />
    </div>
    <button onClick={handleLogin}>登入</button>
    {message && <p>{message}</p>}
    </div>
);
}

export default LoginForm;