Установка nodejs

Чтобы работать с vue, ставим себе node.js сначала. Идем на сайт https://nodejs.org/en

если вы на своем домашнем компе, то тыкаете просто и ставите

если вы работаете в политехе, то надо скачать zip архив

потом его разархивировать в папку пользователя например

и затем прописать в переменных среды пользователя

теперь если запустить консольку и написать node увидим что-то такое:

Создаем vue проект

Идем по адресу https://vuejs.org/guide/quick-start.html

и копируем оттуда команду

npm create vue@latest

и запускаем ее в коносльку нашего проекта

немного ждем, он начнет задавать вопросы отвечаем вот так:

после завершения ответов увидим, что у нас появилась новая папочка client

теперь надо поставить все пакеты необходимые для работы клиента, для этого переходим в папку client и запускаем команду npm install

чтобы запустить сервер запускаем команду npm run dev

теперь удаляем все лишние из файлика App.vue, должно остаться только вот это

удаляем содержимое папки components

очищаем роуты

удаляем counters

удаляем содержимое assets

и удаляем ссылку в main.js

Работа с реактивными переменными

Чтобы вывести значение переменной надо написать:

можно сразу чего-нибудь считать

если хочется связать переменны с полями для ввода, надо объявлять их используя ref, а привязывать к полю для ввода через v-model

можно привязать реакцию на клик, для этого надо использовать атрибут @click

обратите внимание, что для того, чтобы менять значение переменной надо использовать свойство value, и чтобы вытащить значение в переменной, также надо использовать value

вы можете сделать динамическую переменную через конструкцию computed, она будет автоматом пересчитываться при изменении переменных внутри

Работа с массивами

чтобы вывести массив, объявите его обернув в ref, а затем выведите через v-for

если у вас в массиве словарики, вытаскиваете значения через точечку

вы можете начать выводить названия групп, если заведете отдельный словарик с группами

Выводим список с бекенда

чтобы делать запросы к бэкенду поставим библиотечку axios, пишем команду

npm install axios

теперь сделаем себе кнопку загрузки

и загоним в нее код по загрузки данных сервера

чтобы он не ругался на axios добавьте себе вверху

import axios from "axios"

чтобы vue понимал, что запрос надо отправлять на сервер бэкенда, надо настроить прокси, для этого идем файлик vite.config.js и пишем туда:

теперь добавим себе переменную под студентов подключим ее к результату запросов

чтобы вывести студентов можно написать вот так

<div v-for="item in students">
    {{ item.fio }}
</div>

чтобы список студентов загружался сразу при старте приложения можно использовать хук onBeforeMount

надо только не забыть вынести код который стягивает студентов в отдельную функцию.

Подключение bootstrap

Чтобы подключить bootstrap выполните команду

npm install bootstrap

и подключите его в main.js

Добавление записи

Прежде чем начать работать с методами изменения/удаления объектов в БД надо сначал поставить себе пакет для работы с cookie

npm install js-cookie

и затем добавить в App.vue себе

<script setup>
import { onBeforeMount } from 'vue';
import axios from 'axios';
import Cookies from 'js-cookie';

onBeforeMount(() => {
  axios.defaults.headers.common['X-CSRFToken'] = Cookies.get("csrftoken");
})
    
// ...
</script>

Чтобы сделать форму добавления. Сделайте себе переменную под новый объект:

const studentToAdd = ref({});

сделайте форму и подключите ее к этой переменной, типа так

<!-- ТУТ ПОДКЛЮЧИЛ обработчик отправки формы -->
<form @submit.prevent.stop="onStudentAdd">
  <div class="row">
    <div class="col">
      <div class="form-floating">
        <!-- ТУТ ПОДКЛЮЧИЛ studentToAdd.name -->
        <input
          type="text"
          class="form-control"
          v-model="studentToAdd.name"
          required
        />
        <label for="floatingInput">Фио</label>
      </div>
    </div>
    <div class="col-auto">
        <!-- А ТУТ ПОДКЛЮЧИЛ К select -->
      <div class="form-floating">
        <select class="form-select" v-model="studentToAdd.group" required>
          <option :value="g.id" v-for="g in groups">{{ g.name }}</option>
        </select>
        <label for="floatingInput">Группа</label>
      </div>
    </div>
    <div class="col-auto">
      <button class="btn btn-primary">
        Добавить
      </button>
    </div>
  </div>
</form>

и сделайте функцию обработки отправки формы

