vue前端项目如何与后端交互,vuejs如何与后端交互

　　本文主要介绍了如何实现Vue前端和后端的数据交互，具有很好的参考价值。希望对大家有帮助。如有错误或不足之处，请不吝赐教。

目录

　　 vue前端和后端数据交互安装在main.js文件中。如上图所示直接使用启动vue和前端连接。

vue前端与后端数据交互

安装

　　npm安装axios -保存

在main.js文件引入

　　从“Axios”导入Axios；//后台交互

　　Vue.prototype.$http=Axios

　　//defaults设置全局默认路径

　　Axios.defaults.baseURL=/

使用

　　//第一种

　　这个。$ http.post (/index/customer/，{//其中包含要传递的值})。然后(函数(res) {

　　//console.log(这是返回的客户数据)；

　　//console . log(RES . data . data)；

　　this . customer rarr=RES . data . data

　　});//如果是get请求，将post改为get

　　//第二，推荐这种方法。

　　这个。$http({

　　URL:“/index/patch base/”，

　　方法：“get”，

　　标头：{ X-Requested-With : XMLHttpRequest }，

　　Params:{}//传递值，例如params:{id:1，name:gw}

　　}).然后(res={

　　Console.log(“数据接收”)；

　　console . log(RES . data . data)；

　　});

　　这个。$http({

　　URL:“/index/patch base/”，

　　方法： post ，

　　标头：{ Content-Type : multipart/form-data }，

　　数据：{}//传递值

　　}).然后(res={

　　Console.log(“数据接收”)；

　　console . log(RES . data . data)；

　　});

　　需要注意的是，post和get请求的请求头数据是不一样的，值的传递方法也是不一样的：get是params，POST请求使用数据传递值。

启动vue和前后端连接

直接上图

　　以上个人经历，希望能给大家一个参考，也希望大家多多支持我们。

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。