帖子 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 并改善用户体验。更多精彩敬请期待！