async function onStudentAdd() {
  await axios.post("/api/students/", {
    ...studentToAdd.value,
  });
  await fetchStudents(); // переподтягиваю
}

не забывайте переподтягивать список после добавления записи

Удаление записи

Для удаления добавьте кнопку удаления к каждой строке студента и пробросьте информацию о нажатой строке в функцию которая вызывается по клику

<div v-for="item in students" class="student-item">
  <div>{{ item.name }}</div>
  <button class="btn btn-danger" @click="onRemoveClick(item)">
    <i class="bi bi-x"></i>
  </button>
</div>

обработчик соответственно должен вызывать метод delete через axios

async function onRemoveClick(student) {
  await axios.delete(`/api/students/${student.id}/`);
  await fetchStudents(); // переподтягиваю
}

не забывайте переподтягивать список после удаления записи

Редактирование записи

Для редактирования также надо сделать переменную в которую вы будете хранить изменённое состояние строки

const studentToEdit = ref({});

добавьте в main.js скрипты bootstrap

добавьте разметку модального окна, в котором будут привязаны поля для редактирования студента

<div class="modal fade" id="editStudentModal" tabindex="-1">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h1 class="modal-title fs-5" id="exampleModalLabel">
            редактировать
          </h1>
          <button
            type="button"
            class="btn-close"
            data-bs-dismiss="modal"
            aria-label="Close"
          ></button>
        </div>
        <div class="modal-body">
          <div class="row">
            <div class="col">
              <div class="form-floating">
                <input
                  type="text"
                  class="form-control"
                  v-model="studentToEdit.name"
                />
                <label for="floatingInput">Фио</label>
              </div>
            </div>
            <div class="col-auto">
              <div class="form-floating">
                <select class="form-select" v-model="studentToEdit.group">
                  <option :value="g.id" v-for="g in groups">
                    {{ g.name }}
                  </option>
                </select>
                <label for="floatingInput">Группа</label>
              </div>
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <button
            type="button"
            class="btn btn-secondary"
            data-bs-dismiss="modal"
          >
            Close
          </button>
          <button
            data-bs-dismiss="modal"
            type="button"
            class="btn btn-primary"
            @click="onUpdateStudent"
          >
            Сохранить
          </button>
        </div>
      </div>
    </div>
</div>

добавить кнопку редактирования которая будет открывать окно и за одно с помощью функции onStudentEditClick фиксировать в переменную studentToEdit информацию о студенте, на которого кликнули

<div v-for="item in students" class="student-item">
  <div>{{ item.name }}</div>
  <div>{{ groupsById[item.group]?.name }}</div>
  <button
    class="btn btn-success"
    @click="onStudentEditClick(item)"
    data-bs-toggle="modal"
    data-bs-target="#editStudentModal"
  >
    <i class="bi bi-pen-fill"></i>
  </button>
  <button class="btn btn-danger" @click="onRemoveClick(item)">
    <i class="bi bi-x"></i>
  </button>
</div>

типа так:

async function onStudentEditClick(student) {
  studentToEdit.value = { ...student };
}

ну и напоследок кнопка сохранить в модальном окне должна вызывать еще одну функцию которая собственно отправит запрос на сервера, вот так:

async function onUpdateStudent() {
  await axios.put(`/api/students/${studentToEdit.value.id}/`, {
    ...studentToEdit.value,
  });
  await fetchStudents();
}

не забывайте переподтягивать список после обновления записи

Чтобы можно было входить в админку прямо с фронта надо в vite.config добавить строчку

и соотвествующую кнопку входа:

Чтобы сделать поле с картинкой, его надо сначала добавить на стороне бекенда.

class Student(models.Model):
    name = models.TextField("ФИО")
    group = models.ForeignKey("Group", on_delete=models.CASCADE, null=True)
    
    # добавим ImageField, в upload_to указываем папку куда загружать файл
    picture = models.ImageField("Изображение", null=True, upload_to="students")

    # ...

прогоняем миграции

python manage.py makemigrations
python manage.py migrate

добавляем в сериалайзер

далее еще надо добавить в settings.py добавляем конфиг, куда сохраняем файлы

MEDIA_ROOT = BASE_DIR / "media"
MEDIA_URL = "/media/"

далее добавляем папку media в .gitignore

теперь идем на фронт, добавляем специальную переменную под файл студента на форму

const studentsPictureRef = ref();

в разметке добавляем поле для выбора файла и подвязываем через специальный атрибут ref

теперь идем в метод добавления объекта и там пишем:

