Python | Django | React | Todo webアプリの作成方法

$ pip install pipenv

$ mkdir backend
$ cd backend

$ pipenv install django djangorestframework

$ pipenv shell

$ django-admin startproject todoproject .

$ python manage.py startapp api

backend
    ├─api
    │  └─migrations
    └─todoproject

INSTALLED_APPS = [
    ...
    'rest_framework',
    'api',
]

from django.db import models

class Todo(models.Model):
    title = models.CharField(max_length=100)
    completed = models.BooleanField(default=False)
    attachment = models.FileField(upload_to='uploads/', blank=True, null=True)  # Optional file attachment

    def __str__(self):
        return self.title

$ python manage.py makemigrations

$ python manage.py migrate

from rest_framework import serializers
from .models import Todo

class TodoSerializer(serializers.ModelSerializer):
    class Meta:
        model = Todo
        fields = ['id', 'title', 'completed', 'attachment']  # Include necessary fields

from rest_framework import viewsets
from .models import Todo
from .serializers import TodoSerializer

class TodoViewSet(viewsets.ModelViewSet):
    queryset = Todo.objects.all()
    serializer_class = TodoSerializer

from django.urls import path, include
from rest_framework.routers import DefaultRouter
from .views import TodoViewSet

router = DefaultRouter()
router.register('todos', TodoViewSet, basename='todo')

urlpatterns = [
    path('', include(router.urls)),
]

from django.contrib import admin
from django.urls import path, include
from django.conf import settings
from django.conf.urls.static import static

urlpatterns = [
    path('admin/', admin.site.urls),
    path('api/', include('api.urls')),
]

if settings.DEBUG:
    urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

import os
...

MEDIA_URL = '/media/'
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')

$ python manage.py runserver


# 以下メッセージが出力
Watching for file changes with StatReloader
Performing system checks...

System check identified no issues (0 silenced).
October 03, 2024 - 13:57:44
Django version 5.1.1, using settings 'todoproject.settings'
Starting development server at http://127.0.0.1:8000/
Quit the server with CTRL-BREAK.

$ pipenv install django-cors-headers

INSTALLED_APPS = [
    ...,
    'corsheaders',
]

MIDDLEWARE = [
    ...,
    'corsheaders.middleware.CorsMiddleware',
]

CORS_ALLOWED_ORIGINS = [
    'http://localhost:3000',
]

$ npx create-react-app frontend

$ cd frontend

$ npm start

^C^Cバッチ ジョブを終了しますか (Y/N)? y

$ npm install axios


# 上記コマンドにより出力するメッセージ
added 3 packages, and audited 1546 packages in 3s

262 packages are looking for funding
  run `npm fund` for details

8 vulnerabilities (2 moderate, 6 high)

To address all issues (including breaking changes), run:
  npm audit fix --force

Run `npm audit` for details.

import React, { useState, useEffect } from 'react';
import axios from 'axios';
import TodoForm from './TodoForm';
import TodoItem from './TodoItem';

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

  useEffect(() => {
    async function fetchTodos() {
      const response = await axios.get('http://127.0.0.1:8000/api/todos/');
      setTodos(response.data);
    }
    fetchTodos();
  }, []);

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

  const toggleTodoCompletion = async (id, completed) => {
    await axios.patch(`http://127.0.0.1:8000/api/todos/${id}/`, { completed });
    setTodos(todos.map(todo => todo.id === id ? { ...todo, completed } : todo));
  };

  const incompleteTodos = todos.filter(todo => !todo.completed);
  const completedTodos = todos.filter(todo => todo.completed);

  return (
    <div className="App">
      <h1>Todo List</h1>
      <TodoForm addTodo={addTodo} />
      
      <h2>Existing Todos</h2>
      <ul>
        {incompleteTodos.map(todo => (
          <TodoItem key={todo.id} todo={todo} toggleTodoCompletion={toggleTodoCompletion} />
        ))}
      </ul>

      <h2>Completed Todos</h2>
      <ul>
        {completedTodos.map(todo => (
          <TodoItem key={todo.id} todo={todo} toggleTodoCompletion={toggleTodoCompletion} />
        ))}
      </ul>
    </div>
  );
}

export default App;

import React from 'react';

function TodoItem({ todo, toggleTodoCompletion }) {
  return (
    <li>
      <input
        type="checkbox"
        checked={todo.completed}
        onChange={() => toggleTodoCompletion(todo.id, !todo.completed)}
      />
      <span style={{ display: 'inline-flex', gap: '10px' }}>
        <strong>{todo.title}</strong>
        {todo.attachment && (
          <a href={todo.attachment} target="_blank" rel="noopener noreferrer">
            View Attachment
          </a>
        )}
      </span>
    </li>
  );
}

export default TodoItem;

import React, { useState } from 'react';
import axios from 'axios';

function TodoForm({ addTodo }) {
  const [title, setTitle] = useState('');
  const [file, setFile] = useState(null);

  const handleSubmit = async (e) => {
    e.preventDefault();
    const formData = new FormData();
    formData.append('title', title);
    formData.append('completed', false);
    if (file) formData.append('attachment', file);

    const response = await axios.post('http://127.0.0.1:8000/api/todos/', formData, {
      headers: { 'Content-Type': 'multipart/form-data' }
    });
    addTodo(response.data);
    setTitle('');  // Clear the title field after posting
    setFile(null);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        value={title}
        onChange={(e) => setTitle(e.target.value)}
        placeholder="New Todo"
        required
      />
      <input
        type="file"
        onChange={(e) => setFile(e.target.files[0])}
      />
      <button type="submit">Add Todo</button>
    </form>
  );
}

export default TodoForm;

$ npm start