vue.js python Vue3 与 django 进行前后端数据交互之(django向Vue上传数据)

前言：上回做完了前端像后端表单传递数据，现在轮到后端传递数据

实现效果

        前后端都要运行哦

一. 配置说明：

        需要axios库，DjangoRestFramework,django,vue-cli,django-cors-headers

        1.Vue安装：代理门

        2.django安装：代理门

        3.axios安装及注册：

npm install axios

        注册 

//main.ts

import axios from 'axios'

var app = createApp(App);

app.config.globalProperties.$url = 'http://127.0.0.1:8000/';

app.config.globalProperties.$axios = axios;

app.use(router).mount('#app')

        4.drf,corsheaders安装及注册

pip install djangorestframework

pip install django-cors-headers

        注册

# settings.py

INSTALLED_APPS = [

'django.contrib.admin',

'django.contrib.auth',

'django.contrib.contenttypes',

'django.contrib.sessions',

'django.contrib.messages',

'django.contrib.staticfiles',

'toResponse', # 你注册的app 名称

'corsheaders', # 加上

]

MIDDLEWARE = [

'corsheaders.middleware.CorsMiddleware', #加上

'django.middleware.security.SecurityMiddleware',

'django.contrib.sessions.middleware.SessionMiddleware',

'django.middleware.common.CommonMiddleware',

#'django.middleware.csrf.CsrfViewMiddleware', # 注释掉

'django.contrib.auth.middleware.AuthenticationMiddleware',

'django.contrib.messages.middleware.MessageMiddleware',

'django.middleware.clickjacking.XFrameOptionsMiddleware',

]

二.Vue 端设立组件getAxios

        1.设立index.vue 作为views文件

                1.views内容

// HTML部分

// js 部分

        2.在router 中定义

//router目录下的 index.ts

import index from '@/views/index.vue'

const routes: Array = [

{

path: '/',

name: 'index',

component: index,

},

]

        3.在components 中新建文件 getAxios.vue

//HTML部分

// js部分

 三.django 端进行响应

        1.settings 剩余准备工作(ps: rear 是我的项目根目录,toResponse是实现响应的app)

# settings.py

import os

# 下面这些话放在文件末尾

JSON_FILE_PATH = os.path.join(BASE_DIR , 'rear\json') # 定义读取文件的路径

# 设立白名单 运行http://localhost:8080 端访问

CORS_ORIGIN_WHITELIST = [

'http://localhost:8080',

]

        2.在 rear 文件夹下的rear 文件夹中放置你的json文件夹，里面放置自己的json文件(有点小绕)

        3.views准备工作

# toResponse 下的 views.py

from django.shortcuts import render

from rest_framework.views import APIView

from rest_framework.response import Response

from django.http import JsonResponse

from rear import settings

# Create your views here.

class DataTest(APIView):

def get(self, request, *args, **kwargs):

data = getjson()

return JsonResponse(data,safe=False)

def getjson():

files = []

with open(settings.JSON_FILE_PATH + "\红楼梦.json","r",encoding='utf-8') as f:

data = f.read() # 读取该目录下的红楼梦.json文件，可自己改

return data

        4.urls 放置

# rear目录下的 urls.py

from django.contrib import admin

from django.urls import path

from toResponse import views

urlpatterns = [

path('admin/', admin.site.urls),

path('course/', views.DataTest.as_view()),

]

精彩内容

 您阅读本篇文章共花了：