zoukankan      html  css  js  c++  java
  • 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) //修改的数据  
    })
    }
  • 相关阅读:
    Chrome调试工具常用功能
    把读取sql的结果写入到excel文件
    Android逆向破解:Android Killer使用
    鸭子类型和猴子补丁
    Scrapy同时启动多个爬虫
    命令注入
    理解RESTful架构
    程序员需要谨记的九大安全编码规则
    10条建议分享:帮助你成为与硅谷工程师一样优秀的程序员
    代码审计:是安全专家都应该掌握的技能
  • 原文地址:https://www.cnblogs.com/jackie-song/p/11950503.html
Copyright © 2011-2022 走看看