使用 Mern 开发约会应用简介先决条件概述

2025-05-25

与 Mern 一起开发约会应用程序

介绍

先决条件

概述

介绍

我们将使用 MERN 技术栈构建一个约会应用；该 Web 应用功能简单（见下方完成版的截图）；所有数据均来自 MongoDB 数据库，并使用 Node.js 设置 API 端点。 在本文中，我们将使用 React.js 构建约会应用的前端。
覆盖

React.js 是一个用于构建用户界面的流行 JavaScript 库。它快速高效，可用于构建复杂且响应迅速的用户界面。
对于后端，我们将专注于使用 Node.js 进行构建。我们将使用 MongoDB 存储用户和消息，使用 Express 构建 API，使用 ReactJs 构建 Web 应用，并使用 Socket.IO 实现用户之间的实时通信。

在下一节中，我们将介绍本教程的一些先决条件。

先决条件

完成本教程需要满足以下条件：

在下一节中，我们将讨论我们将要使用的技术。

概述

让我们从 React 的前端开始，然后转到后端。
在终端中创建一个 dating-app-mern 文件夹。在其中使用以下命令：
要创建一个名为 dating-app-frontend 的新应用，请使用create-react-app。执行此操作的命令如下：



cd dating-app-mern
npx create-react-app dating-app-frontend
Enter fullscreen mode Exit fullscreen mode

React 基本设置

返回 React 项目并导航到目录 dating-app-frontend。npm start 将启动 React 应用程序。



cd dating-app-frontend
npm start
Enter fullscreen mode Exit fullscreen mode

接下来，删除不再需要的所有文件。

佩雷斯

创建标题组件

让我们从制作一个标题组件开始。你必须先安装 Material，因为它会提供我们需要使用的图标。



npm i @material-ui/core @material-ui/icons
Enter fullscreen mode Exit fullscreen mode

接下来，在 src 文件夹中创建一个 components 文件夹。在 components 文件夹中，创建两个文件：Header.jsx 和 Header.CSS。header.js 中有两个图标：一个人物图标和一个论坛图标。
以下是 Header.jsx 文件的内容。

第2条
在 App.js 文件中包含 Header 组件
第3条

header.css 文件包含以下信息：

CSS

创建约会卡片组件

让我们开始创建第二个组件。在 components 文件夹中，创建两个文件：DatingCards.js 和 DatingCards.css。然后在 App.js 文件中引入 DatingCards 组件。
在继续操作之前，必须先安装 react-tinder-card 包。该包包含一个生成滑动效果的功能。



npm i react-tinder-card
Enter fullscreen mode Exit fullscreen mode

之后，将内容粘贴到 DatingCards.js 中。将四个人的姓名和图像存储在 people 状态变量中。导入 DatingCard 并将其用作组件。
这里使用了 react-tinder-card 文档中提到的 props。swiped
和 outOfFrame 函数是必需的。使用 imgUrl 作为背景图片，并在循环遍历每个人时在 h3 标签中显示姓名。

约会1

约会2

创建滑动按钮组件

现在让我们创建 Swipe 组件，即页脚按钮。
这些按钮是应用设计的补充。由于这是一个简单的应用，它们不会起作用。
在 components 文件夹中，创建两个文件：Swipe.jsx 和 Swipe.css。它们也必须包含在 App.js 文件中。

Swiper.jsx包含内容。

约会

下一步是设置按钮的样式，下面提供了执行此操作的代码。

约会2

我们已经完成了前端部分。

初始后端设置

让我们开始后端的 Node.js 代码。创建一个新文件夹并将其命名为 API。

然后，在终端中输入npm init -y创建 package.json 文件。

之后，您必须安装两个软件包才能继续。使用终端在 API 文件夹中安装 Express 和 Mongoose。



npm i express mongoose
Enter fullscreen mode Exit fullscreen mode

之后，启动 MongoDB 并将链接复制到我们的项目。

在继续操作之前，请在 API 文件夹中安装 nodemon。对 index.js 文件中的代码进行任何更改都会导致 Node 服务器立即重启。



npm i nodemon
Enter fullscreen mode Exit fullscreen mode

初始路线设置

让我们从第一个路由开始，它检查一切是否正常。Node.js Express 包允许您创建路由，这也是大多数互联网的工作方式。大多数后端语言（例如 Node.js 和 Java）都提供了创建与数据库交互的路由的功能。第一个路由不与数据库交互，当通过 GET 请求访问时，它只会返回一个文本。

