Vue.js 및 Django를 사용하여 프런트엔드 및 백엔드 분리 프로젝트 구축 사례에 대한 자세한 설명

이 글은 Django+Vue.js가 프론트엔드와 백엔드 분리 프로젝트를 구축하는 예를 주로 소개합니다. 관심이 있다면 더 자세히 알아볼 수 있습니다. 마크다운 사용법을 배웠습니다.

작가님이 쓰레기라 다 혼자 배웠기 때문에 시스템이나 체계적인 학습이 없습니다. 여기서 주요 목적은 프로젝트의 프런트엔드와 백엔드를 분리하는 것입니다.

컴퓨터에 필요한 django와 vue.js가 이미 있다고 가정합니다. 그렇지 않은 경우 아래로 스크롤하여 vue.js 설치 과정을 확인하세요. Django에 대해서는 이전에 작성되었으므로 자세히 설명하지 않겠습니다.

1. 일반적으로 프론트엔드와 백엔드 분리 프로젝트 프로세스를 빌드합니다.

1. django 프로젝트 생성

명령:

django-admin startproject ulb_manager

구조:

├── manage.py
└── ulb_manager
  ├── __init__.py
  ├── settings.py
  ├── urls.py
  └── wsgi.py

2. 디렉터리를 만들고 앱을 프로젝트로 생성합니다. 최종

명령:

cd ulb_manager
python manage.py startapp backend

구조는 위보다 더 기본적이며 백엔드가 하나 더 있습니다.

3. vue-cli를 사용하여 vue.js 프로젝트를 프로젝트 전면으로 생성합니다. end

명령:

vue-init webpack frontend

인터페이스:

프로젝트 이름: (기본 Enter 키)

프로젝트 설명: (기본 Enter 키)

작성자: (이름을 입력하세요. 자유롭게)

. ..: (기본값은 yes와 Enter 키인데 지금은 이해가 안 가네요. 방금 연락하기 시작했는데 온라인에서 이 내용을 찾을 수 없어서 그냥 기본값이나 Yes를 선택했습니다)

구조에는 추가 프론트엔드가 있습니다

구조 요약:

프로젝트 루트 디렉토리에는 두 개의 새로운 폴더가 있습니다. 하나는 백엔드이고 다른 하나는 프론트엔드입니다. 백엔드는 Django 앱, 프론트엔드 Vue.js 프로젝트

4. webpack을 사용하여 Vue.js 프로젝트를 패키징합니다.

명령:

cd frontend
npm install
npm run build

5. Django의 일반 뷰 TemplateView

는 프로젝트 루트의 urls.py(예: ulb_manager/urls.py)에 있습니다. 디렉터리를 만들고 유니버설 뷰를 사용하여 가장 간단한 템플릿 컨트롤러를 만듭니다.

코드:

urlpatterns = [
  url(r'^admin/', admin.site.urls),
  url(r'^$',TemplateView.as_view(template_name="index.html")),
  #url(r'^api/',include('backend.urls', namespace='api'))
  #最后一行代码我注释掉，因为运行报错：Error:No module named 'backend.urls',暂时解决不掉，但是我运行的时候，注释掉这行代码，是能正常运行的。
]

6. Django 프로젝트의 템플릿 검색 경로를 구성합니다

settings.py(예: ulb_manager/settings.py)를 열어 TEMPLATES 구성 항목을 찾아 다음과 같이 수정합니다.

TEMPLATES = [
  {
    'BACKEND': 'django.template.backends.django.DjangoTemplates',
    #'DIRS': [],
    'DIRS':['frontend/dist'],
    'APP_DIRS': True,
    'OPTIONS': {
      'context_processors': [
        'django.template.context_processors.debug',
        'django.template.context_processors.request',
        'django.contrib.auth.context_processors.auth',
        'django.contrib.messages.context_processors.messages',
      ],
    },
  },
]

추신: 이전에 django를 배웠는데, settings.py 아래 INSTALLED_APPS 구성 항목에 앱을 추가해야 해서 '백엔드'를 직접 추가했습니다.

7. 정적 파일 검색 경로를 구성합니다.

settings.py(ulb_manager/settings.py)를 열고 STATICFILES_DIRS 구성 항목을 찾습니다.

# Add for vue.js
STATICFILES_DIRS = [
  os.path.join(BASE_DIR, "frontend/dist/static"),
]

그렇지 않은 경우 직접 추가합니다.

이 시점에서 django 프로젝트를 실행하면 정상적으로 실행될 수 있습니다. 일반적인 실행 인터페이스는 다음과 같습니다.

실행 인터페이스

둘째, vue.js를 설치합니다컴퓨터에 vue.js가 없는 경우 vue를 설치하는 과정은 다음과 같습니다. js:

1 .node.js

vue.js의 권장 설치 환경은 node.js이므로 node.js를 먼저 설치했습니다.

node.js 공식 웹사이트에 로그인하여 최신 v6.11.1 버전을 다운로드하세요.

2.npm

은 Node.js에 통합되어 있으므로 설치할 필요가 없습니다.

3.cnpm

명령줄에 다음 명령을 입력하세요.

npm install -g cnpm --registry=http://registry.npm.taobao.org

설치가 완료될 때까지 기다리세요.

4. vue-cli 스캐폴딩 구축 도구를 설치합니다.

명령줄에 다음 명령을 입력합니다.

npm install -g vue-cli

설치가 완료될 때까지 기다립니다.

이 시점에서 vue-cli가 설치되었습니다.

PS: 마크다운에서 파일의 디렉터리 트리 구조를 어떻게 작성하는지 아직 모르겠습니다.

원본대로 정확하게 복사하면 전혀 동작하지 않아서 수정했습니다. 기본 프레임워크를 작성했습니다. 머리 없는 파리처럼... (그리고 클라우드 호스트를 살 여유가 없어요... 초보자가 구입할 필요도 없습니다.)

Markdown은 사용하기 매우 자유롭고 일부 html 명령을 호출할 수도 있습니다. 아직 사용할 수는 없지만 매우 흥미롭습니다. 호출할 수 있는 명령의 수와 명령을 알아보세요...

위 내용은 Vue.js 및 Django를 사용하여 프런트엔드 및 백엔드 분리 프로젝트 구축 사례에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!