django3，vue前后端分离数据请求

2024-02-22 23:41:04

下面使用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>

码农公寓

相关文章