vue前后端分离
axios前后端交互
安装
一定要安装到`项目目录下
cnpm install axios
配置
在main.js中配置
//配置axios
import axios from 'axios'
Vue.prototype.$axios = axios;
在组件中发送ajax请求
created(){
//发送axios请求
this.$axios({
url:this.$settings.base_url+'/cars/',
method:'get',
params:{
}
}).then(response => { //请求成功成功之后执行
this.cars = response.data;
}).catch(error => { //当网络状态码为4xx,5xx时执行
console.log(error.response)
});
},
错误信息都在error.response中
params:{}url拼接参数:任何请求都可以携带
data:{}数据包参数 get请求无法携带data参数
CORS跨域问题(同源策略)
django默认只对同源做响应(同源策略),存在跨域问题.
同源
http协议相同,ip服务器地址相同,app应用端口相同,三个都相同才叫同源.
跨域
http,ip,post三个有一个不同,就是跨域.
解决跨域问题
1)Django按照cors模块:
>: pip install django-cors-headers
2)在settings注册模块,配置中间件:
INSTALLED_APPS = [
...
'corsheaders'
]
MIDDLEWARE = [
...
'corsheaders.middleware.CorsMiddleware'
]
3)在settings开启允许跨越:
CORS_ORIGIN_ALLOW_ALL = True
js全局配置
assets的js文件下设置settings全局js文件
export default{
base_url:'http://127.0.0.1:8000'
}
mian.js中配置全局js
//配置全局js
import settings from '@/assets/js/settings'
Vue.prototype.$settings = settings;
然后就可以在全局使用
this.$axios({
url:this.$settings.base_url + `/car/${pk}/`
}).then(response =>{
this.car = response.data
}).catch(error =>{
console.log(error.response)
})
vue前后端分离的更多相关文章
- 解决Django+Vue前后端分离的跨域问题及关闭csrf验证
前后端分离难免要接触到跨域问题,跨域的相关知识请参:跨域问题,解决之道 在Django和Vue前后端分离的时候也会遇到跨域的问题,因为刚刚接触Django还不太了解,今天花了好长的时间,查阅了 ...
- Flask + vue 前后端分离的 二手书App
一个Flask + vue 前后端分离的 二手书App 效果展示: https://blog.csdn.net/qq_42239520/article/details/88534955 所用技术清单 ...
- 喜大普奔,两个开源的 Spring Boot + Vue 前后端分离项目可以在线体验了
折腾了一周的域名备案昨天终于搞定了. 松哥第一时间想到赶紧把微人事和 V 部落部署上去,我知道很多小伙伴已经等不及了. 1. 也曾经上过线 其实这两个项目当时刚做好的时候,我就把它们部署到服务器上了, ...
- 两个开源的 Spring Boot + Vue 前后端分离项目
折腾了一周的域名备案昨天终于搞定了. 松哥第一时间想到赶紧把微人事和 V 部落部署上去,我知道很多小伙伴已经等不及了. 1. 也曾经上过线 其实这两个项目当时刚做好的时候,我就把它们部署到服务器上了, ...
- beego-vue URL重定向(beego和vue前后端分离开发,beego承载vue前端分离页面部署)
具体过程就不说,是搞这个的自然会动,只把关键代码贴出来. beego和vue前后端分离开发,beego承载vue前端分离页面部署 // landv.cnblogs.com //没有授权转载我的内容,再 ...
- SpringBoot+Vue前后端分离,使用SpringSecurity完美处理权限问题
原文链接:https://segmentfault.com/a/1190000012879279 当前后端分离时,权限问题的处理也和我们传统的处理方式有一点差异.笔者前几天刚好在负责一个项目的权限管理 ...
- Springboot+vue前后端分离项目,poi导出excel提供用户下载的解决方案
因为我们做的是前后端分离项目 无法采用response.write直接将文件流写出 我们采用阿里云oss 进行保存 再返回的结果对象里面保存我们的文件地址 废话不多说,上代码 Springboot 第 ...
- 一个实际的案例介绍Spring Boot + Vue 前后端分离
介绍 最近在工作中做个新项目,后端选用Spring Boot,前端选用Vue技术.众所周知现在开发都是前后端分离,本文就将介绍一种前后端分离方式. 常规的开发方式 采用Spring Boot 开发项目 ...
- SpringBoot,Vue前后端分离开发首秀
需求:读取数据库的数据展现到前端页面 技术栈:后端有主要有SpringBoot,lombok,SpringData JPA,Swagger,跨域,前端有Vue和axios 不了解这些技术的可以去入门一 ...
- Spring Boot + Vue 前后端分离开发,前端网络请求封装与配置
前端网络访问,主流方案就是 Ajax,Vue 也不例外,在 Vue2.0 之前,网络访问较多的采用 vue-resources,Vue2.0 之后,官方不再建议使用 vue-resources ,这个 ...
随机推荐
- Sentinel 发布里程碑版本,添加集群流控功能
自去年10月底发布GA版本后,Sentinel在近期发布了另一个里程碑版本v1.4(最新的版本号是v1.4.1),加入了开发者关注的集群流控功能. 集群流控简介 为什么要使用集群流控呢?假设我们希望给 ...
- 自己整理的一个访问SQLite3数据库的C++类
原文地址:自己整理的一个访问SQLite3数据库的C++类作者:vigra 近日,对SQLite3的使用进行了研究.真不愧是优秀的嵌入数据库,API接口也极其简捷.基本上只要使用以下几个接口就能完成数 ...
- VS2010-MFC(对话框:非模态对话框的创建及显示)
转自:http://www.jizhuomi.com/software/162.html 前面已经说过,非模态对话框显示后,程序其他窗口仍能正常运行,可以响应用户输入,还可以相互切换.本节会将上一讲中 ...
- Spring MVC(七)--传递JSON参数
有时候参数的传递还需要更多的参数,比如一个获取用户信息的请求中既有用户ID等基本参数,还要求对查询结果进行分页,针对这种场景,一般都会将分页参数封装成一个对象,然后将它和基本参数一起传给控制器,为了控 ...
- 使用xshell远程连接到linux
1.检查是否安装ssh rpm -qa | grep ssh 已安装是这样 如果没有安装,则 yum install openssh* #命令安装 2.开启ssh服务 [root@localhos ...
- 《DSP using MATLAB》Problem 7.37
代码: %% ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ %% Output In ...
- python 中的 is 方法 总结
isidentifier: 判断变量名是否合法 iskeyword:是否为内置关键字
- <每日一题>题目22:简单的python练习题(31-40)
#31.分布式爬虫主要解决什么问题? ''' ip 带宽 CPU IO ''' #32.网络传输层 ''' 应用层—http ftp dns nfs 传输层—tcp --udp 网络层—ip icmp ...
- 使用flags定义命令行参数
TensorFlow定义了tf.app.flags,用于支持接受命令行传递参数,其中tf.app.flags.DEFINE_xxx()是添加命令行的optional argument(可选参数),而t ...
- ES6之主要知识点(七)对象
1.属性的简洁表示法 ES6 允许直接写入变量和函数,作为对象的属性和方法.这样的书写更加简洁. function f(x, y) { return {x, y}; } // 等同于 function ...