參考連結：
1. 安裝python與vue
2. 建立Django項目
django-admin startproject ulb_manager
3. 進入項目并建立名為backeng的app
cd ulb_manager
python manage.py startapp backend
4. 使用vue-cli建立vue項目 frontend
vue-init webpack frontend
5.打包vue目錄
cd frontend
npm install
npm run build
打包完成後會生成dist檔案 内有index.html和檔案夾static
6.配置Django指向index.html
配置ulb_manager/urls.py檔案
from django.views.generic import TemplateView // 添加
urlpatterns = [
path('admin/', admin.site.urls),
path('index/', TemplateView.as_view(template_name="index.html")), // 添加
]
配置ulb_manager/settings.py檔案
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',
],
},
},
]
STATICFILES_DIRS = [ // 添加
os.path.join(BASE_DIR, "frontend/dist/static"),
]
7. 這時啟動Django項目 并通路/index便能打開打包好的vue項目
python manage.py runserver
8. Django添加接口
在Django的backend目錄下建立urls.py檔案
from django.urls import path
from . import views
urlpatterns = [
path('testapi', views.testapi, name='testapi'),
]
修改backend目錄下views.py檔案
from django.shortcuts import render
# Create your views here.
from django.http import HttpResponse
import json
# 解決前端post請求 csrf問題
from django.views.decorators.csrf import csrf_exempt
@csrf_exempt
def testapi(request):
print(request)
print(request.method)
if request.method == "GET":
print(request.GET.get('aa'))
resp = {'errorcode': 100, 'type': 'Get', 'data': {'main': request.GET.get('aa')}}
return HttpResponse(json.dumps(resp), content_type="application/json")
else:
print(request.POST)
print(request.body)
str1=str(request.body, encoding = "utf-8")
data=eval(str1)
print(data)
print(data['aa'])
print(type(request.body))
resp = {'errorcode': 100, 'type': 'Post', 'data': {'main': data['aa']}}
return HttpResponse(json.dumps(resp), content_type="application/json")
配置ulb_manager/urls.py檔案
from django.contrib import admin
from django.urls import include, path // 添加
from django.views.generic import TemplateView
urlpatterns = [
path('admin/', admin.site.urls),
path('index/', TemplateView.as_view(template_name="index.html")),
path('api/', include('backend.urls')) // 添加
]
這時接口就可以通路到了
9. 開發環境跨域
前端編輯時依舊使用npm run dev 這時請求Django接口可能會出現跨域問題
安裝django-cors-headers
pip install django-cors-headers
配置ulb_manager/settings.py檔案
MIDDLEWARE = [
'django.middleware.security.SecurityMiddleware',
'django.contrib.sessions.middleware.SessionMiddleware',
'corsheaders.middleware.CorsMiddleware', // 添加
'django.middleware.common.CommonMiddleware',
'django.middleware.csrf.CsrfViewMiddleware',
'django.contrib.auth.middleware.AuthenticationMiddleware',
'django.contrib.messages.middleware.MessageMiddleware',
'django.middleware.clickjacking.XFrameOptionsMiddleware',
]
CORS_ORIGIN_ALLOW_ALL = True // 添加
10. 在vue中請求接口
配置axios
在組建中使用
import {post,get,patch,put} from '../http'
export default {
name: 'HelloWorld',
mounted() {
// get('http://localhost:8000/api/testapi?aa=bb')
// .then((response) => {
// console.log(response)
// })
post('http://localhost:8000/api/testapi',{"aa": 'bb'})
.then((response) => {
console.log(response)
console.log(response.data.main)
})
},
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
}
}
請求成功