封装axios

新建一个api文件目录

// /api/htt.js
import axios from 'axios'

const service = axios.create({
    baseURL: 'https://XXX.XXX.com', // 你的API基础URL
    timeout: 5000, // 请求超时时间
    // 其他axios配置...
    withCredentials: true // 跨域请求时是否需要使用凭证
})

// 添加请求拦截器
service.interceptors.request.use(function (config) {
    // 在发送请求之前做些什么
    return config;
}, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
});

// 添加响应拦截器
service.interceptors.response.use(function (response) {
    // 对响应数据做点什么
    return response.data; // 假设API直接返回数据而不是response对象
}, function (error) {
    // 对响应错误做点什么
    return Promise.reject(error);
});

// 封装GET请求
export function get(url, params = {}) {
    return service.get(url, {params})
        .then(response => {
            // 可以在这里对响应数据进行统一处理，‌但在这个例子中我们直接返回
            return response.data;
        })
        .catch(error => {
            // 处理请求错误，‌这里可以根据需要调整
            console.error('GET请求失败：‌', error);
            return Promise.reject(error);
        });
}

// 封装POST请求
export function post(url, data = {}) {
    return service.post(url, data)
        .then(response => {
            // 可以在这里对响应数据进行统一处理，‌但在这个例子中我们直接返回
            return response.data;
        })
        .catch(error => {
            // 处理请求错误，‌这里可以根据需要调整
            console.error('POST请求失败：‌', error);
            return Promise.reject(error);
        });
}
//封装后端接口
// 封装带有特定URL和参数的POST请求
export function createUser(userData) {
    return service.post('/pcs-ms/cam/agent/queryAgentCodeOrName', userData, {
       withCredentials:true
    }).then(response => {
            console.log("返回成功的值", response)
            return response;
        })
        .catch(error => {
            console.error('创建用户失败：‌', error);
            return Promise.reject(error);
        });
}

// export default service;

vue中调用，先导入文件，也可以直接在当中使用axios调接口

http.js中封装请求

