Веб-приложение соцсеть ( Backend - Java(SpringBoot, SpringSecurity) Frontend - Vue.js)

Задание

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

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

Backend(Сервер) - такое приложение которое при обращении к нему возвращает ответ в виде запрощенных данных, либо ошибки если нет доступа к запрошенной информации.

Программа имеет два приложения для backend:

• Первое предназначено для авторизации
• Второе для работы с самим приложением

Оба приложения написаны на java, фреймворк spring boot.

Сервер при запуске сам создает базу данных в PostgreSQL и погружает тестовые данные

Структура для Backend авторизации выглядит примерно так:

src

├── main

│ ├── java

│ │ └── com

│ │ └── example

│ │ ├── config

│ │ │ └── SecurityConfig.java

│ │ ├── controller

│ │ │ └── UserController.java

│ │ ├── model

│ │ │ ├── User.java

│ │ │ └── UserRole.java

│ │ ├── repository

│ │ │ └── UserRepository.java

│ │ ├── service

│ │ │ ├── UserService.java

│ │ │ └── UserServiceImpl.java

│ │ └── Application.java

│ └── resources

│ ├── application.properties

│ ├── static

│ └── templates

└── test

└── java

└── com

└── example

├── controller

│ └── UserControllerTests.java

└── service

└── UserServiceTests.java

Frontend - пользовательское приложение, которое отображает данные с сервера.

Frontend написан на Node.js фреймворк vue.js, не полностью доделан.

Приложение на Vue имеет такую структуру:

├── node_modules/ # зависимости проекта

├── public/ # статические файлы, доступные из корня сервера

│ ├── index.html # основной HTML-файл приложения

│ └── favicon.ico # иконка приложения

├── src/ # исходный код приложения

│ ├── assets/ # изображения, шрифты, стили и другие ресурсы

│ ├── components/ # компоненты Vue.js

│ ├── router/ # файлы маршрутизации

│ ├── store/ # файлы хранилища Vuex

│ ├── views/ # страницы приложения

│ ├── App.vue # корневой компонент приложения

│ └── main.js # точка входа в приложение

├── tests/ # тесты

├── .gitignore # список игнорируемых файлов для Git

├── babel.config.js # конфигурация Babel

├── package.json # список зависимостей и настройки проекта

├── README.md # описание проекта

└── vue.config.js # настройки Vue CLI

Взаимодействие между приложениями происходит с помощью API

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

Все подгружается с сервера.

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

Код повторно используемого компонента MyInput:

<template>
    <input :value="modelValue" @input="updateInput" class="input" type="text">
</template>

<script>
    export default {
        name: 'my-input',
        props: {
            modelValue: [String, Number]
        },
        methods: {
            updateInput(event){
                this.$emit('update:modelValue', event.target.value)
            }
        }
    }
</script>

<style scoped>
.input {
    width: 90%;
    border: 1px solid teal;
    padding: 10px 15px;
    margin-top: 15px;
}
</style>

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

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

Для запуска frontend нужно в начале установить node.js, VS code, далее открыть папку с проектом frontend в VS code, открыть там терминал, убедится что терминал открылся в папке проекта(если нет, команда  cd папка проекта),

установить библиотеки командой npm install и запустить frontend в режиме отладки командой npm run serve, можно создать build приложения выполнив команду npm run build

Далее установить СУБД PostgreSQL и создать пустую БД tasklist (БД авторизации, подгрузится сама) и создать БД по схеме для основных процессов соцсети.

Чтобы запустить сервер нужно скачать intelij idea(можно любую другую IDE, но эта удобнее) и запустить сервер, библиотеки должны подгрузиться сами.