MERN 堆栈系列！-js教程-PHP中文网

MERN 堆栈系列！

聖光之護

发布： 2024-11-14 18:30:01

转载

732人浏览过

mern 堆栈系列！

帖子 5：使用 react 构建前端用户界面

在第 4 篇文章中，我们使用 express 和 node.js 开发了 restful api 来处理用户数据的 crud 操作。现在，是时候使用 react 创建前端 ui，允许用户通过与后端通信的交互式界面来查看、添加、更新和删除数据。

1.设置前端项目

首先，让我们确保您的 mern 堆栈项目中的前端设置已准备就绪。

导航到前端文件夹并安装 axios 来处理 http 请求：

  cd frontend
  npm install axios

登录后复制

axios 将允许我们轻松地将请求发送到我们的 express api。

2.创建基本的 react 组件

我们将创建用于管理用户的组件：一个用于列出用户的主组件和一个用于添加或编辑用户的表单组件。

组织组件文件夹

在 src 内，创建一个包含以下文件的组件文件夹：

userlist.js - 列出用户
userform.js - 用于创建和编辑用户

用户列表组件

userlist将从后端获取用户数据并以列表形式显示。将以下代码添加到 userlist.js：

// src/components/userlist.js
import react, { usestate, useeffect } from "react";
import axios from "axios";

const userlist = ({ onedit, ondelete }) => {
  const [users, setusers] = usestate([]);

  useeffect(() => {
    const fetchusers = async () => {
      try {
        const response = await axios.get("/api/users");
        setusers(response.data);
      } catch (error) {
        console.error("error fetching users:", error);
      }
    };
    fetchusers();
  }, []);

  return (
    <div>
      <h2>user list</h2>
      <ul>
        {users.map(user => (
          <li key={user._id}>
            {user.name} - {user.email}
            <button onclick={() => onedit(user)}>edit</button>
            <button onclick={() => ondelete(user._id)}>delete</button>
          </li>
        ))}
      </ul>
    </div>
  );
};

export default userlist;

登录后复制

用户表单组件

userform 组件处理创建和更新用户。

// src/components/userform.js
import react, { usestate, useeffect } from "react";
import axios from "axios";

const userform = ({ selecteduser, onsave }) => {
  const [formdata, setformdata] = usestate({ name: "", email: "", password: "" });

  useeffect(() => {
    if (selecteduser) {
      setformdata(selecteduser);
    }
  }, [selecteduser]);

  const handlechange = e => {
    setformdata({ ...formdata, [e.target.name]: e.target.value });
  };

  const handlesubmit = async e => {
    e.preventdefault();
    try {
      if (selecteduser) {
        await axios.put(`/api/users/${selecteduser._id}`, formdata);
      } else {
        await axios.post("/api/users", formdata);
      }
      onsave();
      setformdata({ name: "", email: "", password: "" });
    } catch (error) {
      console.error("error saving user:", error);
    }
  };

  return (
    <form onsubmit={handlesubmit}>
      <input name="name" value={formdata.name} onchange={handlechange} placeholder="name" required />
      <input name="email" value={formdata.email} onchange={handlechange} placeholder="email" required />
      <input name="password" value={formdata.password} onchange={handlechange} placeholder="password" required />
      <button type="submit">{selecteduser ? "update user" : "add user"}</button>
    </form>
  );
};

export default userform;

登录后复制

3.将它们全部放在应用程序组件中

在app.js中，我们将结合userlist和userform来显示用户列表并处理添加/更新用户。

// src/app.js
import react, { usestate } from "react";
import userlist from "./components/userlist";
import userform from "./components/userform";
import axios from "axios";

const app = () => {
  const [selecteduser, setselecteduser] = usestate(null);

  const handleedit = user => setselecteduser(user);

  const handledelete = async userid => {
    try {
      await axios.delete(`/api/users/${userid}`);
      window.location.reload();
    } catch (error) {
      console.error("error deleting user:", error);
    }
  };

  const handlesave = () => {
    setselecteduser(null);
    window.location.reload();
  };

  return (
    <div>
      <h1>manage users</h1>
      <userform selecteduser={selecteduser} onsave={handlesave} />
      <userlist onedit={handleedit} ondelete={handledelete} />
    </div>
  );
};

export default app;

登录后复制