前后端分离的跨域问题
1.后端
安装插件:pip install django-cors-headers
修改配置信息:
1、注册
INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'rest_framework', # drf框架
'corsheaders', # 跨域
'myapp', # 注册自定义应用
]
2、添加中间键
MIDDLEWARE = [
'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',
'corsheaders.middleware.CorsMiddleware', # 添加跨域中间件
]
3、配置参数,允许所有源访问
CORS_ORIGIN_ALLOW_ALL = True
2、前端
使用axios之前需要安装----npm install axios --save
mounted(){
get("people/")
.then((result) => {
this.peoplelist = result.data
}).catch((err) => {
console.log(err)
});
}
# 获取后端配置路由的数据
vue数据处理
vue获取数据进行渲染删除
获取数据:
mounted(){
# 挂载
Axios.get('http://127.0.0.1:8000/book/')
.then((resp) => {
this.list = resp.data
}).catch((err) => {
console.log(err)
});
}
获取数据是通过get的resp传递数据
删除数据:
delBook(id){
Axios.delete('http://127.0.0.1:8000/book/'+id+'/')
.then(resp => {
console.log(resp.data)
}).catch((err) => {
console.log(err)
});
}
通过路由将需要删除的id传递到后端进行删除操作
添加数据:
btn(){
// 2. 定义方法, 使用axios发送post请求,并携带参数
Axios.post('http://127.0.0.1:8000/course/', {'cname': this.cname, 'stage': this.stage})
.then(resp => {
// 添加成功,输出响应数据
console.log(resp.data)
})
.catch(err => {
// 添加失败,输出错误信息
console.log(err.response.data)
})
}
添加是post请求后边进行传参 将需要添加的数据传递到后端进行添加
修改数据:
updateBook(){
var data ={"title":this.data.title,"price":this.data.price}
Axios.put('http://127.0.0.1:8000/book/'+this.id+'/',data)
.then(resp => {
// 添加成功,输出响应数据
console.log(resp.data)
})
.catch(err => {
// 添加失败,输出错误信息
console.log(err.response.data)
})
}
修改数据需要传递2个内容 1、通过路由将需要修改的id传递 2、将修改后的内容通过传参传递
如何实现前后端分离情况下的状态保持
localStorage.setItem('user', this.username) // 用户名存入localStorage,以做状态保持
let username = localStorage.getItem('user') // 取出user信息,可以判断用户是否登录