vue调用接口

目录

简单获取和追加数据铺页面

用 post 给接口传值

post 用 url 问号拼接数据

---

简单获取和追加数据铺页面

一、在api中新建该页面的js文件用于存放该页面的所有接口

二、引用所需组件，调用接口（已经全局配置了接口地址）

import axios from 'axios'

// 首页-我的展台
export function getQueryMyBooth(data) {
  return request({
    url: '/booth/query',
    method: 'post',
    data
  })
}

// 需要传id时
export function getModelMsg(id) {
  return request({
    url: '/template/get/' + id,
    method: 'get'
  })
}

三、在该页面导入，在create中将获取到的数据传给data

import { getQueryMyBooth } from '@/api/model'

。。。。

data() {
    return {
        // 展台卡片
      boothCard: [
        {
          id: 0,
          idView: require('@/assets/img/download.png'),
          title: '这里是个名称1',
          finish: 0,
          // 是否显示已完成角标
          release: 1,
          choose: false,
          showChoose: false,
          // 展台轮播图是否显示
          showBannerOrNo: false
        },
        {
          id: 1,
          idView: require('@/assets/img/download.png'),
          title: '这里是个名称2',
          finish: 0,
          // 是否显示已完成角标
          release: 0,
          choose: false,
          showChoose: false,
          // 展台轮播图是否显示
          showBannerOrNo: false
        }
      ]
    }
}

。。。。

created() {
    getQueryMyBooth({}).then((res) => {
      console.log(res)
      // 循环追加数据
      this.boothCard = res.data.map((item) => {
        item.choose = false
        item.showBannerOrNo = false
        // 右下角完成进度角标
        item.finish = false
        if (item.progress < 31) {
          item.finish = true
        }
        return item
      })
      this.newData = res.data
      // 筛选出已发布的展台，赋给上方轮播图
      this.modelList = res.data.filter((item) => item.isPublish)
      // console.log(this.modelList)
      // console.log(this.boothCard)
    }).catch()
}

四、在html中使用

<div v-for="(item, index) in boothCard" :key="index" class="booth-card">
            <div>
              <div class="booth-title">
                <p>{{ item.modelName }}</p>
                <p v-if="item.finish">
                  {{ item.progress }}/{{ item.medioListLength }}
                </p>
                <div v-else class="finish">
                  <img src="@/assets/img/finish.png" alt="">
                </div>
              </div>
            <div/>
</div>

用 post 给接口传值

一、封装接口

// 条件分页查询活动表
export function queryManualTable(data) {
  return request.service({
    url: '/xxx/xxx',
    method: 'POST',
    data
  })
}

二、导入api

// 导入api
import {queryManualTable } from '../../../src/api/dashboard'

三、逻辑

// 将接口封装一下，谁调这个方法，谁传值
queryManualdata(data) {
      queryManualTable(data).then(res => {
        // this.manualData 是接口返回的值
        this.manualData = res.data.datas
        console.log(res.data.datas)
      })
    },

// 调用接口方法，给接口传值
// 如果调用的是一个接口，传一样的值则直接调用这个方法即可
queryManual() {
      this.queryManualdata({
        searchText: this.searchText,
        // 因为后端规定如果等于0则传空字符串，所以用了三元表达式
        manualSize: this.curCategory === 0 ? '' : this.curCategory + ''
      })
    },

post 用 url 问号拼接数据

状态（字符串）只有一个，id（数组）有未知个，需要手动拼接

功能：点击上线下线按钮，来调整卡片状态

 

 html

<div class="operation">
              <span>操作功能：</span>
              <p style="cursor:pointer" :style="{'color' :click_edit === true ? '#E82929' : '#B6B6B6'}" @click="onlineState(1)">上线</p>
              <p style="cursor:pointer" :style="{'color' :click_edit === true ? '#E82929' : '#B6B6B6'}" @click="onlineState(2)">下线</p>
              <p style="cursor:pointer" :style="{'color' :click_edit === true ? '#666' : '#B6B6B6'}">复制</p>
              <p style="cursor:pointer" :style="{'color' :click_edit === true ? '#666' : '#B6B6B6'}">删除</p>
            </div>

逻辑

data(){
    return{
        manualData: [], // 手册数据表
    }
}

。。。。。。

// 是否上线  上线：1      下线：2
    onlineState(type) {
      var id = []
      var manualType = ''
      if (type === 1) {
        this.manualData.map(item => {
          if (item.select === true) {
            item.manualType = 1
            id.push(item.manualId)
            manualType = item.manualType + ''
          }
        })
        this.$message.success('已上线')
      } else {
        this.manualData.map(item => {
          if (item.select === true) {
            item.manualType = 2
            id.push(item.manualId)
            manualType = item.manualType + ''
          }
        })
        this.$message.success('已下线')
      }
      this.updateProductItem({
        manualType, id
      })
      console.log(manualType, id)
    },

    // 调用上下线接口
    updateProductItem(data) {
      updateProduct(data).then((res) => {
        this.gitManualTableData()
      })
    },




。。。。。。

// 更新手册上下线状态
export function updateProduct(params) {
  const { manualType, id } = params
  let str = '?'
  str += 'manualType=' + manualType + '&'
  id.forEach(item => {
    str += 'id=' + item + '&'
  })
  str = str.substring(0, str.length - 1)
  return request.service({
    url: `/XXX/XXX${str}`,
    method: 'POST'
  })
}

或者可以直接用

determine() {
      let aa = {
        phone: this.phone,
        email: this.Email,
        captcha: this.code,
        id: this.id
      };
      // 更改（调用接口）
      setUpdateOwner(aa)
        .then((response) => {
          console.log(JSON.stringify(aa))  // 这里JSON.stringify(aa)用法是转换成json格式
          if (response.status == "SUCCESS") {
            this.$message.success("添加成功");
            this.$emit("closeClick");
            this.$emit("getData");
          } else {
            this.$message.error(response.responseMsg);
          }
        })
        .catch((e) => {});
    },

// 更改租户所有者
export function setUpdateOwner(params) {
    console.log(params)
    return request.service({
        url: `/tenantinfo/updateOwner`,
        method: "post",
        params
    });
  }

vue中的then方法和catch方法

 1、then()里写两个参数,第一个是成功时的回调方法,默认给这个方法传递了成功的数据,
另一个是失败的方法,以及失败的数据

<script>
export default {
  name: 'demo',
  data() {
    return {}
  },
  methods: {
    testDemo(data) {
      // ajax请求
      testAjax(url, params).then(data => {
        // 处理成功
        console.log(data)
      }, data => {
        // 处理失败
        console.log(data)
      })
    }
  }
}
</script>

        2、一般情况下,为了不报错,会在then()后面调用.catch()，相当于类似try{}catch(e){} ，可以理解为省略了try()

<script>
export default {
  name: 'demo',
  data() {
    return {}
  },
  methods: {
    testDemo(data) {
      // ajax请求
      testAjax(url, params).then(data => {
        // 处理成功
        console.log(data)
      }).catch(err => {
        // 报错
        console.log(err)
      })
    }
  }
}
</script>

3、在catch中可以 let data = e.toString(); ，用 toString 方法改为字符串

catch中捕捉的错误格式：

 

4、主要区别：如果在then的第一个函数里抛出了异常，后面的catch能捕获到，而then的第二个函数捕获不到。因此，建议总是使用catch方法，而不使用then方法的第二个参数。