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.프로젝트 루트 디 렉 터 리 에 들 어가 서 프로젝트 백 엔 드 로 app 을 만 듭 니 다.명령:
cd ulb_manager
python manage.py startapp backend
구조 가 위의 가장 기본 적 인 것 보다 백 엔 드 가 하나 더 많아 졌 다.3.vue-cli 를 사용 하여 프로젝트 전단 으로 vue.js 프로젝트 를 만 듭 니 다.
명령:
vue-init webpack frontend
화면:Project name:(기본 Enter 키)
Project description:(기본 리 턴 키)
Author:(자신의 이름 을 입력 하고 마음대로)
...:(기본 yes 와 리 턴 키 는 잘 모 르 겠 습 니 다.처음 접 촉 했 을 때 인터넷 에서 도 이 물건 을 찾 지 못 하고 모두 기본 또는 Yes 를 선택 하 였 습 니 다)
구조 가 하나 더 생 겼 어 요.frontend.
구조 총화:
프로젝트 루트 디 렉 터 리 는 두 개의 새 폴 더 가 있 습 니 다.하 나 는 backend 이 고 하 나 는 frontend 입 니 다.하 나 는 backend Django 의 app,frontend Vue.js 프로젝트 입 니 다.
4.웹 팩 으로 Vue.js 프로젝트 포장 하기
명령:
cd frontend
npm install
npm run build
5.Django 의 일반 보기 TemplateView 사용 하기프로젝트 루트 디 렉 터 리 아래 urls.py(즉 ulbmanager/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 열기(즉 ulbmanager/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',
],
},
},
]
PS:이전에 django 를 배 웠 는데 settings.py 에서 INSTALLEDAPPS 설정 항목 에 app 을 추 가 했 기 때문에 저 는'backend'를 추 가 했 습 니 다.7.정적 파일 검색 경로 설정
settings.py 열기(ulbmanager/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 홈 페이지 에 로그 인하 여 최신 v 6.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 에 어떻게 쓰 는 지 잠시 알 수 없습니다.
원본 대로 옮 겨 와 서 운행 이 불가능 하기 때문에 수정 되 었 습 니 다.가장 기본 적 인 틀 을 하나 썼 다.머리 없 는 파리 처럼...(클 라 우 드 호스트 도 살 수 없고...초보 자 도 살 필요 가 없다)
Markdown 은 사용 하기에 매우 자 유 롭 고 html 명령 도 호출 할 수 있어 서 매우 재 미 있 습 니 다.아직 정확히 알 지 못 했 지만 도대체 얼마나 호출 할 수 있 는 지,어떤 명령 을 호출 할 수 있 는 지...
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
[백견불여일타/Vue.js] 4장 - 입력 폼 데이터 가져오기v-model 데이터 입력 select 지난 장에서는 v-bind를 이용해서 HTML 태그 속성 값을 Vue로 다루는 법을 배웠습니다. 이번에는 사용자가 입력한 데이터를 Vue로 가져오는 법에 대해 다룹니다. 웹 페...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.