在 API 文件夹中，创建一个 index.js 文件。首先，导入 Express 和 Mongoose 包。然后，使用 Express 创建一个将在端口 5001 上运行的端口变量。



const express = require('express');
const mongoose = require('express');
//App Config
const app = express()
const port = process.env.PORT || 5001
//Middleware
//DB Config
//API Endpoints

//Listener
app.listen(port, () => console.log(`Listening on localhost: ${port}`))
Enter fullscreen mode Exit fullscreen mode

数据库用户和网络访问

您必须在 MongoDB 中创建数据库用户并授予网络访问权限。

数据库

MongoDB 模式和路由

MongoDB 采用 JSON 格式存储数据，而非 Oracle 等传统数据库所采用的传统表结构。您需要创建 MongoDB 所需的模式文件。该文件描述了 MongoDB 中字段的存储方式。
在此上下文中，卡片被视为集合名称，而数据库中则存储一个值，例如 cardSchema。它由一个命名对象和 imgUrl 键组成。这些是 MongoDB 中使用的名称。创建一个包含以下内容的 Cards.js 文件。

数据库1

现在，您将使用该架构来创建将数据添加到数据库的端点。
这里遵循 MVC 模式；它是 Web 应用程序的传统流程。

然后，使用 POST 请求将用户的任何数据发送到数据库。可以使用任何端点。如果您在 Dev.to 上撰写了一篇文章，然后点击 POST 按钮，则一旦发出 POST 请求，您的文章就会保存到 Dev.to 数据库中。GET
端点会检索所有数据库数据。同样，可以指定任何端点。例如，当您浏览 Dev.to 中的帖子时，会向该端点发送 GET 请求，该端点会从 Dev.to 数据库中检索所有帖子。

在 routes 文件夹中，创建一个名为 routes 的文件夹。创建一个名为 Card.js 的文件。在 Card.js 中创建一个指向 /dating/cards 端点的 POST 请求。请求内容通过 req.body 发送到 MongoDB。然后使用 create() 发送 dbCard。如果成功，则会分配状态码 201；否则，则会分配状态码 500。新内容以粗体突出显示。
要从数据库获取数据，请创建一个指向 /dating/cards 的 GET 端点。
此处使用 find() 并获取成功代码 200（否则，状态码为 500）。

路由器

从图中可以看出，我使用了路由器。将其连接到索引中，使生活更轻松。js
让我们使用邮递员应用程序来检查路线。

在继续 POST 请求之前，您必须先完成两个任务。
首先，启用 CORS；否则，在部署应用时，您将遇到跨域错误。

通过打开终端安装 CORS。



npm i cors
Enter fullscreen mode Exit fullscreen mode

将 CORS 导入 index.js 并通过 app.use() 使用它。您还必须包含 express.json() 中间件。它是必需的，因为它需要解析从 MongoDB 传入的 JSON 对象才能读取正文。

指数

将后端和前端整合在一起

让我们连接后端和前端。要从前端调用，请使用 Axios 包。Axios 是一个 JavaScript 库，它将 API 请求发送到 REST 端点。您刚刚向后端添加了两个端点。访问它们需要 Axios。打开并安装客户端。



npm i Axios
Enter fullscreen mode Exit fullscreen mode

然后，创建一个新的axios.js文件和一个Axios实例。http://localhost:5001是URL。



import axios from 'axios'
const instance = axios.create({
 URL: "http://localhost:5001"
})
export default instance
Enter fullscreen mode Exit fullscreen mode

从 DatingCards.js 中删除用户状态中的硬编码信息。然后导入本地 axios 并通过 useEffect 钩子调用 /dating/cards 端点。收到数据后，使用 setPeople() 函数重置数据。




import React, { useState, useEffect } from 'react'
import DatingCard from 'react-tinder-card'
import './DatingCards.css'
import axios from './axios'
const DatingCards = () => {
 const [people, setPeople] = useState([])
 useEffect(() => {
 async function fetchData() {
 const req = await axios.get("/dating/cards")
 setPeople(req.data)
 }
 fetchData()
 }, [])
 const swiped = (direction, nameToDelete) => {
 console.log("receiving " + nameToDelete)
 }
Enter fullscreen mode Exit fullscreen mode

结尾

我们完成了约会应用项目，希望你喜欢它并学到很多东西。
在下一篇文章中，我们将讨论如何在 Heroku 上部署该应用。

文章来源：https://dev.to/collins87mbathi/building-a-dating-app-with-mern-478h
Devto 翻译
PREV
useReducer ReactJS hook 的 2 个用例
NEXT
最喜欢的前端/UI 开发人员面试问题？