Front-end был реализован при помощи фреймворка VueJs. Его отличительной чертой является то, что файлы формата.vue состоят из 3 частей: template, script, style. Первая часть соответствует html-разметке компонента, вторая – JS-коду для этого компонента, а третья содержит стили, которые распространяются на все компоненты. С помощью этого фреймворка каждый блок на странице веб-приложения можно разбить на отдельные компоненты, что делает код более удобным для чтения и редактирования.
Листинг 1 – Компонент «Содержимое главной страницы»
<template lang="html">
<div class="main-page">
<div class="search-form">
<input v-model="search" type="text" placeholder="Введите название фильма" id="input-search" @keyup.enter="searchFilms" />
<label for="input-search" @click="searchFilms">Поиск</label>
</div>
<FilmsPage:showTop="showTop"
:showNew="showNew"
:showRandom="showRandom">
</FilmsPage>
</div>
</template>
<script>
import axios from 'axios';
import FilmsPage from './FilmsPage.vue';
export default {
props: [],
data() {
return {
search: '',
showTop: true,
showNew: true,
showRandom: true
}
},
components: {
FilmsPage
},
methods: {
searchFilms() {
this.$router.push({ name: 'search', params: { searchNameParent: this.search } });
}
}
};
</script>
<style>
.search-form {
display: flex;
width: 60%;
margin: 2em 25%;
height: 2.5em;
}
</style>
Рисунок 20. Главная страница
На главной странице приложения показываются фильмы-новинки (10 самых новых фильмов), фильмы с самым высоким рейтингом и случайные фильмы (каждого типа по 10 фильмов).
Пользователь может осуществлять поиск фильма по названию на главной странице или же перейти по меню в расширенный поиск.
Неавторизированный пользователь может просматривать фильмы, однако у него не будет ряда возможностей: он не сможет оценить фильм и не увидит ссылку на автора фильма.
Для авторизации пользователь может воспользоваться вкладкой меню «Вход» (рисунок 21), если пользователь уже был зарегистрирован ранее, иначе ему необходимо воспользоваться вкладкой «Регистрация» (рисунок 22).
Рисунок 21. Страница входа
Рисунок 22. Страница регистрации
У авторизированного пользователя также появляется возможность добавлять свои фильмы. Эта возможность продемонстрирована на рисунке 21.
Рисунок 23. Добавление фильма
Фильм добавляется в BLOB-хранилище (рисунок 24), а затем в базу данных (рисунки 25-26).
Рисунок 24. Демонстрация наличия фильма в BLOB-хранилище
Рисунок 25. Демонстрация наличия фильма в БД (таблица Film)
Рисунок 26. Демонстрация заявки, ожидающей одобрения (таблица ClientFilmAdded)
После добавления фильма пользователь перенаправляется на страницу «Мои фильмы». Попасть на эту страницу также можно через выпадающее меню кнопки Лк (личный кабинет).
Страница «Мои фильмы» представлена на рисунке 27.
Рисунок 27. Результат добавления фильма
Для пользователя с ролью «Администратор» в меню добавляется вкладка «Управление». В этой вкладке администратор может просматривать предложенные фильмы, одобрять или отклонять их. Также в этой вкладке находятся все одобренные фильмы, которые администратор может удалить в случае необходимости.
Рисунки 28-29 демонстрируют страницу «Управление».
Рисунок 28. Страница «Управление» – Предложенные фильмы
Рисунок 29. Страница «Управление» – Опубликованные фильмы
Для того чтобы одобрить фильм, администратор должен прочитать полную информацию о фильме, чтобы не было случайного отказа. Поэтому кнопки «Опубликовать» и «Отклонить заявку» расположены на странице фильма, на которую попадает администратор по нажатию на кнопку «Подробнее» либо по нажатию на краткую информацию о фильме.
На рисунках 30-31 представлена страница фильма. Эта страница такая же как для пользователей, которые не являются администраторами, за исключением того, что добавлены две кнопки «Опубликовать» и «Отклонить заявку» для предложенных фильмов.
Рисунок 30. Страница фильма (часть 1)
Рисунок 31. Страница фильма (часть 2)
После одобрения фильма администратором в таблице ClientFilmAdded статус фильма меняется на «1» (рисунок 32), и фильм становится доступным для просмотра всем пользователям. В случае отклонения заявки фильм удаляется из базы данных и из Blob-хранилища.
Рисунок 32. Демонстрация одобренной заявки (таблица ClientFilmAdded)
Оценивать фильмы могут авторизированные пользователи. Для этого им необходимо выбрать звездочку, соответствующую нужной оценке. В этом случае выбор пользователя запишется в базу данных и при дальнейших открытиях этого фильма, количество окрашенных звездочек будет равно поставленной оценке.
На рисунке 33 представлен тот же фильм, что на рисунке 32, но уже оцененный текущим пользователем.
Рисунок 33. Результат оценивания фильма
Рисунок 34. Оценки пользователей к фильмам (таблица ClientFilmRate)
Любой пользователь может осуществлять поиск по всем опубликованным фильмам. Поиск может осуществляться по одному или нескольким параметрам. Страница поиска представлена на рисунке 35.
Рисунок 35. Страница поиска
На рисунке 36 представлена карта сайта, на которой изображены возможные перемещения по сайту. Синяя область – страницы, доступные для неавторизованного пользователя, оранжевая – для авторизованного, а зеленая – для администратора. «Вход» и «Регистрация» доступны также только для неавторизованного пользователя.
Рисунок 36. Карта сайта