使用React創建博客應用程序，第2部分：用戶註冊

>本教程演示了使用功能反應組件構建博客的註冊功能。 在上一個登錄教程的基礎上，本節重點介紹創建註冊表格並處理用戶註冊。

入門

首先從教程的第一部分克隆github存儲庫：>

git clone https://github.com/tutsplus/create-a-blogging-app-using-react

>導航到項目目錄並安裝依賴項：

cd my-blog
npm install

該應用程序應在

>中訪問。 http://localhost:5000>

>服務器端（node.js/express示例）>

服務器端代碼將用戶數據插入數據庫中。 錯誤處理至關重要。 此示例使用PostgreSQL數據庫（根據所選數據庫的需要進行適應）：

app.post('/api/posts/userprofiletodb', (req, res, next) => {
    const values = [req.body.email, req.body.pwd]; // Corrected to use req.body
    pool.query(`INSERT INTO users(username, email, pwd, date_created)
                VALUES(, , , NOW())
                ON CONFLICT DO NOTHING`, values,
            (q_err, q_res) => {
              if(q_err) return next(q_err);
              res.json(q_res.rows);
    });
});

>

客戶端（react）

使用函數反應組件和

>，我們管理組件的狀態。 useState

捕獲形式值

>狀態變量跟踪註冊表單中的變化：

這些狀態變量綁定到表單輸入：>

const [email, setEmail] = useState('');
const [password, setPassword] = useState('');

每當輸入值更改時，

處理程序會更新狀態變量。 使用本機瀏覽器輸入驗證（例如電子郵件格式檢查）。

<input type="email" value="{email}" onchange="{(e)"> setEmail(e.target.value)} />
<input type="password" value="{password}" onchange="{(e)"> setPassword(e.target.value)} />

>處理註冊提交onChange

> 函數將註冊數據發送給服務器，或使用axios之類的庫（建議安全和功能）：>

由於其增強的安全性功能（例如，跨站點保護）和更好的錯誤處理功能，handleSubmit fetch

const handleSubmit = async (e) => {
  e.preventDefault();
  try {
    const response = await axios.post('/api/posts/userprofiletodb', { email, password });
    // Handle successful signup
  } catch (error) {
    // Handle errors
  }
};

一個工作demo

> stackblitz上有一個工作演示（原始文本中提供的鏈接）。

結論

本教程涵蓋的實施用戶註冊，包括表單處理，客戶端狀態管理，服務器端數據持久性和錯誤處理。下一部分將著重於添加和展示博客文章。

以上是使用React創建博客應用程序，第2部分：用戶註冊的詳細內容。更多資訊請關注PHP中文網其他相關文章！