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哪里没有设置好,先不管了,有路走就继续往前走,以后再来收拾。

相关推荐
qq_424409193 小时前
uniapp的app项目,某个页面长时间无操作,返回首页
前端·vue.js·uni-app
我在北京coding3 小时前
element el-table渲染二维对象数组
前端·javascript·vue.js
布兰妮甜3 小时前
Vue+ElementUI聊天室开发指南
前端·javascript·vue.js·elementui
SevgiliD3 小时前
el-button传入icon用法可能会出现的问题
前端·javascript·vue.js
我在北京coding3 小时前
Element-Plus-全局自动引入图标组件,无需每次import
前端·javascript·vue.js
鱼 空3 小时前
解决el-table右下角被挡住部分
javascript·vue.js·elementui
01传说5 小时前
vue3 配置安装 pnpm 报错 已解决
java·前端·vue.js·前端框架·npm·node.js
sunbyte7 小时前
50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | DoubleVerticalSlider(双垂直滑块)
前端·javascript·css·vue.js·vue
拾光拾趣录8 小时前
虚拟DOM
前端·vue.js·dom
合作小小程序员小小店8 小时前
web网页,在线%食谱推荐系统%分析系统demo,基于vscode,uniapp,vue,java,jdk,springboot,mysql数据库
vue.js·spring boot·vscode·spring·uni-app