Laravel VueJS 전자 상거래 프로젝트

이 기사에서는 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 디렉토리로 cd하고 다음 명령을 실행합니다.

npm install

그런 다음 .env.example 파일을 복사하고 .env 파일로 이름을 바꿉니다.

cp .env.example .env

자격 증명으로 .env 파일을 업데이트합니다.

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

이제 다음 명령을 사용하여 프런트엔드 애플리케이션을 실행할 수 있습니다.

npm run dev

또는

npm run start

이제 프런트엔드 애플리케이션이 http://localhost:3000/에서 실행됩니다.