帖子 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.jsimport 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 ( user list
{users.map(user => ( - {user.name} - {user.email}
))}
);};export default userlist;
用户表单组件
userform 组件处理创建和更新用户。
// src/components/userform.jsimport 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 ( );};export default userform;
3.将它们全部放在应用程序组件中
在app.js中，我们将结合userlist和userform来显示用户列表并处理添加/更新用户。
// src/app.jsimport 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 ( manage users
);};export default app;
4.测试应用程序
要使用后端 api 测试前端 ui，请确保后端和前端服务器都在运行：
在后端文件夹中，启动服务器：
npm start
在前端文件夹中，启动 react 应用程序：
npm start
访问 http://localhost:3000 与应用程序交互。您应该能够：
添加新用户：在表单中输入详细信息，然后单击“添加用户”。编辑用户：单击用户名旁边的“编辑”以将其数据加载到表单中。删除用户：点击“删除”可将用户从列表中删除。
后续步骤
在第 6 篇文章中，我们将专注于通过添加样式和处理表单验证来完善 ui 并改善用户体验。更多精彩敬请期待！
以上就是MERN 堆栈系列！的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1497697.html
微信扫一扫 
支付宝扫一扫 
