正文

学会React，轻松实现待办事项列表与数据库无缝对接

/0 浏览量
0625

在这个数字化时代，React已经成为前端开发领域的主流框架之一。它以其高效、灵活和易于上手的特点，吸引了大量开发者。而待办事项列表（To-Do List）作为最常见的需求之一，几乎每个开发者都会在职业生涯中遇到。本文将带你学习如何使用React实现一个待办事项列表，并将其与数据库无缝对接。

一、React基础

在开始之前，我们需要确保你已经掌握了React的基本知识，包括组件、状态（state）、属性（props）等。以下是一个简单的React组件示例：

import React, { useState } from 'react';

function TodoList() {
  const [todos, setTodos] = useState([]);

  const addTodo = (todo) => {
    setTodos([...todos, todo]);
  };

  return (
    <div>
      <h1>待办事项列表</h1>
      <ul>
        {todos.map((todo, index) => (
          <li key={index}>{todo}</li>
        ))}
      </ul>
      <input type="text" placeholder="添加待办事项" onChange={(e) => addTodo(e.target.value)} />
    </div>
  );
}

export default TodoList;

二、与数据库对接

1. 选择数据库

首先，我们需要选择一个数据库来存储待办事项。这里，我们可以选择使用MongoDB，因为它是一个基于文档的数据库，非常适合存储非结构化数据。

2. 安装MongoDB

在本地安装MongoDB，并启动数据库服务。

3. 安装Node.js和MongoDB驱动

在项目中安装Node.js和MongoDB驱动，以便我们可以通过Node.js与MongoDB进行交互。

npm install express mongoose

4. 连接MongoDB

在React项目中，我们可以使用Mongoose来连接MongoDB数据库。

import mongoose from 'mongoose';

mongoose.connect('mongodb://localhost:27017/todoList', {
  useNewUrlParser: true,
  useUnifiedTopology: true,
});

5. 创建待办事项模型

接下来，我们需要创建一个待办事项模型，以便我们可以将待办事项存储到数据库中。

const todoSchema = new mongoose.Schema({
  text: String,
  completed: Boolean,
});

const Todo = mongoose.model('Todo', todoSchema);

export default Todo;

6. 修改React组件

现在，我们需要修改React组件，以便它可以与数据库进行交互。

import React, { useState, useEffect } from 'react';
import Todo from './Todo';

function TodoList() {
  const [todos, setTodos] = useState([]);

  useEffect(() => {
    fetchTodos();
  }, []);

  const fetchTodos = async () => {
    const response = await fetch('/api/todos');
    const data = await response.json();
    setTodos(data);
  };

  const addTodo = async (todo) => {
    const response = await fetch('/api/todos', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({ text: todo, completed: false }),
    });
    const newTodo = await response.json();
    setTodos([...todos, newTodo]);
  };

  return (
    <div>
      <h1>待办事项列表</h1>
      <ul>
        {todos.map((todo, index) => (
          <Todo key={index} todo={todo} />
        ))}
      </ul>
      <input type="text" placeholder="添加待办事项" onChange={(e) => addTodo(e.target.value)} />
    </div>
  );
}

export default TodoList;

7. 创建API服务器

为了使React组件能够与数据库进行交互，我们需要创建一个API服务器。这里，我们可以使用Express框架来快速搭建服务器。

import express from 'express';
import mongoose from 'mongoose';
import Todo from './Todo';

const app = express();
const port = 3000;

mongoose.connect('mongodb://localhost:27017/todoList', {
  useNewUrlParser: true,
  useUnifiedTopology: true,
});

app.use(express.json());

app.get('/api/todos', async (req, res) => {
  const todos = await Todo.find();
  res.json(todos);
});

app.post('/api/todos', async (req, res) => {
  const todo = new Todo(req.body);
  await todo.save();
  res.json(todo);
});

app.listen(port, () => {
  console.log(`Server is running on port ${port}`);
});

三、总结

通过本文的学习，你现在已经掌握了如何使用React实现一个待办事项列表，并将其与MongoDB数据库无缝对接。希望这篇文章能够帮助你更好地理解React和数据库的交互，为你的前端开发之路打下坚实的基础。

-- 展开阅读全文 --