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前后端分离的更多相关文章

  1. 解决Django+Vue前后端分离的跨域问题及关闭csrf验证

      前后端分离难免要接触到跨域问题,跨域的相关知识请参:跨域问题,解决之道   在Django和Vue前后端分离的时候也会遇到跨域的问题,因为刚刚接触Django还不太了解,今天花了好长的时间,查阅了 ...

  2. Flask + vue 前后端分离的 二手书App

    一个Flask + vue 前后端分离的 二手书App 效果展示: https://blog.csdn.net/qq_42239520/article/details/88534955 所用技术清单 ...

  3. 喜大普奔,两个开源的 Spring Boot + Vue 前后端分离项目可以在线体验了

    折腾了一周的域名备案昨天终于搞定了. 松哥第一时间想到赶紧把微人事和 V 部落部署上去,我知道很多小伙伴已经等不及了. 1. 也曾经上过线 其实这两个项目当时刚做好的时候,我就把它们部署到服务器上了, ...

  4. 两个开源的 Spring Boot + Vue 前后端分离项目

    折腾了一周的域名备案昨天终于搞定了. 松哥第一时间想到赶紧把微人事和 V 部落部署上去,我知道很多小伙伴已经等不及了. 1. 也曾经上过线 其实这两个项目当时刚做好的时候,我就把它们部署到服务器上了, ...

  5. beego-vue URL重定向(beego和vue前后端分离开发,beego承载vue前端分离页面部署)

    具体过程就不说,是搞这个的自然会动,只把关键代码贴出来. beego和vue前后端分离开发,beego承载vue前端分离页面部署 // landv.cnblogs.com //没有授权转载我的内容,再 ...

  6. SpringBoot+Vue前后端分离,使用SpringSecurity完美处理权限问题

    原文链接:https://segmentfault.com/a/1190000012879279 当前后端分离时,权限问题的处理也和我们传统的处理方式有一点差异.笔者前几天刚好在负责一个项目的权限管理 ...

  7. Springboot+vue前后端分离项目,poi导出excel提供用户下载的解决方案

    因为我们做的是前后端分离项目 无法采用response.write直接将文件流写出 我们采用阿里云oss 进行保存 再返回的结果对象里面保存我们的文件地址 废话不多说,上代码 Springboot 第 ...

  8. 一个实际的案例介绍Spring Boot + Vue 前后端分离

    介绍 最近在工作中做个新项目,后端选用Spring Boot,前端选用Vue技术.众所周知现在开发都是前后端分离,本文就将介绍一种前后端分离方式. 常规的开发方式 采用Spring Boot 开发项目 ...

  9. SpringBoot,Vue前后端分离开发首秀

    需求:读取数据库的数据展现到前端页面 技术栈:后端有主要有SpringBoot,lombok,SpringData JPA,Swagger,跨域,前端有Vue和axios 不了解这些技术的可以去入门一 ...

  10. Spring Boot + Vue 前后端分离开发,前端网络请求封装与配置

    前端网络访问,主流方案就是 Ajax,Vue 也不例外,在 Vue2.0 之前,网络访问较多的采用 vue-resources,Vue2.0 之后,官方不再建议使用 vue-resources ,这个 ...

随机推荐

  1. day05 创建用户过程、文件夹,文件等权限修改等

    linux创建用户时修改到的文件 /etc/passwd //存放用户信息 /etc/shadow //存放用户密码信息 /etc/group //存放用户组信息 /etc/gshadow //存放组 ...

  2. HTML值改变事件

    1.动态拼接html[表格中,如bootstrap grid] return '<input type="text" name="bjce" onchan ...

  3. duilib教程之duilib入门简明教程4.响应按钮事件

    上一个Hello World的教程里有一句代码是这样的:CControlUI *pWnd = new CButtonUI;    也就是说,其实那整块绿色背景区域都是按钮的区域.(这里简要介绍下,CC ...

  4. 出错提示:“Could not flush the DNS Resolver Cache: 执行期间,函数出了问题”的解决方法

    在DNS解析中,出错提示:"Could not flush the DNS Resolver Cache: 执行期间,函数出了问题"的解决方法  . 由于公司网站空间更换了服务商. ...

  5. spring boot 中 rabbit mq基础例子

    1.先安装ELANG,再按照RabbitMQ 2.打开RabbitMQ控制台:rabbit command prompt 1.设置elang的路径:set ERLANG_HOME=D:\work_pr ...

  6. 工业派-配置Intel神经计算棒二代(NCS2)

    最近两天在工业派ubuntu16.04上配置了Intel神经计算棒二代——Intel Neural Compute Stick,配置过程之艰辛我都不想说了,实在是太折磨人.不过历尽千辛万苦,总算让计算 ...

  7. pptp,l2tp获取登录用户信息用pppd参数即可

    这个问题困扰了我很久,终于在pppd的man文档里,发现了踪迹.在man中的SCRIPTS下有一系列的参数,其中PEERNAME就是登陆的用户名,并且在/etc/ppp/ip-up和/etc/ppp/ ...

  8. _strupr _wcsupr _mbsupr

    将字符串转化为大写的形式(Convert a string to uppercase.)定义: char *_strupr( char *string ); wchar_t *_wcsupr( wch ...

  9. 【2019云栖大会】这一场,我们好好聊聊5G和边缘计算

    一年一度的科技盛会杭州云栖大会Apsara Conference就要来了9月25-27日数万名开发者将齐聚杭州云栖小镇共同探索人类科技演进的脉搏聚焦面向未来的创新.热点技术话题 5G和边缘计算是201 ...

  10. 【python之路44】tornado的用法 (二)

    参考:https://www.cnblogs.com/sunshuhai/articles/6253815.html 一.代码目录构建 代码目录设置如下图: #!/usr/bin/env python ...