一.可选调用方式
调用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哪里没有设置好，先不管了，有路走就继续往前走，以后再来收拾。