В этой статье мы поделимся с вами проектом электронной коммерции, основанным на 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/