Проектирование архитектуры приложения

2.1 Общая архитектура

На этом этапе мы спроектируем архитектуру приложения для управления задачами. Мы определим, как будут взаимодействовать фронтенд, бекенд и база данных, а также какие компоненты будут включены в каждый из них.

Приложение будет состоять из трех основных компонентов:

• Frontend (ReactJS): клиентская часть, обеспечивающая взаимодействие пользователя с системой.
• Backend (Flask): серверная часть, обрабатывающая запросы от фронтенда и взаимодействующая с базой данных.
• Database (PostgreSQL): хранилище данных для пользователей и задач.

Архитектура будет выглядеть следующим образом:

+-------------+       +-------------+       +--------------+
|             |       |             |       |              |
|  Frontend   +------->+   Backend   +------->+   Database |
|  (ReactJS)  |       |   (Flask)   |       | (PostgreSQL) |
|             |       |             |       |              |
+-------------+       +-------------+       +--------------+

Взаимодействие между компонентами

• Frontend: отправляет HTTP-запросы к бекенду для выполнения CRUD операций (создание, чтение, обновление, удаление задач).
• Backend: обрабатывает HTTP-запросы от фронтенда, выполняет бизнес-логику и взаимодействует с базой данных.
• Database: сохраняет и предоставляет данные по запросам от бекенда.

2.2 Описание каждого компонента

1. Frontend (ReactJS):

• Компоненты интерфейса: компоненты для регистрации и авторизации пользователей, создания и редактирования задач, просмотра списка задач.
• Взаимодействие с API: использование библиотеки Axios для отправки HTTP-запросов к бекенду.

2. Backend (Flask):

• REST API: реализация эндпоинтов для управления пользователями и задачами.
• Модели данных: определение моделей данных для пользователей и задач с использованием SQLAlchemy.
• Бизнес-логика: обработка логики приложения, включая валидацию данных и управление сессиями пользователей.

3. Database (PostgreSQL):

• Таблицы: таблицы для хранения информации о пользователях и задачах.
• Связи между таблицами: определение связей между таблицами пользователей и задач (например, один пользователь может иметь много задач).

4. Сетевое взаимодействие

Вся коммуникация между компонентами будет происходить через HTTP-протокол. Фронтенд будет взаимодействовать с бекендом через REST API, а бекенд — с базой данных через SQL-запросы.

• Frontend: порт 3000 для разработки и тестирования.
• Backend: порт 5000 для взаимодействия с фронтендом.
• Database: порт 5432 для взаимодействия с бекендом.

2.3 Детальное описание каждого компонента

1. Базовая структура данных

Для хранения данных о пользователях и задачах в базе данных PostgreSQL создадим две таблицы: users и tasks.

Таблица users:

• id (int, primary key): уникальный идентификатор пользователя.
• username (varchar, unique): имя пользователя.
• password (varchar): хэш пароля пользователя.

Таблица tasks:

• id (int, primary key): уникальный идентификатор задачи.
• title (varchar): заголовок задачи.
• description (text): описание задачи.
• owner_id (int, foreign key): идентификатор пользователя, которому назначена задача.
• status (varchar): статус задачи (например, выполнена/невыполнена).

2. API дизайн

Бекенд будет предоставлять RESTful API для взаимодействия с фронтендом. Примерный список эндпоинтов:

• Пользователи:
  • POST /users: создание нового пользователя.
  • GET /users: получение списка всех пользователей.
  • GET /users/:id: получение информации о конкретном пользователе.
  • PUT /users/:id: обновление информации о пользователе.
  • DELETE /users/:id: удаление пользователя.
• Задачи:
  • POST /tasks: создание новой задачи.
  • GET /tasks: получение списка всех задач.
  • GET /tasks/:id: получение информации о конкретной задаче.
  • PUT /tasks/:id: обновление информации о задаче.
  • DELETE /tasks/:id: удаление задачи.

2.4 Модели данных

Вот так будет выглядеть код на Python для работы с таблицами базы данных:

User Model:

from app import db

class User(db.Model):
    id = db.Column(db.Integer, primary_key=True)
    username = db.Column(db.String(80), unique=True, nullable=False)
    password = db.Column(db.String(120), nullable=False)
    tasks = db.relationship('Task', backref='owner', lazy=True)
    def to_dict(self):
        return {
            "id": self.id,
            "username": self.username
        }

Task Model:

from app import db

class Task(db.Model):
    id = db.Column(db.Integer, primary_key=True)
    title = db.Column(db.String(120), nullable=False)
    description = db.Column(db.Text, nullable=True)
    owner_id = db.Column(db.Integer, db.ForeignKey('user.id'), nullable=False)
    status = db.Column(db.String(20), nullable=False, default="невыполнена")
    def to_dict(self):
        return {
            "id": self.id,
            "title": self.title,
            "description": self.description,
            "owner_id": self.owner_id,
            "status": self.status
        }

2.5 Маршруты и контроллеры

Пример реализации API на стороне сервера:

from app import app, db
from app.models import Task, User
from flask import request, jsonify

@app.route('/tasks', methods=['GET'])
def get_tasks():
    tasks = Task.query.all()
    return jsonify([task.to_dict() for task in tasks])

@app.route('/tasks', methods=['POST'])
def create_task():
    data = request.get_json()
    new_task = Task(
        title=data['title'],
        description=data.get('description'),
        owner_id=data['owner_id'],
        status=data.get('status', "невыполнена")
    )
    db.session.add(new_task)
    db.session.commit()
    return jsonify(new_task.to_dict()), 201

@app.route('/tasks/<int:id>', methods=['GET'])
def get_task(id):
    task = Task.query.get_or_404(id)
    return jsonify(task.to_dict())

@app.route('/tasks/<int:id>', methods=['PUT'])
def update_task(id):
    data = request.get_json()
    task = Task.query.get_or_404(id)
    task.title = data['title']
    task.description = data.get('description')
    task.status = data.get('status', task.status)
    task.owner_id = data['owner_id']
    db.session.commit()
    return jsonify(task.to_dict())

@app.route('/tasks/<int:id>', methods=['DELETE'])
def delete_task(id):
    task = Task.query.get_or_404(id)
    db.session.delete(task)
    db.session.commit()
    return '', 204

2.6 Пример обращения к серверу со стороны фронтенда

Пример компонента React для отображения списка задач:

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

const TaskList = () => {
  const [tasks, setTasks] = useState([]);

  useEffect(() => {
    axios.get('http://localhost:5000/tasks')
      .then(response => {
        setTasks(response.data);
      })
      .catch(error => {
        console.error('There was an error fetching the tasks!', error);
      });
  }, []);

  return (
    <div>
      <h1>Task List</h1>
      <ul>
        {tasks.map(task => (
          <li key={task.id}>{task.title} - {task.status}</li>
        ))}
      </ul>
    </div>
  );
};

export default TaskList;

3

Задача

Модуль 2: Fullstack, 18 уровень, 1 лекция

Недоступна

Создание моделей данных

Создание моделей данных

Открыть

3

Задача

Модуль 2: Fullstack, 18 уровень, 1 лекция

Недоступна

Реализация CRUD API для задач

Реализация CRUD API для задач

Открыть