各种获取数据免费接口

1.音频接口

• 代理配置

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

• axios全局配置

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

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

javascript">const musicUrl = ref('');

• 发送请求，获取数据

javascript">// 获取音乐
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.视频接口

• 代理配置

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

• axios全局配置

javascript">import axios from 'axios';const VideoClient = axios.create({baseURL: '/video-api',withCredentials: false,headers: {'Content-Type': 'application/json',}
});export default VideoClient;

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

javascript">const videoUrl = ref('');

• 发送axios请求获取数据

javascript">import axios from 'axios';const VideoClient = axios.create({baseURL: '/video-api',withCredentials: false,headers: {'Content-Type': 'application/json',}
});export default VideoClient;

3.图片接口

• 代理配置

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

• axios全局配置

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

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

javascript">const imgUrl = ref('');

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

javascript">// 获取随机图片
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.文字接口

• 代理配置

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

• axios全局配置

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

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

javascript">const TextUrl = ref('');

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

java">// 获取随机文字
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服务器发送请求获取员工数据

• 配置代理

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

• 配置axios全局请求

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

• 发送axios请求，获取数据

javascript">// 定义获取账户信息的方法
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);}
};