Vue3 与 django 进行前后端数据交互之(django向Vue上传数据)
vue
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
项目地址:https://gitcode.com/gh_mirrors/vu/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部分
<template>
<div>
<get-axios/>
</div>
</template>
// js 部分
<script>
import getAxios from '../components/getAxios';
export default {
components: {
getAxios // 使用getAxios组件
},
data() {
return {
}
}
}
</script>
2.在router 中定义
//router目录下的 index.ts
import index from '@/views/index.vue'
const routes: Array<RouteRecordRaw> = [
{
path: '/',
name: 'index',
component: index,
},
]
3.在components 中新建文件 getAxios.vue
//HTML部分
<template>
<div >
<button class="btn btn-primary" v-on:click="initCourse()">getaxios</button>
</div>
</template>
// js部分
<script>
export default {
name: "getAxios",
data() {
return {
file: {}, // 文件对象,最终会上传到该对象中
}
},
methods: {
initCourse:function(){
var that = this; // 在axios 中this指向会变,将vm 对象用that保留
console.log(that.$url + "course/") // 显示 http://127.0.0.1:8000/course/
this.$axios.request({
url:that.$url + "course/",
method:"GET"
}).then(function(ret){
//ajax请求发送成功后获取的请求
console.log( ret.data);
that.file = ret.data;
return ret.data;
}).catch(function(ret){
//失败或者异常之后的内容
console.log(ret)
})
}
}
}
</script>
三.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()),
]
GitHub 加速计划 / vu / vue
207.54 K
33.66 K
下载
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支:2 个月前 )
73486cb5
* chore: fix link broken
Signed-off-by: snoppy <michaleli@foxmail.com>
* Update packages/template-compiler/README.md [skip ci]
---------
Signed-off-by: snoppy <michaleli@foxmail.com>
Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 4 个月前
e428d891
Updated Browser Compatibility reference. The previous currently returns HTTP 404. 5 个月前
更多推荐
已为社区贡献1条内容
所有评论(0)