React + 后端 - 共享代码时的项目结构

在开发Web应用程序时，前后端的分离是一种常见的做法。前端负责处理用户界面和用户交互，而后端负责处理数据的存储和逻辑处理。在这种情况下，如何在前后端之间共享代码是一个重要的问题。在本文中，我们将探讨使用React和后端共享代码时的项目结构，并提供一些案例代码。

- frontend
  - src
    - components
      - Header.js
      - Footer.js
    - pages
      - Home.js
      - About.js
    - utils
      - api.js
  - package.json
- backend
  - src
    - controllers
      - UserController.js
      - ProductController.js
    - models
      - User.js
      - Product.js
    - routes
      - userRoutes.js
      - productRoutes.js
  - package.json

javascript
// backend/src/controllers/UserController.js
class UserController {
  async login(req, res) {
    // 处理用户登录逻辑
  }
  async getProducts(req, res) {
    // 获取商品列表
  }
}
module.exports = new UserController();

javascript
// backend/src/routes/userRoutes.js
const express = require('express');
const UserController = require('../controllers/UserController');
const router = express.Router();
router.post('/login', UserController.login);
router.get('/products', UserController.getProducts);
module.exports = router;

javascript
// frontend/src/pages/Login.js
import React, { useState } from 'react';
import { login } from '../utils/api';
const Login = () => {
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');
  const handleLogin = async () => {
    await login(username, password);
    // 处理登录成功后的逻辑
  };
  return (
    
       setUsername(e.target.value)} />
       setPassword(e.target.value)} />
      登录
    
  );
};
export default Login;

javascript
// frontend/src/pages/Products.js
import React, { useEffect, useState } from 'react';
import { getProducts } from '../utils/api';
const Products = () => {
  const [products, setProducts] = useState([]);
  useEffect(() => {
    const fetchProducts = async () => {
      const data = await getProducts();
      setProducts(data);
    };
    fetchProducts();
  }, []);
  return (
    
      {products.map((product) => (
        
{product.name}
      ))}
    
  );
};
export default Products;

javascript
// frontend/src/utils/api.js
export const login = async (username, password) => {
  // 发送登录请求给后端
};
export const getProducts = async () => {
  // 发送获取商品列表请求给后端
};