Менеджер финансов на Laravel и VueJS — Старт проекта.

Давно я ничего не писал, а тут подумал, почему бы не совместить небольшой проект и руководство. Менеджер финансов будет отличным практическим примером для тех кто начал изучать Laravel и VueJs. Приложение будет неким персональным финансовым менеджером, в котором можно будет следить за личными расходами, фильтровать, сортировать транзакции с красивыми графиками.

Подготовка

Перед началом работы вам нужно установить на компьютер некий набор программного обеспечения.

• node & npm (я использовал node 12.19.0, npm 6.14.8)
• php 7.4/mysql если вы используете OpenServer/XAMPP
• Docker & docker-compose, если вы используете докер

Шаг №1. Определяем требования

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

Основные требования к функционалу пользователя:

• Авторизация/Аутентификация
• Регистрация и подтверждение по почте
• Добавление кошелька с указанной валютой
• Добавление категорий
• Добавление транзакций\удаление\редактирование
• Просмотр транзакций с фильтрами\сортировкой по кошелькам\категориям\дате.
• Графики для отображения расходов\доходов за неделю\месяц

Функциональные и инфраструктурные требования мы описывать не будем, так как проект довольно простой и рассчитан на новичков. Мы не будем рассматривать архитектурные решения, а будем использовать только то, что предоставляет нам документация по фреймворку.

Шаг №2. Установка laravel и настройка окружения

Для проекта я буду использовать docker в качестве окружения и OS Windows. Вы можете использовать мой конфиг докера или любой другой софт(OpenServer, Xampp, Homestead, Vagrant, и т.д.).

#Установка фреймворка Laravel

Инструкция по установке находится по адресу https://laravel.com/docs/8.x/installation#installing-laravel.

Я обычно устанавливаю через composer

composer create-project --prefer-dist laravel/laravel <тут название вашего проекта>

Если вы будете использовать docker, но у вас в системе не установлен php, тогда просто скачайте репозиторий laravel себе на компьютер и используйте его.

git clone [email protected]:laravel/laravel.git <тут название вашего проекта>

После скачивания файлов обязательно удалите папку .git в корне проекта

#Настройка окружения docker

Если вы используете для окружения OpenServer или другое по, этот шаг можете пропустить.

В корне проекта создаём файл docker-compose.yml со следующим содержимым:

version: '3.5'
services:
  nginx:
    image: nginx:alpine
    container_name: finances-nginx
    working_dir: /var/www/finances
    volumes:
      - ./:/var/www/finances
      - ./docker/nginx/finances.conf:/etc/nginx/conf.d/default.conf
    links:
      - php
    depends_on:
      - php
      - database
    ports:
      - 80:80

  php:
    container_name: finances-php
    build:
      context: ./docker
      dockerfile: php.docker
    volumes:
      - ./:/var/www/finances
    working_dir: /var/www/finances
    ports:
      - 9000:9000
    links:
      - database
    depends_on:
      - database

  database:
    image: mysql:latest
    container_name: finances-database
    command: --default-authentication-plugin=mysql_native_password
    environment:
      MYSQL_ROOT_PASSWORD: secret
      MYSQL_DATABASE: finances
    ports:
      - 3306:3306

Создадим директорию docker, поместим в неё файл php.docker:

FROM php:7.4-fpm

RUN apt-get update && apt-get install -y libmcrypt-dev git libzip-dev zip default-mysql-client
RUN docker-php-ext-configure zip && docker-php-ext-install pdo_mysql zip

RUN curl -sS https://getcomposer.org/installer | php -- --install-dir=/usr/local/bin --filename=composer

И еще одна директория с конфигом nginx — docker/nginx, файл — finances.conf

server {
    listen 80;
    server_name _;
    root /var/www/finances/public;

    add_header X-Frame-Options "SAMEORIGIN";
    add_header X-XSS-Protection "1; mode=block";
    add_header X-Content-Type-Options "nosniff";

    index index.php;

    charset utf-8;

    location / {
        try_files $uri $uri/ /index.php?$query_string;
    }

    location = /favicon.ico { access_log off; log_not_found off; }
    location = /robots.txt  { access_log off; log_not_found off; }

    error_page 404 /index.php;

    location ~ \.php$ {
        fastcgi_pass php:9000;
        fastcgi_param SCRIPT_FILENAME $realpath_root$fastcgi_script_name;
        include fastcgi_params;
    }

    location ~ /\.(?!well-known).* {
        deny all;
    }
}

После создания и проверки конфигов, запускаем команду docker-compose up -d --build. Дожидаемся окончания выполнения команды и пробуем открыть в браузере адрес http://localhost. Если у вас открылась стандартная страница приветствия Laravel, значит вы все сделали правильно.

Если вы устанавливали laravel при помощи git, тогда нужно выполнить несколько действий:

• скопируйте файл .env.example в корень проекта с новым именем .env
• docker exec -it finances-php composer install.
• docker exec -it finances-php php artisan key:generate

#Настройка окружения OpenServer

Папку проекта нужно поместить в директорию domains. Далее переходим в Настройки -> Домены, управление доменами выбираем Ручное управление + Автонастройка/Ручное управление. Далее нажимаем на кнопку Добавить и добавляем ваш домен с корневой папкой public.

Примерно такой же принцип и для других систем, более подробно о настройках описано в официальной документации — https://laravel.com/docs/8.x#web-server-configuration.

Шаг №3. Установка VueJs

Достаточно выполнить команду

• npm install vue —save

Завершение

Открываем страницу http://localhost и видим:

На этом установка Laravel/VueJs и настройка окружения закончена. В следующей статье мы создадим аутентификацию/регистрацию на стороне бекенда и фронтенда.