MERN 堆栈系列！

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;

4.测试应用程序

要使用后端 api 测试前端 ui，请确保后端和前端服务器都在运行：

在后端文件夹中，启动服务器：

  npm start

在前端文件夹中，启动 react 应用程序：

  npm start

访问 http://localhost:3000 与应用程序交互。您应该能够：

添加新用户：在表单中输入详细信息，然后单击“添加用户”。
编辑用户：单击用户名旁边的“编辑”以将其数据加载到表单中。
删除用户：点击“删除”可将用户从列表中删除。

后续步骤

在第 6 篇文章中，我们将专注于通过添加样式和处理表单验证来完善 ui 并改善用户体验。更多精彩敬请期待！

以上就是MERN 堆栈系列！的详细内容，更多请关注硕下网其它相关文章！