Full Stack新手福利：2025开发教程成就全能高手

# 创建项目目录
mkdir todo-app
cd todo-app

# 创建后端目录
mkdir backend
cd backend
npm init -y

# 安装后端依赖
npm install express mongoose cors dotenv

# 创建前端目录
cd ..
npx create-react-app frontend
cd frontend

# 安装前端依赖
npm install axios react-icons

MONGO_URI=mongodb://localhost:27017/todo-app
PORT=5000

const mongoose = require('mongoose');

const TodoSchema = new mongoose.Schema({
  text: {
    type: String,
    required: true,
  },
  completed: {
    type: Boolean,
    default: false,
  },
  createdAt: {
    type: Date,
    default: Date.now,
  },
});

module.exports = mongoose.model('Todo', TodoSchema);

const express = require('express');
const router = express.Router();
const Todo = require('../models/Todo');

// 获取所有待办事项
router.get('/', async (req, res) => {
  try {
    const todos = await Todo.find().sort({ createdAt: -1 });
    res.json(todos);
  } catch (err) {
    res.status(500).json({ message: err.message });
  }
});

// 添加新的待办事项
router.post('/', async (req, res) => {
  const todo = new Todo({
    text: req.body.text,
  });

  try {
    const newTodo = await todo.save();
    res.status(201).json(newTodo);
  } catch (err) {
    res.status(400).json({ message: err.message });
  }
});

// 更新待办事项
router.patch('/:id', async (req, res) => {
  try {
    const todo = await Todo.findById(req.params.id);
    if (todo == null) {
      return res.status(404).json({ message: '无法找到待办事项' });
    }

    if (req.body.completed != null) {
      todo.completed = req.body.completed;
    }

    const updatedTodo = await todo.save();
    res.json(updatedTodo);
  } catch (err) {
    res.status(400).json({ message: err.message });
  }
});

// 删除待办事项
router.delete('/:id', async (req, res) => {
  try {
    const todo = await Todo.findById(req.params.id);
    if (todo == null) {
      return res.status(404).json({ message: '无法找到待办事项' });
    }

    await todo.remove();
    res.json({ message: '待办事项已删除' });
  } catch (err) {
    res.status(500).json({ message: err.message });
  }
});

module.exports = router;

const express = require('express');
const mongoose = require('mongoose');
const cors = require('cors');
require('dotenv').config();

const app = express();
const PORT = process.env.PORT || 5000;

// 中间件
app.use(cors());
app.use(express.json());

// 连接数据库
mongoose.connect(process.env.MONGO_URI, {
  useNewUrlParser: true,
  useUnifiedTopology: true,
});

const connection = mongoose.connection;
connection.once('open', () => {
  console.log('MongoDB数据库连接成功');
});

// 路由
const todoRouter = require('./routes/todoRoutes');
app.use('/api/todos', todoRouter);

// 启动服务器
app.listen(PORT, () => {
  console.log(`服务器运行在端口 ${PORT}`);
});

import React, { useState, useEffect } from 'react';
import axios from 'axios';
import { FaCheck, FaTrash } from 'react-icons/fa';
import './App.css';

