В этой статье мы поделимся с вами проектом электронной коммерции, основанным на Laravel и Vue.js (Nuxt.js).

В этом проекте я использовал Laravel как сервис REST API, а внешний интерфейс веб-сайта электронной коммерции построен с использованием Nuxt.js вместе с admin-panel
Здесь я попытался сохранить некоторые лучшие практики как в мире Laravel, так и в мире Vue.js. Я надеюсь, что этот проект будет полезен для всех вас, ребята.

Начиная

Сначала клонируйте репозиторий:

git clone https://github.com/MdMostaFizurRahaman/ecommerce.git

Есть две части этого приложения.

Бэкенд

Установите все зависимости с помощью композитора

composer install

Скопируйте пример файла .env.example и переименуйте его в .env.

cp .env.example .env

Сгенерировать новый ключ приложения

php artisan key:generate

Сгенерировать секретный ключ jwt

php artisan jwt:secret

Обновите конфигурацию базы данных из вашего файла .env.

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=ecommerce
DB_USERNAME=root
DB_PASSWORD=

Запустите миграцию базы данных и создайте исходные данные (Установите подключение к базе данных в .env перед миграцией)

php artisan migrate --seed

Запустите сервер разработки с помощью этой команды

php artisan serve

Теперь ваш API размещен на http://localhost:8000.

Для трансляции уведомлений в реальном времени вам необходимо обновить конфигурацию трансляции в файле .env.

BROADCAST_DRIVER=pusher

PUSHER_APP_ID="YOUR_APP_ID"
PUSHER_APP_KEY="YOUR_APP_KEY"
PUSHER_APP_SECRET="YOUR_APP_SECRET"
PUSHER_APP_CLUSTER="YOUR_APP_CLUSTER"

Для постановки уведомлений в очередь необходимо изменить в файле .env следующее:

QUEUE_CONNECTION=database

Теперь прослушайте очереди, выполнив эту команду

php artisan queue:work

Перемещая заказы на стол доставки, вы должны выполнить эту команду:

php artisan move:delivered

Эта команда будет запускаться автоматически каждый день в 12:00 AM (для этого сервера требуется настройка кукурузы)

Чтобы создать пользователя super-admin, вы можете запустить следующую команду:

php artisan generate:super-admin

Документация по API

  • Администратор:

https://documenter.getpostman.com/view/9967497/UVBzm94s

  • Клиент:

https://documenter.getpostman.com/view/9967497/UVBzm94u

  • Публичные:

https://documenter.getpostman.com/view/9967497/UVBzm94v

Внешний интерфейс

Для внешнего интерфейса перейдите в каталог frontend и выполните следующую команду.

npm install

Затем скопируйте файл .env.example и переименуйте его в файл .env.

cp .env.example .env

Обновите файл .env, указав свои учетные данные.

APP_NAME=Wecommerce
API_URL=http://localhost:8000/api/
API_BASE_URL=http://localhost:8000
WEBSOCKET_KEY="YOUR_PUSHER_KEY"

Теперь вы можете запустить внешнее приложение с помощью следующей команды.

npm run dev

or

npm run start

Теперь ваше внешнее приложение будет работать на http://localhost:3000/