话不多说,上干货。

1、直接axios调用

首先在script中引入axios,直接写在export default外面,script标签里面

import axios from "axios";

2、在 methods中定义函数

gt() {
      var url =
        "http://10.30.118.38:6003/api/cicd-service/cicd/jenkinsproject/queryListByGroupType";
      var params = {
          //输入默认值的话是为了测试接口
        pageNum: 1,
        busiType: "12",

   //  xxx:this.xxxx  等号左侧输入是后端对应的要传过来的数据名称
   //等号右侧假如输入this.xxxx是为了让后端的数据动态匹配上前端所使用的的名称
   //例如:pageSize: this.pageSize  的冒号左侧是后端参数名称  ,右侧是前端的表格显示的名称
      };
      axios({
        //请求使用的方法,可写get或者post等
        method: "get",
        //url写的是请求地址
        url: url,
//params写的是数据请求条件 ,即后端给定的请求参数中,是否必须  是true的选项必须写在params内
        params: params,
        //以下都是固定写法
      }).then((res) => {
          //接口请求成功的一个标志,200是状态码,双等号前面不一定写res.data.code,
          //这个写法是根据后端接口返回数据决定,code的值会告诉你。
        if (res.data.code == 200) {
            //可以打印看看传过来的值
          console.log(res.data);
    //等号左侧this.xxxx     
       //xxxx代表个人对 由页面中需要用到的数据组成的数组的集合 起的名字
    //右侧res.data.xxxx   xxxx是后端传过来的数组的名字
          this.form = res.data.data;
          this.form.methodPath =res.data.data.rpc
        } else {
          this.$message({
            message: res.data.message,
            type: "error",
          });
        }
      });
    },

3、将写好的gt函数,引入到mounted里面

  mounted() {
    this.gt();
  },

搞定。其余的调用

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