Python Django+Vue前后端分离开发_python前后端分离开发vue+django

1. 创建Django项目

django-admin startproject ulb_manager
1

2. 创建应用(backend)

cd ulb_manager
python manage.py startapp backend
1
2

3. 使用vue-cli创建vue项目frontend

vue-init webpack frontend
1

4. 使用vue进行项目开发，项目开发完后打包

cd frontend
cnpm run build
1
2

打包后，会生成dist文件，内有index.html和文件夹static
5. 配置Django指向index.html
配置ulb_manager/urls.py文件

from django.views.generic import TemplateView  #添加

ulpatterns = [
	path('admin/',admin.site.urls),
	path('index/',TemplateView.as_view(template_name="index.html")), #添加
]
1
2
3
4
5
6

配置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"),
]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

6. 启动Django项目，访问/index便能打开打包好的vue项目

python manage.py runserver
1

7. Django进行get/post请求
在Django的backend目录下新建urls.py文件

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

修改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")
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

8. 配置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'))   #添加
]
1
2
3
4
5
6
7
8
9
10

9. 在vue中请求接口
配置axios
https://blog.csdn.net/qq_39785489/article/details/80111141

在组件中使用

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'
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

请求成功

转载https://blog.csdn.net/qq_39785489/article/details/82751868