使用React和feathersjs构建一个node.js crud应用

>本教程演示了使用node.js，react，feathersjs和mongodb构建CRUD联系管理器应用程序。 它强调一种精简的方法，最大程度地减少样板代码并利用现代反应特征。

核心概念是将前端（React）和后端（FeatherSJS）逻辑分开，以增强代码可重复使用性和可维护性。 FeatherSjs简化了后端API的创建，与直接使用Express相比，降低了重复编码。

关键功能和技术：

后端（feathersjs）：
• 提供了一个轻巧的框架，用于使用socket.io构建静止的API和实时功能。 它通过mongoose无缝地与蒙古德（Mongodb）集成在一起，以进行数据持久性。 frontend（react）：
使用创建React App进行脚手架，用于状态管理的React挂钩（避免REDUX）和语义UI对造型和组件结构的反应。 React路由器管理导航。 Axios处理数据获取。
• 数据库（mongodb）：选择了一个NOSQL数据库，以延伸性和与Mongoose集成的易用性。
• 状态管理：利用React钩子和上下文API进行有效的全球状态管理。>
表格处理：
• >使用简化的形式创建和验证的react钩形式。 错误处理：
包括可靠的错误处理机制，以优雅地管理网络和服务器端错误。
开发步骤（摘要）：

项目设置：

使用创建React App，然后使用>和

的后端目录。使用

生成羽毛状应用程序（选择JavaScript，Rest＆Realtime和Mongoose）。 为联系人生成猫鼬服务。
1. >

   >create-react-appmkdir backend后端配置：cd backendconfigurefeathers generate app（如果需要的话，请调整分页），然后完善

   以使用验证（使用
）来定义触点架构。更新
2. 以进行兼容。

   default.jsoncontact.model.js API测试：mongoose-type-email>使用HoppsCotch（或Postman）测试生成的REST端点（POST，GET，PUT，PUT，DELETE），以确保合适的功能。mongoose.js>

3. 前端开发：>安装必要的软件包（fomantic-ui-css，semantic-ui-react，react-router-dom，axios，react-hook-form，classnames，

   ）。 将React应用程序与组件（联络清单，联系人，联系人形式）和页面（ContactListPage，ContactFormPage）构建。使用React路由器实施导航。

4. 状态管理（上下文API）：ContactContext创建A

   来管理全局应用程序状态（联系人，加载，错误消息）。 将此上下文提供商集成到应用程序的根部组件中。

5. >数据获取：使用axios从feathersjs api异步获取触点。 使用try...catch实现错误处理，并使用自定义FlashMessage组件显示错误消息。

   >

6. 表格处理（React Hook form）：使用React Hook表单实现联系表格，处理客户端验证和错误显示。 集成表单提交以通过axios.post>。

   创建新联系人

7. 更新和删除操作：添加功能，以使用axios.patch更新现有联系人，并使用axios.delete删除联系人。 为这些动作实施相应的还原器。

8. >>部署：（未详细介绍，但暗示）一旦应用程序功能完全实用，部署到托管环境将是下一步。

>进一步的改进（建议）：

>使用环境变量用于API URL。

重构代码，以提高可读性和可维护性。
添加综合文档（注释）。
使用用户友好的消息来实现更强大的错误处理。
• >
写单元和集成测试。
考虑使用GraphQl进行更有效的数据获取。
• >
>探索Next.js用于服务器端渲染以改进SEO和性能。
• 这个精致的摘要提供了对教程的更清晰，更简洁的概述，重点介绍了所涉及的核心概念和步骤。 保留图像引用，并重写文本以提高可读性和流程。
>

以上是使用React和feathersjs构建一个node.js crud应用的详细内容。更多信息请关注PHP中文网其他相关文章！