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 definitionINSTALLED_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/#databasesDATABASES = {'default': {'ENGINE': 'django.db.backends.sqlite3','NAME': BASE_DIR / 'db.sqlite3',}
}# Password validation
# https://docs.djangoproject.com/en/3.2/ref/settings/#auth-password-validatorsAUTH_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 = TrueUSE_L10N = TrueUSE_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-fieldDEFAULT_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>

django3，vue前后端分离数据请求相关推荐

phython在file同时写入两个_喜大普奔，两个开源的 Spring Boot + Vue 前后端分离项目可以在线体验了
折腾了一周的域名备案昨天终于搞定了. 松哥第一时间想到赶紧把微人事和 V 部落部署上去,我知道很多小伙伴已经等不及了. 1. 也曾经上过线其实这两个项目当时刚做好的时候,我就把它们部署到服务器上了, ...
基于SpringBoot+Vue前后端分离的在线教育平台项目
基于SpringBoot+Vue前后端分离的在线教育平台项目赠给有缘人,希望能帮助到你!也请不要吝惜你的大拇指,你的Star.点赞将是对我最大的鼓励与支持! 开源传送门: 后台:Gitee | Gi ...
SpringBoot + Vue前后端分离开发：全局异常处理及统一结果封装
SpringBoot + Vue前后端分离开发:全局异常处理及统一结果封装文章目录 SpringBoot + Vue前后端分离开发:全局异常处理及统一结果封装前后端分离开发中的异常处理统一结果封 ...
SpringBoot+vue前后端分离博客项目
SpringBoot+vue前后端分离博客项目 Java后端接口开发 1.前言 2.新建Springboot项目 3.整合mybatis plus 第一步:导入jar包第二步:然后去写配置文件: 第 ...
适合新手拿来练习的springboot+vue前后端分离小Demo
前言: 作者:神的孩子在歌唱大家好,我叫智练习springboot+vue前后端分离的Demo 一. 设计数据库二 . springboot项目创建 2.1 基本配置 2.2 创建dao层三. ...
SpringBoot+Vue前后端分离，使用SpringSecurity完美处理权限问题(六)
当前后端分离时,权限问题的处理也和我们传统的处理方式有一点差异.笔者前几天刚好在负责一个项目的权限管理模块,现在权限管理模块已经做完了,我想通过5-6篇文章,来介绍一下项目中遇到的问题以及我的解决方案 ...
视频教程-SpringBoot+Security+Vue前后端分离开发权限管理系统-Java
SpringBoot+Security+Vue前后端分离开发权限管理系统 10多年互联网一线实战经验,现就职于大型知名互联网企业,架构师, 有丰富实战经验和企业面试经验:曾就职于某上市培训机构数年,独 ...
ssm vue架构图_ssm+vue前后端分离框架整合实现(附源码)
前言本文针对Spring+SpringMVC+Mybatis后台开发框架(基于maven构建)与vue前端框架(基于webpack构建)的项目整合进行介绍,对于ssm和vue单独项目的搭建不作为本文 ...
SpringBoot+MyBatisPlus+Vue 前后端分离项目快速搭建【前端篇】【快速生成后端代码、封装结果集、增删改查、模糊查找】【毕设基础框架】
前后端分离项目快速搭建[前端篇] 后端篇前端篇创建vue项目安装所需工具开始编码 1.在根目录下添加vue.config.js文件 2.编写main.js 3.编写App.vue 4.编写ax ...

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

django3，vue前后端分离数据请求相关推荐

最新文章

热门文章