function App() {
  const [todos, setTodos] = useState([]);
  const [inputText, setInputText] = useState('');

  // 获取待办事项列表
  useEffect(() => {
    const fetchTodos = async () => {
      try {
        const res = await axios.get('http://localhost:5000/api/todos');
        setTodos(res.data);
      } catch (err) {
        console.error(err);
      }
    };

    fetchTodos();
  }, []);

  // 添加新的待办事项
  const addTodo = async (e) => {
    e.preventDefault();
    if (inputText.trim() === '') return;

    try {
      const res = await axios.post('http://localhost:5000/api/todos', { text: inputText });
      setTodos([res.data, ...todos]);
      setInputText('');
    } catch (err) {
      console.error(err);
    }
  };

  // 更新待办事项的完成状态
  const toggleComplete = async (id, currentCompleted) => {
    try {
      await axios.patch(`http://localhost:5000/api/todos/${id}`, {
        completed: !currentCompleted,
      });
      setTodos(
        todos.map((todo) =>
          todo._id === id ? { ...todo, completed: !currentCompleted } : todo
        )
      );
    } catch (err) {
      console.error(err);
    }
  };

  // 删除待办事项
  const deleteTodo = async (id) => {
    try {
      await axios.delete(`http://localhost:5000/api/todos/${id}`);
      setTodos(todos.filter((todo) => todo._id !== id));
    } catch (err) {
      console.error(err);
    }
  };

  return (
    <div className="app-container">
      <h1>待办事项应用</h1>
      <form onSubmit={addTodo} className="todo-form">
        <input
          type="text"
          placeholder="添加新的待办事项..."
          value={inputText}
          onChange={(e) => setInputText(e.target.value)}
          className="todo-input"
        />
        <button type="submit" className="add-button">
          添加
        </button>
      </form>
      <div className="todo-list">
        {todos.map((todo) => (
          <div key={todo._id} className="todo-item">
            <span
              className={`todo-text ${todo.completed ? 'completed' : ''}`}
              onClick={() => toggleComplete(todo._id, todo.completed)}
            >
              {todo.text}
            </span>
            <div className="todo-actions">
              <button
                className="complete-button"
                onClick={() => toggleComplete(todo._id, todo.completed)}
                title={todo.completed ? '标记为未完成' : '标记为已完成'}
              >
                <FaCheck />
              </button>
              <button
                className="delete-button"
                onClick={() => deleteTodo(todo._id)}
                title="删除待办事项"
              >
                <FaTrash />
              </button>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

export default App;

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-color: #f5f5f5;
}

.app-container {
  max-width: 600px;
  margin: 0 auto;
  padding: 20px;
}

h1 {
  text-align: center;
  margin-bottom: 20px;
  color: #333;
}

.todo-form {
  display: flex;
  margin-bottom: 20px;
}

.todo-input {
  flex: 1;
  padding: 10px;
  font-size: 16px;
  border: 1px solid #ddd;
  border-radius: 4px 0 0 4px;
  outline: none;
}

.add-button {
  padding: 10px 20px;
  background-color: #4caf50;
  color: white;
  border: none;
  border-radius: 0 4px 4px 0;
  cursor: pointer;
  font-size: 16px;
  transition: background-color 0.3s;
}

.add-button:hover {
  background-color: #45a049;
}

.todo-list {
  background-color: white;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.todo-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px;
  border-bottom: 1px solid #eee;
  transition: background-color 0.3s;
}

.todo-item:last-child {
  border-bottom: none;
}

.todo-item:hover {
  background-color: #f9f9f9;
}

.todo-text {
  flex: 1;
  cursor: pointer;
  transition: color 0.3s;
}

.todo-text.completed {
  text-decoration: line-through;
  color: #888;
}

.todo-actions {
  display: flex;
  gap: 10px;
}

.complete-button,
.delete-button {
  background: none;
  border: none;
  cursor: pointer;
  padding: 5px;
  border-radius: 4px;
  transition: background-color 0.3s;
}

.complete-button:hover {
  background-color: #e8f5e8;
  color: #4caf50;
}

.delete-button:hover {
  background-color: #ffebee;
  color: #f44336;
}

# 启动后端（在backend目录下）
npm start

# 启动前端（在frontend目录下，另开一个命令行窗口）
npm start

import axios from 'axios';

// 创建axios实例
const api = axios.create({
  baseURL: 'http://localhost:5000/api',
  timeout: 10000, // 10秒超时
  headers: {
    'Content-Type': 'application/json',
  },
});

// 请求拦截器：在发送请求之前做些什么
api.interceptors.request.use(
  (config) => {
    // 可以在这里添加token等认证信息
    const token = localStorage.getItem('token');
    if (token) {
      config.headers.Authorization = `Bearer ${token}`;
    }
    console.log('发送请求:', config);
    return config;
  },
  (error) => {
    console.error('请求错误:', error);
    return Promise.reject(error);
  }
);

// 响应拦截器：对响应数据做点什么
api.interceptors.response.use(
  (response) => {
    console.log('收到响应:', response);
    return response.data; // 直接返回响应数据，而不是整个响应对象
  },
  (error) => {
    console.error('响应错误:', error);
    // 统一错误处理
    if (error.response) {
      // 服务器返回了错误状态码
      switch (error.response.status) {
        case 401:
          // 未授权，重定向到登录页面
          window.location.href = '/login';
          break;
        case 403:
          // 禁止访问，显示错误信息
          alert('您没有权限访问此资源');
          break;
        case 404:
          // 资源不存在，显示错误信息
          alert('请求的资源不存在');
          break;
        case 500:
          // 服务器错误，显示错误信息
          alert('服务器内部错误，请稍后再试');
          break;
        default:
          // 其他错误，显示错误信息
          alert(`请求失败: ${error.response.data.message || '未知错误'}`);
      }
    } else if (error.request) {
      // 请求已发送，但没有收到响应
      alert('网络错误，请检查网络连接');
    } else {
      // 请求配置出错
      alert(`请求配置错误: ${error.message}`);
    }
    return Promise.reject(error);
  }
);

// 封装API方法
export const todoAPI = {
  // 获取所有待办事项
  getAllTodos: () => api.get('/todos'),
  
  // 添加新的待办事项
  addTodo: (todoData) => api.post('/todos', todoData),
  
  // 更新待办事项
  updateTodo: (id, todoData) => api.patch(`/todos/${id}`, todoData),
  
  // 删除待办事项
  deleteTodo: (id) => api.delete(`/todos/${id}`),
};

export default api;

const express = require('express');
const mongoose = require('mongoose');
const cors = require('cors');
const bcrypt = require('bcryptjs');
const jwt = require('jsonwebtoken');
require('dotenv').config();

const app = express();
const PORT = process.env.PORT || 5000;

// 中间件
app.use(cors());
app.use(express.json());

// 连接数据库
mongoose.connect(process.env.MONGO_URI, {
  useNewUrlParser: true,
  useUnifiedTopology: true,
});

const connection = mongoose.connection;
connection.once('open', () => {
  console.log('MongoDB数据库连接成功');
});

// 用户模型
const UserSchema = new mongoose.Schema({
  username: {
    type: String,
    required: true,
    unique: true,
  },
  password: {
    type: String,
    required: true,
  },
  createdAt: {
    type: Date,
    default: Date.now,
  },
});

const User = mongoose.model('User', UserSchema);

// 待办事项模型
const TodoSchema = new mongoose.Schema({
  text: {
    type: String,
    required: true,
  },
  completed: {
    type: Boolean,
    default: false,
  },
  user: {
    type: mongoose.Schema.Types.ObjectId,
    ref: 'User',
    required: true,
  },
  createdAt: {
    type: Date,
    default: Date.now,
  },
});

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

// 身份验证中间件
const authMiddleware = (req, res, next) => {
  const token = req.header('Authorization')?.replace('Bearer ', '');
  
  if (!token) {
    return res.status(401).json({ message: '未提供身份验证令牌' });
  }
  
  try {
    const decoded = jwt.verify(token, process.env.JWT_SECRET);
    req.user = decoded;
    next();
  } catch (err) {
    res.status(401).json({ message: '无效的身份验证令牌' });
  }
};

// 注册路由
app.post('/api/auth/register', async (req, res) => {
  try {
    const { username, password } = req.body;
    
    // 检查用户是否已存在
    const userExists = await User.findOne({ username });
    if (userExists) {
      return res.status(400).json({ message: '用户名已存在' });
    }
    
    // 哈希密码
    const salt = await bcrypt.genSalt(10);
    const hashedPassword = await bcrypt.hash(password, salt);
    
    // 创建新用户
    const user = new User({
      username,
      password: hashedPassword,
    });
    
    await user.save();
    
    // 生成JWT令牌
    const token = jwt.sign({ id: user._id }, process.env.JWT_SECRET, {
      expiresIn: '1h',
    });
    
    res.status(201).json({ token, user: { id: user._id, username: user.username } });
  } catch (err) {
    res.status(500).json({ message: err.message });
  }
});

// 登录路由
app.post('/api/auth/login', async (req, res) => {
  try {
    const { username, password } = req.body;
    
    // 检查用户是否存在
    const user = await User.findOne({ username });
    if (!user) {
      return res.status(400).json({ message: '用户名或密码错误' });
    }
    
    // 验证密码
    const isMatch = await bcrypt.compare(password, user.password);
    if (!isMatch) {
      return res.status(400).json({ message: '用户名或密码错误' });
    }
    
    // 生成JWT令牌
    const token = jwt.sign({ id: user._id }, process.env.JWT_SECRET, {
      expiresIn: '1h',
    });
    
    res.json({ token, user: { id: user._id, username: user.username } });
  } catch (err) {
    res.status(500).json({ message: err.message });
  }
});

// 待办事项路由
app.get('/api/todos', authMiddleware, async (req, res) => {
  try {
    const todos = await Todo.find({ user: req.user.id }).sort({ createdAt: -1 });
    res.json(todos);
  } catch (err) {
    res.status(500).json({ message: err.message });
  }
});

app.post('/api/todos', authMiddleware, async (req, res) => {
  const todo = new Todo({
    text: req.body.text,
    user: req.user.id,
  });

  try {
    const newTodo = await todo.save();
    res.status(201).json(newTodo);
  } catch (err) {
    res.status(400).json({ message: err.message });
  }
});

app.patch('/api/todos/:id', authMiddleware, async (req, res) => {
  try {
    const todo = await Todo.findOne({ _id: req.params.id, user: req.user.id });
    if (todo == null) {
      return res.status(404).json({ message: '无法找到待办事项' });
    }

    if (req.body.completed != null) {
      todo.completed = req.body.completed;
    }

    if (req.body.text != null) {
      todo.text = req.body.text;
    }

    const updatedTodo = await todo.save();
    res.json(updatedTodo);
  } catch (err) {
    res.status(400).json({ message: err.message });
  }
});

app.delete('/api/todos/:id', authMiddleware, async (req, res) => {
  try {
    const todo = await Todo.findOne({ _id: req.params.id, user: req.user.id });
    if (todo == null) {
      return res.status(404).json({ message: '无法找到待办事项' });
    }

    await todo.remove();
    res.json({ message: '待办事项已删除' });
  } catch (err) {
    res.status(500).json({ message: err.message });
  }
});

// 错误处理中间件
app.use((err, req, res, next) => {
  console.error(err.stack);
  res.status(500).json({ message: '服务器内部错误' });
});

// 启动服务器
app.listen(PORT, () => {
  console.log(`服务器运行在端口 ${PORT}`);
});

import React, { useState, useEffect, useCallback } from 'react';
import { todoAPI } from './api';
import { FaCheck, FaTrash, FaEdit, FaSave, FaCancel } from 'react-icons/fa';
import './TodoList.css';

function TodoList() {
  const [todos, setTodos] = useState([]);
  const [inputText, setInputText] = useState('');
  const [editingId, setEditingId] = useState(null);
  const [editingText, setEditingText] = useState('');
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState(null);

  // 获取待办事项列表
  const fetchTodos = useCallback(async () => {
    setLoading(true);
    setError(null);
    try {
      const data = await todoAPI.getAllTodos();
      setTodos(data);
    } catch (err) {
      setError('获取待办事项失败');
      console.error(err);
    } finally {
      setLoading(false);
    }
  }, []);

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

  // 添加新的待办事项
  const addTodo = async (e) => {
    e.preventDefault();
    if (inputText.trim() === '') return;

    setLoading(true);
    setError(null);
    try {
      const newTodo = await todoAPI.addTodo({ text: inputText });
      setTodos([newTodo, ...todos]);
      setInputText('');
    } catch (err) {
      setError('添加待办事项失败');
      console.error(err);
    } finally {
      setLoading(false);
    }
  };

  // 更新待办事项的完成状态
  const toggleComplete = async (id, currentCompleted) => {
    setLoading(true);
    setError(null);
    try {
      const updatedTodo = await todoAPI.updateTodo(id, {
        completed: !currentCompleted,
      });
      setTodos(
        todos.map((todo) =>
          todo._id === id ? updatedTodo : todo
        )
      );
    } catch (err) {
      setError('更新待办事项失败');
      console.error(err);
    } finally {
      setLoading(false);
    }
  };

  // 开始编辑待办事项
  const startEditing = (todo) => {
    setEditingId(todo._id);
    setEditingText(todo.text);
  };

  // 保存编辑后的待办事项
  const saveEdit = async (id) => {
    if (editingText.trim() === '') return;

    setLoading(true);
    setError(null);
    try {
      const updatedTodo = await todoAPI.updateTodo(id, {
        text: editingText,
      });
      setTodos(
        todos.map((todo) =>
          todo._id === id ? updatedTodo : todo
        )
      );
      setEditingId(null);
      setEditingText('');
    } catch (err) {
      setError('保存待办事项失败');
      console.error(err);
    } finally {
      setLoading(false);
    }
  };

  // 取消编辑
  const cancelEdit = () => {
    setEditingId(null);
    setEditingText('');
  };

  // 删除待办事项
  const deleteTodo = async (id) => {
    if (!window.confirm('确定要删除这个待办事项吗？')) return;

    setLoading(true);
    setError(null);
    try {
      await todoAPI.deleteTodo(id);
      setTodos(todos.filter((todo) => todo._id !== id));
    } catch (err) {
      setError('删除待办事项失败');
      console.error(err);
    } finally {
      setLoading(false);
    }
  };

  return (
    <div className="todo-list-container">
      <h2>我的待办事项</h2>
      
      {error && (
        <div className="error-message">
          {error}
          <button onClick={fetchTodos}>重试</button>
        </div>
      )}
      
      <form onSubmit={addTodo} className="todo-form">
        <input
          type="text"
          placeholder="添加新的待办事项..."
          value={inputText}
          onChange={(e) => setInputText(e.target.value)}
          className="todo-input"
          disabled={loading}
        />
        <button type="submit" className="add-button" disabled={loading}>
          添加
        </button>
      </form>
      
      {loading && todos.length === 0 ? (
        <div className="loading-message">加载中...</div>
      ) : todos.length === 0 ? (
        <div className="empty-message">暂无待办事项，添加一个吧！</div>
      ) : (
        <div className="todo-items">
          {todos.map((todo) => (
            <div key={todo._id} className="todo-item">
              {editingId === todo._id ? (
                <div className="todo-edit">
                  <input
                    type="text"
                    value={editingText}
                    onChange={(e) => setEditingText(e.target.value)}
                    className="edit-input"
                    autoFocus
                  />
                  <div className="edit-actions">
                    <button
                      className="save-button"
                      onClick={() => saveEdit(todo._id)}
                      disabled={loading}
                    >
                      <FaSave />
                    </button>
                    <button
                      className="cancel-button"
                      onClick={cancelEdit}
                      disabled={loading}
                    >
                      <FaCancel />
                    </button>
                  </div>
                </div>
              ) : (
                <>
                  <span
                    className={`todo-text ${todo.completed ? 'completed' : ''}`}
                    onClick={() => toggleComplete(todo._id, todo.completed)}
                  >
                    {todo.text}
                  </span>
                  <div className="todo-actions">
                    <button
                      className="complete-button"
                      onClick={() => toggleComplete(todo._id, todo.completed)}
                      title={todo.completed ? '标记为未完成' : '标记为已完成'}
                      disabled={loading}
                    >
                      <FaCheck />
                    </button>
                    <button
                      className="edit-button"
                      onClick={() => startEditing(todo)}
                      title="编辑待办事项"
                      disabled={loading}
                    >
                      <FaEdit />
                    </button>
                    <button
                      className="delete-button"
                      onClick={() => deleteTodo(todo._id)}
                      title="删除待办事项"
                      disabled={loading}
                    >
                      <FaTrash />
                    </button>
                  </div>
                </>
              )}
            </div>
          ))}
        </div>
      )}
    </div>
  );
}

export default TodoList;

npm install bcryptjs jsonwebtoken