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) //修改的数据  
    })
    }
  • 相关阅读:
    C# winform 学习(三)
    (Java实现) 均分纸牌
    (Java实现) 拦截导弹
    Delphi从内存流中判断图片格式(好多相关文章)
    Qt之QTableView显示富文本(使用了QAbstractTextDocumentLayout和QTextDocument)
    MAC和PHY的区别(网线上传递的是模拟信号)
    Qt之模型/视图(自定义按钮)(重绘QStyleOptionButton)
    QQ音乐的请求
    Log4j、Log4j 2、Logback、SFL4J、JUL、JCL的比较
    LRU Cache
  • 原文地址:https://www.cnblogs.com/jackie-song/p/11950503.html
Copyright © 2011-2022 走看看