<!DOCTYPE html>
<html>
<head>
<title>Your Vue 3 App</title>
<!-- 引入 Vue 3 的 CDN 文件 -->
<script src="https://unpkg.com/vue@3.2.26/dist/vue.global.js"></script>
<!-- 引入 axios 的 CDN 文件 -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<!-- Vue 3 应用的根元素 -->
<div id="app">
<!-- 表单 -->
<form @submit.prevent="submitForm">
<!-- 输入用户名 -->
<label for="username">用户名:</label>
<input type="text" id="username" v-model="username" />
<!-- 输入密码 -->
<label for="password">密码:</label>
<input type="password" id="password" v-model="password" />
<!-- 提交按钮 -->
<button type="button" @click="submitForm">登录</button>
</form>
</div>
<script>
// 创建 Vue 3 应用
const app = Vue.createApp({
data() {
return {
username: '',
password: ''
};
},
methods: {
submitForm() {
// 构造请求参数
const data = {
username: this.username,
password: this.password
};
// 创建带有基本URL的 Axios 实例
const api = axios.create({
baseURL: 'http://127.0.0.1:18885' // 你的后端API的基本URL
});
// 发起 POST 请求
api.post('/huarun/test',data)
.then(response => {
// 请求成功处理
console.log(response.data);
})
.catch(error => {
// 请求失败处理
console.error(error);
});
// 发起 GET 请求
// api.get('/huarun/test',{
// params: {
// username: this.username,
// password: this.password
// }
// })
// .then(response => {
// // 请求成功处理
// console.log(response.data);
// })
// .catch(error => {
// // 请求失败处理
// console.error(error);
// });
}
}
});
// 挂载 Vue 3 应用到根元素
app.mount('#app');
</script>
</body>
</html>
最朴素的vue3代码了