在 vue.js 中调用 java 服务器端：安装 axios 库导入 axios 对象并配置基础 url在组件中发起请求：a. 导入响应引用值b. 使用 $axios 对象发送 http 请求c. 在 then 块中处理响应数据d. 在 catch 块中处理错误示例：获取 java 服务器端的用户列表，并将其呈现为 html 列表。
如何在 Vue.js 中调用 Java
引入 Java 服务器端
在 Vue.js 项目中，通过以下方式引入 Java 服务器端：
import { createApp } from 'vue'
import axios from 'axios'
const app = createApp({...})
app.config.globalProperties.$axios = axios.create({
baseURL: 'http://localhost:8080' // Java 服务器端 URL
})
发起请求
立即学习“Java免费学习笔记（深入）”；
在 Vue.js 组件中，可使用 $axios 对象发起请求：
// 引入组件
import { ref } from 'vue'
export default {
setup() {
const response = ref({})
// 发送 GET 请求
$axios.get('/users')
.then(res => { response.value = res.data })
.catch(err => { console.log(err) })
return { response }
}
}
处理响应
在 then 块中，可以访问响应数据：
.then(res => {
// 对数据进行操作...
})
错误处理
在 catch 块中，可以捕获并处理请求错误：
.catch(err => {
// 处理错误...
})
示例
以下示例演示了如何在 Vue.js 中调用 Java 服务器端获取用户列表：
<template><div>
<ul>
<li v-for="user in response.data">
{{ user.name }}
</li>
</ul>
</div>
</template><script>
import { ref } from 'vue'
import { createApp } from 'vue'
import axios from 'axios'
const app = createApp({
data() {
return {
response: ref({})
}
},
created() {
axios.create({
baseURL: 'http://localhost:8080' // Java 服务器端 URL
}).get('/users')
.then(res => { this.response.value = res.data })
.catch(err => { console.log(err) })
}
})
app.mount('#app')
</script>