<template>
  <a-layout style="min-height: 100vh">
    <a-layout-sider collapsible>
      <div id="logo">
        <img id="logoImg" src="@/assets/logo.png" alt="logo"/>
      </div>
      <div id="OnSearch">
        <a-input-search v-model:value="codeOrName" placeholder="菜单名称" @search="handleCreateUser"
                        enter-button="搜索"/>
        />
      </div>
      <a-menu theme="dark" mode="inline">
        <a-sub-menu key="sub0">
          <template #title>
            <div style="display: flex; align-items: center; gap: 4px;">
              <ProfileFilled/>
              菜单0
            </div>
          </template>
          <a-menu-item key="3"><a href="/HelloWorld">Tom</a></a-menu-item>
          <a-menu-item key="4">Bill</a-menu-item>
          <a-menu-item key="5">Alex</a-menu-item>
        </a-sub-menu>
        <a-menu-item key="1">
          <div style="display: flex; align-items: center;">
            <pie-chart-outlined/>
            <span><a href="/hhh">菜单1</a></span>
          </div>
        </a-menu-item>
        <a-menu-item key="2">
          <div style="display: flex; align-items: center;">
            <desktop-outlined/>
            <span><a href="/TheWelcome">菜单2</a></span>
          </div>
        </a-menu-item>
        <a-sub-menu key="sub1">
          <template #title>
            <div style="display: flex; align-items: center;">
              <user-outlined/>
              <span>菜单3</span>
            </div>
          </template>
          <a-menu-item key="3"><a href="/HelloWorld">Tom</a></a-menu-item>
          <a-menu-item key="4">Bill</a-menu-item>
          <a-menu-item key="5">Alex</a-menu-item>
        </a-sub-menu>
        <a-sub-menu key="sub2">
          <template #title>
            <div style="display: flex; align-items: center;">
              <team-outlined/>
              <span>菜单4</span>
            </div>
          </template>
          <a-menu-item key="6">Team 1</a-menu-item>
          <a-menu-item key="8">Team 2</a-menu-item>
        </a-sub-menu>
        <a-menu-item key="9">
          <div style="display: flex; align-items: center;">
            <file-outlined/>
            <span>菜单5</span>
          </div>
        </a-menu-item>
      </a-menu>
    </a-layout-sider>
    <a-layout>
      <a-layout-header style="background: #fff; padding: 0">
        <div aria-label="A complete example of page header">
          <el-page-header @back="">
            <template #breadcrumb>
              <el-breadcrumb separator="/">
                <el-breadcrumb-item :to="{ path: './page-header.html' }">
                  homepage
                </el-breadcrumb-item>
                <el-breadcrumb-item>
                  <a href="">route 1</a>
                </el-breadcrumb-item>
                <el-breadcrumb-item>route 2</el-breadcrumb-item>
              </el-breadcrumb>
            </template>
            <template #content>
              <div class="flex items-center">
                <el-avatar
                    class="mr-3"
                    :size="32"
                    src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"/>
                <span class="text-large font-600 mr-3"> 文案 </span>
                <span
                    class="text-sm mr-2"
                    style="color: var(--el-text-color-regular)"
                >
                  图标
            <el-icon><Search/></el-icon>
                 ant: <EditFilled/>
          </span>
                <el-tag>什么</el-tag>
              </div>
            </template>
            <template #extra>
              <div class="flex items-center">
                <el-button>查看</el-button>
                <el-button type="primary" class="ml-2">修改</el-button>
              </div>
            </template>


          </el-page-header>
        </div>
      </a-layout-header>
      <a-layout-content style="margin: 0 16px">
        <a-breadcrumb style="margin: 16px 0">
          <a-breadcrumb-item>面包屑</a-breadcrumb-item>
          <a-breadcrumb-item>Bill</a-breadcrumb-item>
        </a-breadcrumb>
        <div style="{ 'padding': '24px', 'background': '#fff', 'minHeight': '360px' }">
          <ul>
          <li v-for="item in data">{{ item.agentNo }}</li>
        </ul>
          <router-view/>
        </div>
      </a-layout-content>
      <a-layout-footer style="text-align: center">
        <h1>这是底部</h1>
      </a-layout-footer>
    </a-layout>
  </a-layout>
</template>


<style>
#components-layout-demo-side .logo {
  height: 32px;
  margin: 16px;
  background: rgba(255, 255, 255, 0.3);
}

.site-layout .site-layout-background {
  background: #fff;
}

[data-theme='dark'] .site-layout .site-layout-background {
  background: #141414;
}

#logoImg {
  width: 200px;
  height: 60px;
}

#OnSearch {
  margin: 6px;
  padding: 10px;
}
</style>
<script lang="ts">

// import axios from "axios";
import {createUser} from '@/api/http'
// import {ref} from 'vue';
// const collapsed = ref<boolean>(false);
// const selectedKeys = ref<string[]>();
// const codeOrName = ref<string>('');

// 导入Ant Design Vue的InputSearch组件
import {InputSearch} from 'ant-design-vue';

export default {
  data() {
    return {
      codeOrName: '',
      data: [], // 用于存储从API获取的数据
    };
  },
  methods: {
    components: {
      'a-input-search': InputSearch, // 注册组件，‌使其可以在模板中使用
    },
    handleCreateUser(value) {
      const userData = {
        // 当用户在搜索框中输入并按下Enter键或点击搜索按钮时，‌会触发这个方法
        codeOrName: value
      }
      createUser(userData).then(result => {
        // 处理创建用户的结果
        console.log("哈哈哈",result.model);
        this.data = result.model
      }).catch(error => {
        // 处理请求错误
        console.error('创建用户失败：‌', error);
      });
    },
    // mounted() {
    //   // 组件挂载完成后调用getUserInfo方法
    //   this.createNewUser();
    // }
  }
}
</script>