Membuat aplikasi blog menggunakan React, Bahagian 2: Pendaftaran Pengguna

Tutorial ini menunjukkan membina fungsi pendaftaran blog menggunakan komponen React berfungsi. Membina tutorial log masuk sebelumnya, bahagian ini memberi tumpuan kepada membuat borang pendaftaran dan pengendalian pendaftaran pengguna.

Bermula

Mulailah dengan mengkloning repositori github dari bahagian pertama tutorial:

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

Navigasi ke direktori projek dan pasangkan kebergantungan:

cd my-blog
npm install

Permohonan harus diakses di http://localhost:5000.

The Server-side (Node.js/Express Example)

kod sisi pelayan mengendalikan penyisipan data pengguna ke dalam pangkalan data. Pengendalian ralat adalah penting. Contoh ini menggunakan pangkalan data PostgreSQL (menyesuaikan diri seperti yang diperlukan untuk pangkalan data pilihan anda):

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);
    });
});

3

Menggunakan komponen reaksi berfungsi dan , kami menguruskan keadaan komponen.

Menangkap nilai borang useState

Pembolehubah Negeri Trek Perubahan dalam medan borang pendaftaran:

Pembolehubah keadaan ini terikat pada input bentuk:

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

Pengendali

mengemas kini pembolehubah keadaan apabila nilai input berubah. Pengesahan input penyemak imbas asli (seperti pemeriksaan format e -mel) digunakan.

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

Pengendalian penyerahan pendaftaran onChange

Fungsi menghantar data pendaftaran ke pelayan menggunakan atau perpustakaan seperti AXIOS (disyorkan untuk keselamatan dan ciri):

handleSubmit AXIOS lebih disukai daripada API FETCH kerana ciri keselamatannya yang dipertingkatkan (mis., Perlindungan pemalsuan lintas tapak) dan keupayaan pengendalian ralat yang lebih baik. 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 kerja

Demo kerja boleh didapati di StackBlitz (pautan yang disediakan dalam teks asal).

Kesimpulan

Tutorial ini meliputi pelaksanaan pendaftaran pengguna, termasuk pengendalian borang, pengurusan negara, kegigihan data sisi pelayan, dan pengendalian ralat. Bahagian seterusnya akan memberi tumpuan kepada menambah dan memaparkan catatan blog.

Atas ialah kandungan terperinci Membuat aplikasi blog menggunakan React, Bahagian 2: Pendaftaran Pengguna. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!