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) //修改的数据  
    })
    }
  • 相关阅读:
    大一励志的我,现在已经大三了
    Jenkins+K8s实现持续集成
    Jenkins搭建自动化测试环境
    软件开发式样书 6
    软件开发式样书 5
    软件开发式样书 4
    软件开发式样书 3
    软件开发式样书 2
    软件开发式样书 1
    Git学习笔记
  • 原文地址:https://www.cnblogs.com/jackie-song/p/11950503.html
Copyright © 2011-2022 走看看