если мы хотим, чтобы файл было видно после выбора, вешаем событие выбора файла на input с файлом и добавить поле, в котором будет хранится ссылка на загруженный файл

должно работать так:

и теперь, чтобы фотки были видны у записей, надо добавить в vite.config.js

затем добавить обработку media в роутер бекенда

ну и выводить в списке генерирую картинку:

получится вот так:

Чтобы в django привязать данные к юзеру необходимо сделать следующее.

Надо добавить в модели которые должны быть связаны пользователм поля внешние ключи на этого самого юзера:

как правило хочется, чтобы пользователь заполнялся во время создания модели, для этого достаточно подкрутить сериалайзер сделать его примерно таким

class StudentSerializer(serializers.ModelSerializer):
    def create(self, validated_data): 
        # когда в api создается сериалайзер, 
        # то заполняется специальное поле сериалайзера которое называется context
        # в него добавляется инфомрация по запросе, и доступна эта инфа
        # через self.context['request'], в частности там есть информация о пользовате
        if 'request' in self.context:
            # заполняем validated_data который используется для создания сущности в БД
            # данными из запроса
            validated_data['user'] = self.context['request'].user
            
        return super().create(validated_data)

    class Meta:
        model = Student
        fields = ['id', 'name', "group", "picture", "user"]  # тут просто юзера добавил

дальше обычно хочется ограничить доступ юзерам только к тем данным которые создавали они сами. Для этого надо в апишке переопределить метод get_queryset

class StudentsViewset(
    # ...
):
    queryset = Student.objects.all()
    serializer_class = StudentSerializer

    def get_queryset(self):
        qs = super().get_queryset()
        
        # фильтруем по текущему юзеру
        qs = qs.filter(user=self.request.user)

        return qs

Поставьте себе билблиотеку для генерации случайных данных Faker

pip install Faker

не забудьте добавить себе ее в requirements.txt

Чтобы выполнять кастомные команды на базе данных вашего проекта,

• необходимо создать в папке приложения (например у меня в students) папку management
• положить в нее пустой файлик __init__.py
• затем в этой папке создать папку commands
• тоже пололжить в нее пустой файлик __init__.py
• создать файлик под команду generate_data.py

файлик с командой должен иметь примерно такой код:

from django.core.management.base import BaseCommand

from faker import Faker

from students.models import Student


class Command(BaseCommand):
    def handle(self, *args, **options):
        fake = Faker(['ru_RU'])
        for _ in range(10):
            Student.objects.create(
                name=fake.name()
            )

получится примерно такая структура

теперь чтобы запустить этот файлик надо выполнить команду

python manage.py generate_data

имя команды соотвествует имени файла в папке commands только без расширения

Для вывода статистики заведите себе @action методы внутри вьюсетов. Например

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

http://localhost:8000/api/students/stats/

Пример кода демонстрирующего двойную авторизации

class UserProfileViewSet(
    GenericViewSet
):
    permission_classes = [IsAuthenticated]

    class OTPSerializer(serializers.Serializer):
        key = serializers.CharField()

    class OTPRequired(BasePermission):
        def has_permission(self, request, view):
            return bool(request.user and cache.get('otp_good', False))
        
    @action(detail=False, url_path="check-login", methods=['GET'], permission_classes=[])
    def get_check_login(self, request, *args, **kwargs):
        return Response({
            'is_authenticated': self.request.user.is_authenticated
        })
    
    @action(detail=False, url_path="login", methods=['GET'], permission_classes=[])
    def use_login(self, request, *args, **kwargs):
        user= authenticate(username='username', password='pass')
        if user:
            login(request, user)
        return Response({
            'is_authenticated': bool(user)
        })

    @action(detail=False, url_path='otp-login', methods=['POST'], serializer_class=OTPSerializer)
    def otp_login(self, *args, **kwargs):
        totp = pyotp.TOTP(self.request.user.userprofile.opt_key)
        
        serializer = self.get_serializer(data=self.request.data)
        serializer.is_valid(raise_exception=True)

        success = False
        if totp.now() == serializer.validated_data['key']:
            cache.set('otp_good', True, 10)
            success = True

        return Response({
            'success': success
        })
    
    @action(detail=False, url_path='otp-status')
    def get_otp_status(self, *args, **kwargs):
        otp_good = cache.get('otp_good', False)
        return Response({
            'otp_good': otp_good
        })
    
    @action(detail=False, url_path='otp-required', permission_classes=[OTPRequired])
    def page_with_otp_required(self, *args, **kwargs):
        return Response({
            'success': True
        })

пишу…