python 記錄Django與Vue前后端分離項目搭建

參考鏈接：

https://blog.csdn.net/liuyukuan/article/details/70477095

 

1. 安裝python與vue

2. 創建Django項目

django-admin startproject ulb_manager

3. 進入項目並創建名為backeng的app

1.  
   cd ulb_manager
2.  
   python manage.py startapp backend

4. 使用vue-cli創建vue項目 frontend

vue-init webpack frontend

5.打包vue目錄

1.  
   cd frontend
2.  
   npm install
3.  
   npm run build

打包完成后會生成dist文件 內有index.html和文件夾static  

6.配置Django指向index.html

 配置ulb_manager/urls.py文件

1.  
    
2.  
   from django.views.generic import TemplateView // 添加
3.  
    
4.  
   urlpatterns = [
5.  
   path( 'admin/', admin.site.urls),
6.  
   path( 'index/', TemplateView.as_view(template_name="index.html")), // 添加
7.  
   ]

配置ulb_manager/settings.py文件

1.  
   TEMPLATES = [
2.  
   {
3.  
   'BACKEND': 'django.template.backends.django.DjangoTemplates',
4.  
   # 'DIRS': [],
5.  
   'DIRS': ['frontend/dist'], // 添加
6.  
   'APP_DIRS': True,
7.  
   'OPTIONS': {
8.  
   'context_processors': [
9.  
   'django.template.context_processors.debug',
10.  
    'django.template.context_processors.request',
11.  
    'django.contrib.auth.context_processors.auth',
12.  
    'django.contrib.messages.context_processors.messages',
13.  
    ],
14.  
    },
15.  
    },
16.  
    ]
17.  
     
18.  
    STATICFILES_DIRS = [ // 添加
19.  
    os.path.join(BASE_DIR, "frontend/dist/static"),
20.  
    ]

7. 這時啟動Django項目 並訪問/index便能打開打包好的vue項目

python manage.py runserver

8. Django添加接口

    在Django的backend目錄下新建urls.py文件

1.  
   from django.urls import path
2.  
    
3.  
   from . import views
4.  
    
5.  
   urlpatterns = [
6.  
   path( 'testapi', views.testapi, name='testapi'),
7.  
   ]

    修改backend目錄下views.py文件

1.  
   from django.shortcuts import render
2.  
    
3.  
   # Create your views here.
4.  
   from django.http import HttpResponse
5.  
   import json
6.  
    
7.  
   # 解決前端post請求 csrf問題
8.  
   from django.views.decorators.csrf import csrf_exempt
9.  
   @csrf_exempt
10.  
     
11.  
    def testapi(request):
12.  
    print(request)
13.  
    print(request.method)
14.  
    if request.method == "GET":
15.  
    print(request.GET.get( 'aa'))
16.  
    resp = { 'errorcode': 100, 'type': 'Get', 'data': {'main': request.GET.get('aa')}}
17.  
    return HttpResponse(json.dumps(resp), content_type="application/json")
18.  
    else:
19.  
    print(request.POST)
20.  
    print(request.body)
21.  
    str1=str(request.body, encoding = "utf-8")
22.  
    data=eval(str1)
23.  
    print(data)
24.  
    print(data[ 'aa'])
25.  
    print(type(request.body))
26.  
    resp = { 'errorcode': 100, 'type': 'Post', 'data': {'main': data['aa']}}
27.  
    return HttpResponse(json.dumps(resp), content_type="application/json")

配置ulb_manager/urls.py文件

1.  
   from django.contrib import admin
2.  
   from django.urls import include, path // 添加
3.  
   from django.views.generic import TemplateView
4.  
    
5.  
    
6.  
   urlpatterns = [
7.  
   path( 'admin/', admin.site.urls),
8.  
   path( 'index/', TemplateView.as_view(template_name="index.html")),
9.  
   path( 'api/', include('backend.urls')) // 添加
10.  
    ]

這時接口就可以訪問到了

9. 開發環境跨域

    前端編輯時依舊使用npm run dev 這時請求Django接口可能會出現跨域問題   

    安裝django-cors-headers

pip install django-cors-headers

    配置ulb_manager/settings.py文件

1.  
   MIDDLEWARE = [
2.  
   'django.middleware.security.SecurityMiddleware',
3.  
   'django.contrib.sessions.middleware.SessionMiddleware',
4.  
   'corsheaders.middleware.CorsMiddleware', // 添加
5.  
   'django.middleware.common.CommonMiddleware',
6.  
   'django.middleware.csrf.CsrfViewMiddleware',
7.  
   'django.contrib.auth.middleware.AuthenticationMiddleware',
8.  
   'django.contrib.messages.middleware.MessageMiddleware',
9.  
   'django.middleware.clickjacking.XFrameOptionsMiddleware',
10.  
    ]
11.  
     
12.  
    CORS_ORIGIN_ALLOW_ALL = True // 添加

10. 在vue中請求接口

    配置axios

    https://blog.csdn.net/qq_39785489/article/details/80111141

    在組建中使用

1.  
   import {post,get,patch,put} from '../http'
2.  
    
3.  
   export default {
4.  
   name: 'HelloWorld',
5.  
   mounted() {
6.  
   // get('http://localhost:8000/api/testapi?aa=bb')
7.  
   // .then((response) => {
8.  
   // console.log(response)
9.  
   // })
10.  
    post( 'http://localhost:8000/api/testapi',{"aa": 'bb'})
11.  
    .then( (response) => {
12.  
    console.log(response)
13.  
    console.log(response.data.main)
14.  
    })
15.  
    },
16.  
    data () {
17.  
    return {
18.  
    msg: 'Welcome to Your Vue.js App'
19.  
    }
20.  
    }
21.  
    }

  請求成功