Vscode+Pycharm+Vue.js+WEUI+django火锅(六)Vue调用Django的API

一.可选调用方式

调用API,可以使用vue-resource插件方式

--安装

npm install --save vue-resource

--引入

import VueResource from 'vue-resource'

Vue.use(VueResource)

--调用

this.$http.get('url')

.then (function(response){})

但是据说这个方式存在浏览器兼容性问题,所以还是使用axios 方式。

--安装
npm install axios --save

二.使用百度AI给一个示例

<template>

<div>

<input type="text" v-model="username" placeholder="Username" />

<input type="password" v-model="password" placeholder="Password" />

<button @click="login">Login</button>

</div>

</template>

<script>

import axios from 'axios';

export default {

data() {

return {

username: '',

password: ''

};

},

methods: {

login() {

axios.post('/api/login', {

username: this.username,

password: this.password

})

.then(response => {

// 登录成功的处理逻辑

console.log('Authentication successful', response);

})

.catch(error => {

// 登录失败的处理逻辑

console.error('Authentication failed', error);

});

}

}

};

</script>

三.一般的错误处理

错误1:使用双向绑定v-model时错误:

Cannot read properties of undefined (reading 'username')

TypeError: Cannot read properties of undefined (reading 'username')

检查输入性错误

错误2:Module not found: Error: Can't resolve 'axios' in webpack compiled with 1 error

这是因为axios没有安装成功导致。

PS C:\website\myproject> cnpm install --save axios

错误3:Cannot read properties of undefined (reading 'post')

TypeError: Cannot read properties of undefined (reading 'post')

原因是未在main.js中正确设置vue.prototype.http=axios导致

四.大大的错误:跨域错误

直接访问api是可以返回内容的,但是使用axios调用就出错。

返回错误信息:AxiosError: Network Error,在浏览器控制台中可以看到详细的错误信息:
Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource

典型的跨域错误。

解决方法安装django-cors-headers 并配置:
a .pip install django-cors-headers
b .应用'corsheaders',加入到INSTALLED_APPS
c .中间件 'corsheaders.middleware.CorsMiddleware' 加入MIDDLEWARE
d.黑白名单中CORS_ORIGIN_WHITELIST 添加域名。

结果安装时,嫌弃Django的版本太低,但是一升级就出新问题了,猪圈塌了,于是又重新降回老版本:

'WSGIRequest' object has no attribute 'get'

'WSGIRequest' object has no attribute 'session'

原因是新版本Django配置文件中用MIDDLEWARE_CLASSES,老版本用MIDDLEWARE,于是照猫画虎,两个都留着。

MIDDLEWARE_CLASSES = [

'django.middleware.security.SecurityMiddleware',

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

'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',

]

MIDDLEWARE = [

'django.middleware.security.SecurityMiddleware',

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

#'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',

]

新问题解决了,但是跨域的问题还是没有解决。

最后只能通过返回时,指定Access-Control-Allow-origin ='*'的方式。

result = JsonResponse(jsondict)

result['Access-Control-Allow-origin'] = "*"

return result

原因肯定是django-cors-headers哪里没有设置好,先不管了,有路走就继续往前走,以后再来收拾。

相关推荐
清幽竹客20 分钟前
vue-37(模拟依赖项进行隔离测试)
前端·vue.js
vvilkim20 分钟前
Nuxt.js 页面与布局系统深度解析:构建高效 Vue 应用的关键
前端·javascript·vue.js
paopaokaka_luck22 分钟前
基于SpringBoot+Vue的电影售票系统(协同过滤算法)
vue.js·spring boot·后端
滿24 分钟前
Vue3 父子组件表单滚动到校验错误的位置实现方法
前端·javascript·vue.js
专注VB编程开发20年24 分钟前
javascript的类,ES6模块写法在VSCODE中智能提示
开发语言·javascript·vscode
要加油哦~6 小时前
vue | 插件 | 移动文件的插件 —— move-file-cli 插件 的安装与使用
前端·javascript·vue.js
小林学习编程6 小时前
Springboot + vue + uni-app小程序web端全套家具商场
前端·vue.js·spring boot
巴里巴气9 小时前
2025.1版本PyCharam找不到已存在的conda虚拟环境
pycharm·conda
影子信息10 小时前
vue 前端动态导入文件 import.meta.glob
前端·javascript·vue.js
青阳流月10 小时前
1.vue权衡的艺术
前端·vue.js·开源