vue 中如何使用axios调用接口

首先后端采用的是restful形式，分为了

1.post（添加）请求，

2.delect(删除)请求，

3.put（修改）请求，

4.get（查询）请求，

在vue里项目里，npm i axios -S，npm i vue-axios -S，下载这两个后，在main.js里面

import axios from 'axios' import VueAxios from 'vue-axios' Vue.use(VueAxios, axios)  就可以在全局使用axios了 在需要的添加按钮里写一个方法，submit(){ 先判断填写的内容是否符合格式标准，如果可以就执行 addpost（） } //axios post 请求 addpost(){ 　　that = this //this就要换成that 防止this冲突 　　this.$axios 　　.post('url',{ 　　后台数据名：that.前台定义的变量， 　　}) 　　.then（res =>{ 　　console.log(res)//提交后台的数据状态      res={data: {…}, status: 200, statusText: "", headers: {…}, config: {…}, …} 　　getlist（），添加完后再更新数据库的数据到页面 } axios delect请求 delectlist（）{ 　　this.$axios 　　.delect(url/adate，{ //另一种方法传递参数用params选项传递参数 　　params：{ 　　id：‘123’ 　　} 　　}) 　　.then(res=>{ 　　console.log(res) 　　}) } axios get请求 getlist（）{ 　　this.$axios.get(url/adate?id='123') //另一种方法传递参数用params选项传递参数 　　.then(res=>{ 　　console.log(res) 　　this.datearr = res.data.date//把数据赋给date里定义的dataarrr 　　}) }   axios put请求与post类似都有表单格式 alterlist（）{ 　　const  params =new URLsearchParams（） 　　params.append('param1','value'); 　　params.append('param1','value'); 　　this.$axios.put('url' ,params ).then(res = >{ 　　console.log(res) //修改的数据　　 }) }