django3，vue前后端分离数据请求
作者：互联网
下面使用vue2的写法，因为vue3也支持vue2的编写方法
运行django后端项目，端口需要设置为和前端项目不同
(luichun) [dalaojun@localhost dalaojun]$ python manage.py runserver 127.0.0.1:9000
运行前端项目vue,然后选中需要启动的项目，点击运行
[dalaojun@localhost django_luichun]$ vue ui
图片的路径为http://127.0.0.1:9000/upload/001.png
App.vue文件的内容修改为
<template>
<div id="one">
<img src="http://127.0.0.1:9000/upload/001.png" alt="">
<h1>Hello World</h1>
</div>
</template>
<style>
#one {
width: 300px;
height:200px;
box-shadow: 0 2px 12px 0 #00000060;
margin: 0 auto;
}
</style>
则可以在http://localhost:8080/#/中看到以下页面
django后端向vue前端传输文字数据需要使用axios
安装axios插件,在右上角点击安装依赖，选择开发依赖，然后在搜索框中搜索axios，点击下方弹出来的axios，最后点击右下角的安装
【确定是不是官方包，可以点击查看详情，如果打开的网址为https://github.com/axios/axios，则表示为官方包】
【安装的位置默认为node_modules文件夹下】
配置App.vue文件添加axios请求的内容
<template>
<div id="one">
<img src="http://127.0.0.1:9000/upload/001.png" alt="">
<h1>Hello World</h1>
</div>
</template>
<script>
//axios导入
import axios from 'axios';
export default {
data() {
return{
//定义一个变量text【text:''】表示为字符串格式
text:''
}
},
//定义生命周期 mounted(){}，表示当用户浏览到这个页面的前一刻javascript脚本需要提前执行的命令， this.getData()表示这个export default 中的getData()函数
mounted() {
this.getData()
},
//在methods中定义getData()函数
methods:{
//获取数据函数
getData() {
//下面这个axios()函数，里面需要传入参数，参数为一个对象参数，需要用{}来括起来
//method为请求方式 get post
//url为后端的请求地址
//data为向url地址请求时需要传过去的参数，这里暂时不需要可以删除【data: {id:requestUrl}】
//最后一个参数不需要【,】结尾
axios({
method:'get',
url: 'http://127.0.0.1:9000/api/'
}).then((res)=>{console.log(res)})
}
},
}
</script>
<style>
#one {
width: 300px;
height:200px;
box-shadow: 0 2px 12px 0 #00000060;
margin: 0 auto;
}
</style>
这时，这两个项目都是在运行中，当浏览【http://localhost:8080/#/】域名时，浏览器会提示，不支持跨域，所以没有把【http://127.0.0.1:9000/api/】中的数据展示出来，该数据定义的展示是在console中打印，因为浏览器它自带【跨域拦截cors】
配置可以跨域，则需要配置后端的django，给django添加配置
安装django-cors-headers插件【django-cors-headers 3.7.0】
#下面的地址为官方安装包，里面介绍了安装以及配置详情
https://pypi.org/project/django-cors-headers/
安装django-cors-headers插件需要退出阿django服务
继续在虚拟环境中安装,再启动django服务
(luichun) [dalaojun@localhost dalaojun]$ python -m pip install django-cors-hears
(luichun) [dalaojun@localhost dalaojun]$ python manage.py runserver 127.0.0.1:9000
配置好django项目中settings.py文件：顺序如下
INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
#添加restframework
'rest_framework',
#添加'corsheaders',
'corsheaders',
#添加新键的app应用
'dalao',
]
MIDDLEWARE = [
'django.middleware.security.SecurityMiddleware',
'django.contrib.sessions.middleware.SessionMiddleware',
#corsheaders添加
'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',
]
#下面的配置添加再setting.py文件中的最下面【大约是第140行之后就没有其它配置了】
#下面的配置只是在本地开发环境中的设置
#前端的项目地址是"http://localhost:8080"
#上线需要按照官方配置补全
#允许所有域名跨域，一般不要这么做
#
#指定允许的跨域ip
CORS_ALLOWED_ORIGINS = [
"http://localhost:8080",
"http://www.luichun.com"
#上面的是我的域名
]
#添加允许的请求方法【增删改查】
CORS_ALLOW_METHODS = [
'DELETE',
'GET',
'OPTIONS',
'PATCH',
'POST',
'PUT',
]
#允许的请求头
CORS_ALLOW_HEADERS = [
'accept',
'accept-encoding',
'authorization',
'content-type',
'dnt',
'origin',
'user-agent',
'x-csrftoken',
'x-requested-with',
]
现在可以在前端项目中看到django后端发送过来的数据了
若要把这里面的数据渲染到页面则需要配置App.vue
settings.py中的配置如下
#允许访问本网站服务的域名
ALLOWED_HOSTS = []
# Application definition
INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
#添加restframework
'rest_framework',
#添加'corsheaders',
'corsheaders',
#添加新键的app应用
'dalao',
]
MIDDLEWARE = [
'django.middleware.security.SecurityMiddleware',
'django.contrib.sessions.middleware.SessionMiddleware',
#corsheaders添加
'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',
]
ROOT_URLCONF = 'dalaojun.urls'
TEMPLATES = [
{
'BACKEND': 'django.template.backends.django.DjangoTemplates',
'DIRS': [],
'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',
],
},
},
]
WSGI_APPLICATION = 'dalaojun.wsgi.application'
# Database
# https://docs.djangoproject.com/en/3.2/ref/settings/#databases
DATABASES = {
'default': {
'ENGINE': 'django.db.backends.sqlite3',
'NAME': BASE_DIR / 'db.sqlite3',
}
}
# Password validation
# https://docs.djangoproject.com/en/3.2/ref/settings/#auth-password-validators
AUTH_PASSWORD_VALIDATORS = [
{
'NAME': 'django.contrib.auth.password_validation.UserAttributeSimilarityValidator',
},
{
'NAME': 'django.contrib.auth.password_validation.MinimumLengthValidator',
},
{
'NAME': 'django.contrib.auth.password_validation.CommonPasswordValidator',
},
{
'NAME': 'django.contrib.auth.password_validation.NumericPasswordValidator',
},
]
# Internationalization
# https://docs.djangoproject.com/en/3.2/topics/i18n/
LANGUAGE_CODE = 'en-us'
TIME_ZONE = 'UTC'
USE_I18N = True
USE_L10N = True
USE_TZ = True
# Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/3.2/howto/static-files/
STATIC_URL = '/static/'
#添加用户可以上传图片的文件夹 upload文件夹，这个是在dalaojun子文件同一个级别下新建的upload文件夹
MEDIA_URL = '/upload/'
#upload的路径,BASE_DIR是主项目dalaojun文件夹的路径
MEDIA_ROOT = BASE_DIR / 'upload'
# Default primary key field type
# https://docs.djangoproject.com/en/3.2/ref/settings/#default-auto-field
DEFAULT_AUTO_FIELD = 'django.db.models.BigAutoField'
#指定允许的跨域ip
CORS_ALLOWED_ORIGINS = [
"http://localhost:8080",
"http://www.luichun.com"
]
#添加允许的请求方法【增删改查】
CORS_ALLOW_METHODS = [
'DELETE',
'GET',
'OPTIONS',
'PATCH',
'POST',
'PUT',
]
#允许的请求头
CORS_ALLOW_HEADERS = [
'accept',
'accept-encoding',
'authorization',
'content-type',
'dnt',
'origin',
'user-agent',
'x-csrftoken',
'x-requested-with',
]
dalao文件夹的views.py的配置
from django.shortcuts import render
#添加HttpResponse
from django.http import HttpResponse
#添加restframework,的api_view装饰器
from rest_framework.decorators import api_view
#添加response 把数据以json格式发送回去，响应
from rest_framework.response import Response
# Create your views here.
#书写定义的视图返回规则
def listorders(request):#request是django中Httpquest对象，包含请求中的信息
return HttpResponse("文字内容")
@api_view(['GET'])
def first_api(request):
return Response({'data':'ok'})
App.vue的配置
<template>
<div id="one">
<img src="http://127.0.0.1:9000/upload/001.png" alt="">
<h1>Hello World</h1>
<h1>{{ text }}</h1>
<!-- 使用双花括号来变量括起来，进行渲染，定义的变量在下面 -->
</div>
</template>
<script>
//axios导入
import axios from 'axios';
export default {
data() {
return{
//定义一个变量text【text:''】表示为字符串格式
text:''
}
},
//定义生命周期 mounted(){}，表示当用户浏览到这个页面的前一刻javascript脚本需要提前执行的命令， this.getData()表示这个export default 中的getData()函数
mounted() {
this.getData()
},
//在methods中定义getData()函数
methods:{
//获取数据函数
getData() {
//下面这个axios()函数，里面需要传入参数，参数为一个对象参数，需要用{}来括起来
//method为请求方式 get post
//url为后端的请求地址
//data为向url地址请求时需要传过去的参数，这里暂时不需要可以删除【data: {id:requestUrl}】
//最后一个参数不需要【,】结尾
axios({
method:'get',
url: 'http://127.0.0.1:9000/api/'
}).then((res)=>{
console.log(res)
//把里面的数据赋予给变量text
//django项目中的dalao app里面的views 定义的是
//@api_view(['GET'])
//def first_api(request):
//return Response({'data':'ok'})
//下方res.data.data，前面的data表示为res里面的数据,后面的data表示为字典的key，这里传输的字典例子只有一个key，获取该key里面的值，赋予变量
this.text = res.data.data
})
}
},
}
</script>
<style>
#one {
width: 300px;
height:200px;
box-shadow: 0 2px 12px 0 #00000060;
margin: 0 auto;
}
</style>
标签：axios,http,请求,middleware,django,vue,contrib,django3,data 来源： https://blog.csdn.net/weixin_47021806/article/details/118404806