各种获取数据免费接口

1.音频接口

• 代理配置

   '/music-api':{
        target:'https://api.cenguigui.cn/',
        changeOrigin:true,
        rewrite:(path)=>path.replace(/^\/music-api/,''),
        secure:false
      }

• axios全局配置

import axios from 'axios';

const MusicClient = axios.create({
    baseURL: '/music-api',
    withCredentials: false,
    headers: {
        'Content-Type': 'application/json',
    }
});
export default MusicClient;

• 定义响应式变量接收路径参数

const musicUrl = ref('');

• 发送请求，获取数据

// 获取音乐
const getMusic = async () => {
  try {
    const res = await musicApi.get('/api/netease');
    musicUrl.value = res.data.data.play_url;
    console.log(musicUrl);
  } catch (e) {
    console.error("Error fetching music:", e);
  }
}

2.视频接口

• 代理配置

    // 配置视频动态代理
      '/video-api':{
        target:'https://tools.mgtv100.com',
        changeOrigin:true,
        rewrite:(path)=>path.replace(/^\/video-api/,''),
        secure:false
      },

• axios全局配置

import axios from 'axios';

const VideoClient = axios.create({
    baseURL: '/video-api',
    withCredentials: false,
    headers: {
        'Content-Type': 'application/json',
    }
});

export default VideoClient;

• 定义响应式变量，接收参数

const videoUrl = ref('');

• 发送axios请求获取数据

import axios from 'axios';

const VideoClient = axios.create({
    baseURL: '/video-api',
    withCredentials: false,
    headers: {
        'Content-Type': 'application/json',
    }
});

export default VideoClient;

3.图片接口

• 代理配置

      // 为 dmoe.cc 的 API 请求创建一个代理规则
      '/dmoe-api': {
        target: 'https://www.dmoe.cc',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/dmoe-api/, ''),
        secure: false
      },

• axios全局配置

import axios from 'axios';

const ApiClient = axios.create({
    baseURL: '/dmoe-api', // 这个路径会根据Vite配置自动代理到dmoe.cc
    withCredentials: false,
    headers: {
        'Content-Type': 'application/json',
    }
});

export default ApiClient;

• 定理响应式变量，接收路径参数

const imgUrl = ref('');

• 发送axios请求，获取路径参数

// 获取随机图片
const getImage = async () => {
  try {
    const res = await ApiClient.get('/random.php?return=json');
    imgUrl.value = res.data.imgurl;
    console.log(res.data);
  } catch (error) {
    console.error("Error fetching image:", error);
  }
};

4.文字接口

• 代理配置

      //配置文字动态代理
      '/text-api':{
        target:'https://api.uomg.com/',
        changeOrigin:true,
        rewrite:(path)=>path.replace(/^\/text-api/,''),
        secure:false
      },

• axios全局配置

import axios from 'axios';

const TextClient = axios.create({
    baseURL: '/text-api',
    withCredentials: false,
    headers: {
        'Content-Type': 'application/json',
    }
});
export default TextClient;

• 定义响应式变量，接收请求参数

const TextUrl = ref('');

• 发送axios请求接收文字路径参数

// 获取随机文字
const getText = async () => {
  try {
    const res = await textApi.get('/api/rand.qinghua');
    TextUrl.value = res.data.content;
    console.log(res.data);
  } catch (e) {
    console.error("出现错误", e);
  }
}

5.向tomcat服务器发送请求获取员工数据

• 配置代理

      '/api':{
        target:'http://localhost:8080',
        changeOrigin:true,
        rewrite:(path)=>path.replace(/^\/api/,'')
      },

• 配置axios全局请求

import axios from "axios";
export const instance= axios.create({
    baseURL:'/api',
    timeout:3000
})

• 发送axios请求，获取数据

// 定义获取账户信息的方法
const getAccount = async () => {
  try {
    const response = await instance.get('/account');
    tableData.value = response.data.data;
    console.log(tableData);
  } catch (error) {
    console.error('Error fetching account data:', error);
  }
};