Введение в создание системы управления спортивными мероприятиями с использованием Spring Boot и Vue Element (Завершение)

Недавно мне пришлось создать систему управления спортивными мероприятиями для университета, используя её как учебный пример. В то же время я учился самостоятельно использовать Vue, поэтому решил создать простую систему с использованием Spring Boot и Vue. Vue — это очень популярный фреймворк для фронтенд-разработки, который отличается от традиционной jQuery. jQuery основан на событиях, а Vue — на данных. Раньше я часто работал со страницами через jQuery, манипулировал различными DOM-элементами, но теперь с помощью Vue можно просто манипулировать привязанными данными, не трогая сам DOM. В свободное время я буду делиться своими знаниями, полученными во время обучения, и если вы заметите ошибки, пожалуйста, сообщите мне, чтобы мы могли вместе развиваться!

Оглавление

Создание системы управления спортивными мероприятиями с использованием Spring Boot и Vue Element (часть 1): Настройка среды разработки

Создание системы управления спортивными мероприятиями с использованием Spring Boot и Vue Element (часть 2): Установка фронтенд-фреймворка

Создание системы управления спортивными мероприятиями с использованием Spring Boot и Vue Element (часть 3): Установка Vue Devtools

Создание системы управления спортивными мероприятиями с использованием Spring Boot и Vue Element (часть 4): Разработка главной страницы

Создание системы управления спортивными мероприятиями с использованием Spring Boot и Vue Element (часть 5): Обёртывание axios

Создание системы управления спортивными мероприятиями с использованием Spring Boot и Vue Element (часть 6): Обёртывание часто используемых классов

Создание системы управления спортивными мероприятиями с использованием Spring Boot и Vue Element (часть 7): Интеграция Echarts

Создание системы управления спортивными мероприятиями с использованием Spring Boot и Vue Element (часть 8): Создание статического списка страниц

Создание системы управления спортивными мероприятиями с использованием Spring Boot и Vue Element (часть 9): Конфигурирование маршрутов Vue Router

Создание системы управления спортивными мероприятиями с использованием Spring Boot и Vue Element (часть 10): Жизненный цикл Vue

Создание системы управления спортивными мероприятиями с использованием Spring Boot и Vue Element (часть 11): Настройка сервера Spring Boot

Создание системы управления спортивными мероприятиями с использованием Spring Boot и Vue Element (часть 12): Базовая модель базы данных PowerDesigner

Создание системы управления спортивными мероприятиями с использованием Spring Boot и Vue Element (часть 13): Spring Boot + MyBatis + Redis + Swagger

Создание системы управления спортивными мероприятиями с использованием Spring Boot и Vue Element (часть 14): Интеграция переднего и заднего концов для CRUD операций

Создание системы управления спортивными мероприятиями с использованием Spring Boot и Vue Element (часть 15): Кросс-доменная регистрация и вход пользователя

Создание системы управления спортивными мероприятиями с использованием Spring Boot и Vue Element (часть 16): Главная страница меню, интеграция переднего и заднего концов

Создание системы управления спортивными мероприятиями с использованием Spring Boot и Vue Element (часть 17): Настраиваемый Nginx + Tomcat для развертывания переднего и заднего концов

Создание системы управления спортивными мероприятиями с использованием Spring Boot и Vue Element (часть 18): Завершающая часть

Технологическая архитектура

Основные функции

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

• Главная страница системы

  • Отображение общего состояния спортивных мероприятий, количество участников, таблицы награждений золотых, серебряных и бронзовых медалистов, дата проведения, ключевые события дня и т.д.

• Управление студентами

  • Вход
    • Ввод имени студента и пароля (дважды зашифровано MD5), а также проверочный код для получения токена доступа в систему
  • Выход
    • Нажатие кнопки выхода для перехода обратно на страницу входа и очистки кеша
  • Просмотр списка студентов
    • Переход по левой навигационной панели для просмотра списка студентов
  • Добавление студента
    • Нажатие кнопки добавления, заполнение информации о студенте и сохранение
  • Изменение данных студента
    • Нажатие кнопки изменения, внесение изменений в информацию о студенте и сохранение
  • Локализация аккаунта студента
    • После локализации студент не сможет войти в систему, однако его запись будет сохранена
  • Удаление студента
    • После удаления все записи студента будут удалены
  • Поиск студента
    • Возможность поиска по имени или номеру студента- Управление преподавателями
  • Вход
    • Ввод имени преподавателя и пароля (дважды зашифровано MD5) и проверочный код для получения токена доступа в систему
  • Выход
    • Нажатие кнопки выхода для перехода обратно на страницу входа и очистки кеша
  • Просмотр списка преподавателей
    • Переход по левой навигационной панели для просмотра списка преподавателей
  • Добавление преподавателя
    • Нажатие кнопки добавления, заполнение информации о преподавателе и сохранение
  • Изменение данных преподавателя
    • Нажатие кнопки изменения, внесение изменений в информацию о преподавателе и сохранение
  • Локализация аккаунта преподавателя
    • После локализации преподаватель не сможет войти в систему, однако его запись будет сохранена
  • Удаление преподавателя
    • После удаления все записи преподавателя будут удалены
  • Поиск преподавателя
    • Возможность поиска по имени или номеру преподавателя

• Управление результатами

  • Просмотр списка результатов
    • Переход по левой навигационной панели для просмотра списка результатов
  • Добавление результата
    • Нажатие кнопки добавления, заполнение информации о результате и сохранение
  • Изменение данных результата
    • Нажатие кнопки изменения, внесение изменений в информацию о результате и сохранение
  • Удаление результата
    • После удаления все записи результата будут удалены
  • Поиск результата
    • Возможность поиска по имени или номеру студента и виду спорта

• Журнал системы

  • Список журналов
    • Отображение журнала входа и выхода пользователей, а также журналов действий пользователей
  • Поиск журналов
    • Возможность поиска по времени и типу журнала
  • Диаграмма тренда
    • Отображение диаграммы тренда журнала с использованием Echart

• Основные данные

  • Добавление основных данных
    • Нажатие кнопки добавления, заполнение информации о данных и сохранение
  • Изменение основных данных
    • Нажатие кнопки изменения, внесение изменений в информацию о данных и сохранение
  • Удаление основных данных
    • После удаления все записи основных данных будут удалены

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

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

Системные страницы

Открытый обмен

• Мой блог CSDN - mingnianshimanian
• Моя статья на Jianshu
• Мой электронный адрес
• Мой QQ: 509961766
• МыChat публичный профиль

Структура проекта

. VUE
├── build              Скрипт сборки проекта
├── config             Конфигурация проекта
├── node_modules       Зависимости проекта
├── src                Исходный код проекта
│   └── assets         Ассеты проекта
│   └── components     Компоненты проекта
│   └── router         Роутинг проекта
│   └── App.vue        Vue-компонент главной страницы
│   └── main.js        JavaScript-входной файл главной страницы
├── static             Статические ресурсы проекта
├── test               Тестирование проекта
├── index.html         Главная страница проекта
├── package.json       Описание проекта

Лицензия открытого исходного кода

Проект spring-boot-vue использует лицензию Apache 2.