Интернет - сервис для зоомагазина (Python, Django, DRF, PostgreSQL, Vue, Vite)

Задание

Разработать БД и приложение для доступа к данным этой БД. Доступ к данным осуществляется через rest api, grpc или graphql. Предметная область - зоомагазин

Функционал программы

• Управление товарами
• Управление клиентами
• Управление продажами
• аналитика продаж по кол-ву и сумме в разрезе всех товаров и каждого тиовара 

Содержание отчета к программе

Фрагмент программного кода

<script setup>
import { ref, onMounted } from 'vue';
import axios from 'axios';

const products = ref([]);
const searchQuery = ref('');

const fetchProducts = async (query = '') => {
  try {
    const url = query
      ? `http://localhost:8000/api/products/?search=${encodeURIComponent(query)}`
      : 'http://localhost:8000/api/products/';
    const response = await axios.get(url);
    products.value = response.data;
  } catch (error) {
    console.error('Ошибка при загрузке товаров:', error);
  }
};

onMounted(() => {
  fetchProducts();
});

const searchProducts = () => {
  fetchProducts(searchQuery.value);
};
</script>


<template>
  <div class="container">    
    <h1>Список товаров</h1>
    <div class="mb-3 text-start">
      <router-link to="/products/add" class="btn btn-success mb-3 ">Добавить товар</router-link> 
      <router-link to="/" class="btn btn-secondary mb-3" >← На главную</router-link>
    </div>  
    <div class="mb-3 d-flex">
        <input
          v-model="searchQuery"
          @keyup.enter="searchProducts"
          type="text"
          class="form-control me-2"
          placeholder="Поиск по наименованию или категории"/>
        <button @click="searchProducts" class="btn btn-primary">Поиск</button>
    </div>
    <table class="table table-hover table-striped table-bordered text-start align-middle">
      <thead class="table-info">
        <tr>   
          <th class="text-center">ИД</th>       
          <th class="text-center">Наименование</th>
          <th class="text-center">Описание</th>
          <th class="text-center">Категория</th>
          <th class="text-center">Цена</th>
          <th class="text-center">Фото</th>
          <th class="text-center">Детали</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="product in products" :key="product.id"> 
          <td class="text-center">{{ product.id  }}</td>         
          <td class="text-center">{{ product.name }}</td>
          <td class="text-center">{{ product.description }}</td>
          <td class="text-center">{{ product.category }}</td>
          <td class="text-center">{{ product.price }}</td>
          <td class="text-center">
            <img :src="/images/loading-150-1.gif" data-src="product.photo" alt="Фото товара" class="product-photo" width="100p" />
         </td>
          <td class="text-center">
            <router-link :to="`/products/${product.id}`" class="btn btn-primary btn-sm">Подробнее</router-link> 
            <router-link :to="`/products/${product.id}/edit`" class="btn btn-warning btn-sm">
               Редактировать
            </router-link>
          </td>          
        </tr>
      </tbody>
    </table>
  </div>
</template>

<style scoped>
.container {
  max-width: 1200px;
  margin: 0 auto;
}
.table {
  width: 100%;
  margin-bottom: 1rem;
  color: #212529;
  vertical-align: top;
  border-collapse: collapse;
}

.table-hover tbody tr:hover {
  background-color: rgba(0, 0, 0, 0.075);
}

.table-striped tbody tr:nth-of-type(odd) {
  background-color: rgba(0, 0, 0, 0.05);
}

.table-bordered {
  border: 1px solid #dee2e6;
}

.table-bordered th,
.table-bordered td {
  border: 1px solid #dee2e6;
}

.text-start {
  text-align: left !important;
}

.align-middle {
  vertical-align: middle !important;
}
</style>

Скриншот архива с проектом

Пояснения по запуску программы

 1. Ставим Python, Node.js, 2. Ставим Visual Studio Code 3. Ставим все необходимые расширения ( ChatGPT в помощь) 4. Ставим все неообходимые библиотеки для серверной и клиентской части (ChatGPT в помощь) 5. Скачиваем PostgreSQL / Создаем новую базу данных. Меняем параметры в settings.py на свои - имя базы, пароль. 6. Переходим в Backend и проект командой - cd New_Backend - cd Backend  - cd server - python manage.py runserver. 7/ переходим во Frontend - cd Frontend - cd zoo-frontend - npm run dev.  все запущено и готово к работе.