c shopping 다운로드 -C c shopping 소스 코드 다운로드

c shopping

AI 소스 코드

Minimum MVP Publishing

다운로드

C- 쇼핑 v1.0.0

readme.md

영어
ZH_CN은 중국어를 단순화했습니다

여러분, 안녕하세요! 전자 상거래의 세계로의 여행 인 C-Shopping에 오신 것을 환영합니다. 저는 C-Shopping의 오픈 소스 작가 인 "Ji Xiaopeng"이며 오늘은 최신 기술을 기반으로 한 오픈 소스 전자 상거래 플랫폼을 소개합니다. 함께 탐색합시다!

프로젝트 라이브 데모 링크 :

Docker 배포 주소 : http://shop.huanghanlian.com/
Vercel 주소 : https://c-shopping-three.vercel.app/

프로젝트 게이트웨이 : https://github.com/huanghanzhilian/c-shopping.

기본 모바일 앱 응용 프로그램에 반응 :

프로젝트 게이트웨이 : https://github.com/huanghanzhilian/c-shopping-rn.

도움이되면 별을 줘주세요. 큰 격려가 될 것입니다.

프로젝트 배경

배경:

전통적인 프론트 엔드 UI 프레임 워크는 오랫동안 고정 된 형태 (전통적인 UI 프레임 워크에 의해 제한)에 의해 제한되어 시각적 피로를 초래했습니다. 고도로 맞춤화 된 프로젝트를 개발할 때는 종종 무력감이 있습니다.
학습 및 유지 보수 비용이 높은 다중 장치 적응이있는 우수한 웹 프로젝트는 드물다.
프로젝트가 복잡해지면 구성 요소에서 여러 API 호출을 다루는 것이 복잡해질 수 있습니다. 예를 들어, 여러 로딩 및 오류 상태를 관리하면 수많은 상태가 선언 될 수 있습니다. 요청 취소 및 요청 경쟁 조건과 같은 문제도 간과되기 쉽습니다.
프로젝트 복잡성이 커지면 스타일의 개발과 유지가 광범위하고 번거 롭습니다.

의지:

백그라운드에서 언급 된 문제를 해결하십시오.

목적:

웹에 적합한 완전하고 잘 설계된 생태계를 구축하십시오.

첫째, C-Shopping의 기술을 탐구합시다. Next.js, Tailwind CSS, Headless UI, Redux-Toolkit-Rtk Query, JWT 및 Docker 등 일련의 최첨단 기술을 채택했습니다. 이를 통해이 프로젝트는 효율적일뿐만 아니라 확장 가능성도 높습니다. 우리는 전통적인 전자 상거래 플랫폼의 일부 고통 요점과 같은 미학 부족, 다른 장치에 대한 부적절한 적응 및 단조로운 인터페이스 등을 다루기 위해 최선을 다하고 있습니다. 최신 기술 및 설계 원칙을 채택함으로써 C-Shopping은 사용자에게 완전히 반응하는 기술 개발 경험을 제공합니다.

C- 쇼핑은 사용자 경험을 우선시합니다. 우리의 인터페이스는 아름답고 반응이 좋으며 사용자가 모든 장치에서 쉽게 쇼핑 할 수 있습니다. 개인 센터 및 주문 관리 기능은 또한 쇼핑 경험을보다 개인화하고 편리하게 만듭니다.

프로젝트 하이라이트

C-Shopping의 하이라이트 중 하나는 Next.js, Tailwind CSS, Headless UI, Redux-Toolkit-RTK 쿼리 등을 포함한 일련의 고급 기술을 채택하여 사용자에게 궁극적 인 성능과 경험을 제공하는 것입니다. 우리는 미학에 중점을 둘뿐만 아니라 기술의 우수성을 위해 노력합니다.

다음 .js는 번개 빠른 경험을 주도합니다

C-Shopping은 Next.js를 사용합니다. 즉, 웹 페이지로드 속도가 엄청나게 빠를뿐만 아니라 서버 측 렌더링을 지원하여 전례없는 수준의 부드러운 수준을 제공합니다.

? 테일 윈드 CSS 세련된 디자인

C-Shopping은 Tailwind CSS를 사용하여 스타일 감각을 주입합니다. 각 인터페이스는 절묘하므로 쇼핑을 시각적 인 잔치로 만듭니다.

? 헤드리스 UI 자유와 유연성

C-Shopping은 헤드리스 UI 스타일을 선택하여 쇼핑 과정에서 사용자에게 더 많은 자유를 제공합니다. 더 이상 전통적인 UI 프레임 워크에 국한되지 않으면 사용자 정의를 위해 더 많은 문이 열립니다.

? 걱정없이 JWT 보안

보안이 가장 중요합니다! JWT는 사용자 인증에 사용되며 쇼핑 행동에 대한 가장 강력한 보증을 제공하여 자신감을 가지고 쇼핑 할 수 있습니다.

? Docker Perfect Deployment

C-Shopping은 Docker를 포용하여 프로젝트 배포를 엄청나게 간단하게 만듭니다. 컨테이너화를 통해 전체 프로젝트는 다른 환경에서 완벽하게 실행할 수 있습니다.

Redux 툴킷 및 RTK 쿼리 상태 관리 아트

C-Shopping은 Redux Toolkit 및 RTK 쿼리를 사용하여 상태 관리가보다 편안하고 즐겁습니다. 응용 프로그램에서 데이터 흐름을 더 잘 추적하여 쇼핑 경험의 안정성을 보장 할 수 있습니다.

기능 데모

이제 C-Shopping의 몇 가지 기본 기능을 살펴 보겠습니다. 명확한 탐색 및 제품 디스플레이에서 편리한 검색 및 쇼핑 카트 기능에 이르기까지 모든 세부 사항은 사용자에게 즐거운 쇼핑 경험을 제공하도록 신중하게 설계되었습니다.

사용자 측

기준 치수	데스크탑 장치	모바일 장치
집
보조 범주
3 단계 카테고리
제품 세부 사항
로그인
등록하다
찾다
쇼핑 카트
점검
사용자 프로필
내 주문
내 리뷰
주소 관리
최근 방문

관리자 측

기준 치수	데스크탑 장치	모바일 장치
로그인
관리 센터
사용자 관리
카테고리 관리
카테고리 관리 트리
사양 관리
제품 관리
주문 관리
검토 관리
슬라이더 관리
배너 관리

프로젝트 구조

C- 쇼핑 프로젝트 구조 :

주요 구조 설명 :

? 앱 : 응용 프로그램의 기본 코드
- ? 메인 : 주요 응용 프로그램 구성 요소
  - ? Client-Layout : 사용자 측의 공통 레이아웃 페이지
  - ? 빈 레이 아웃 : 일반적인 빈 레이아웃 페이지
  - ? 관리자 : 관리자 페이지
  - ? Layout.js : 메인 레이아웃 구성
  - ? 프로필 : 사용자 프로필 페이지
- ? StoreProvider.js : 글로벌 주 관리 제공자
- ? API : API 요청 관련 경로
  - ? 인증 : 사용자 인증 API
  - ? 배너 : 광고 배너 API
  - ? 카테고리 : 제품 카테고리 API
  - ...
? 구성 요소 : 재사용 가능한 반응 구성 요소
? 도우미 : 도우미 기능 및 도구
- ? API : API 요청 관련 도우미 기능
- ? Auth.js : 사용자 인증과 관련된 도우미 기능
- ...
? 후크 : 맞춤 반응 후크
? 모델 : 데이터 모델 정의
? 공개 : 이미지, 글꼴 등과 같은 정적 리소스 등
? 저장소 : Redux State Management와 관련된 구성
- ? 서비스 : RTK 쿼리
- ? 슬라이스 : Redux 툴킷
? 스타일 : 스타일 파일
? 유틸리티 : 일반 유틸리티
...

이 구조는 프로젝트를 구성하고 유지 관리하기 쉽고 확장 가능하도록 설계되었습니다. 각 섹션은 다음에 따라 나뉩니다

기능과 책임으로 팀 구성원이 이해하고 협력 할 수 있습니다.

배포 및 사용

개발 환경

터미널에서 다음 명령을 실행하여 리포지토리를 복제하거나 다운로드하십시오.
```
 git clone https://github.com/huanghanzhilian/c-shopping.git
```
NPM 또는 원사를 사용하여 프로젝트 종속성을 설치하십시오.
```
 npm install
```
또는
```
 yarn
```

필요한 환경 변수를 정의하려면 프로젝트 루트 디렉토리의 .env.example 파일에서 새 .env 파일을 작성하십시오. 이 단계는 중요합니다 (이미지 업로드에 대한 경우) :

 NEXT_PUBLIC_ACCESS_TOKEN_SECRET=<your token secret>
NEXT_PUBLIC_ALI_REGION=<your ali endpoint>
NEXT_PUBLIC_ALI_BUCKET_NAME=<your ali bucket name>
NEXT_PUBLIC_ALI_ACCESS_KEY=<your ali access key>
NEXT_PUBLIC_ALI_SECRET_KEY=<your ali secret key>
NEXT_PUBLIC_ALI_ACS_RAM_NAME=<your ali acs:ram name>
NEXT_PUBLIC_ALI_FILES_PATH=<your ali files pathname>

로컬 컴퓨터에 MongoDB를 설치하십시오.
프로젝트 실행 :
```
 npm run dev 
```
계정 등록 :
```
 http://localhost:3000/register
```
계정을 작성한 후 데이터베이스에서 계정을 찾아 root 필드를 True로 수정하고 role 필드를 관리자로 수정하십시오. 이 모든 관리자 대시 보드 기능에 액세스 할 수 있습니다.
```
 mongo
```
```
 use choiceshop
```
```
 db.users.update({name:"admin"},{$set:{role:"admin"}})
db.users.update({name:"admin"},{$set:{root:true}})
```
관리자 입구 : http : // localhost : 3000/admin

MongoDB에서 루트 카테고리를 만듭니다.

 mongo

 use choiceshop

 db.categories.insert({
    "name" : "Featured Items",
    "slug" : "choiceshop",
    "image" : "http://huanghanzhilian-test.oss-cn-beijing.aliyuncs.com/shop/upload/image//icons/zHle_bmdM_dhu2K938MMM.webp",
    "colors" : {
        "start" : "#EF394E",
        "end" : "#EF3F55"
    },
    "level" : 0
})

Docker 배포

프로젝트 루트 디렉토리는 이미 Docker Compose로 구성되어 있습니다. Docker를 설치 한 후 배포를 실행합니다.