html通过cdn引入vue和axios，实现各类请求到后台
<head>
<!-- 引入Vue -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<!-- 引入Axios -->
<script src="https://cdn.jsdelivr.net/npm/axios@0.21.1/dist/axios.min.js"></script>
</head>
<body>
<div id="app">
<h2>登录</h2>
<form @submit.prevent="login">
<div>
<label for="userName">用户名:</label>
<input type="text" id="userName" v-model="userName" required>
</div>
<div>
<label for="passWord">密码:</label>
<input type="passWord" id="passWord" v-model="passWord" required>
</div>
<button type="submit">登录</button>
</form>
<div v-if="loggedIn">
<h3>欢迎 {{ userName }}!</h3>
<div><button @click="fetchData1">test1</button> </div><br />
<div><button @click="fetchData2">test2</button> </div><br />
<div></button><input type="text" id="test3-param" v-model="test3Param" placeholder="输入参数"
required><br /><button @click="fetchData3">test3 </div><br />
<div><button @click="fetchData4">test4</button> </div><br />
<div><button @click="fetchData5">test5</button> </div>
</div>
</div>
</body>
<script>
const app = new Vue({
el: '#app',
data() {
return {
userName: '123456789012',
passWord: '3417973cd67f37b077e56b82f0cc306f',
loggedIn: false,
test3Param: '',
baseUrl: "http://47.115.44.145:7000"
};
},
methods: {
async login() {
try {
const response = await axios.post(this.baseUrl + '/api/auth', {
userName: this.userName,
passWord: this.passWord,
});
console.log(response);
if (response.data) {
this.loggedIn = true;
window.sessionStorage.setItem("token", response.data.token)
} else {
alert('登录失败，请检查用户名或密码');
}
} catch (error) {
console.error(error);
}
},
async fetchData1() {
try {
const response = await axios.get(this.baseUrl + '/api/test/test1', {
headers: {
Authorization: `Bearer ${window.sessionStorage.getItem("token")}`,
},
});
if (response.data) {
alert(response.data);
console.log(response.data); // 在这里处理获取到的数据，可以根据需要进行进一步操作或展示数据。
} else {
alert('获取数据失败，请重试');
}
} catch (error) {
console.error(error);
}
},
async fetchData2() {
try {
const response = await axios.get(this.baseUrl + '/api/test/test2', {
headers: {
Authorization: `Bearer ${window.sessionStorage.getItem("token")}`,
},
});
if (response.data) {
alert(response.data);
console.log(response.data); // 在这里处理获取到的数据，可以根据需要进行进一步操作或展示数据。
} else {
alert('获取数据失败，请重试');
}
} catch (error) {
console.error(error);
}
},
async fetchData3() {
try {
const response = await axios.get(this.baseUrl + '/api/test/test3', {
headers: {
Authorization: `Bearer ${window.sessionStorage.getItem("token")}`,
},
params: {
name: this.test3Param
}
});
if (response.data) {
alert(response.data);
console.log(response.data); // 在这里处理获取到的数据，可以根据需要进行进一步操作或展示数据。
} else {
alert('获取数据失败，请重试');
}
} catch (error) {
console.error(error);
}
},
async fetchData4() {
try {
const response = await axios.post(this.baseUrl + '/api/test/test4',
{
userName: this.userName,
passWord: this.userName,
},
{
headers: {
Authorization: `Bearer ${window.sessionStorage.getItem("token")}`,
},
});
if (response.data) {
alert(response.data.message);
console.log(response.data); // 在这里处理获取到的数据，可以根据需要进行进一步操作或展示数据。
} else {
alert('获取数据失败，请重试');
}
} catch (error) {
console.error(error);
}
},
async fetchData5() {
const formdata = new FormData()
formdata.append("userName", this.userName)
formdata.append("passWord", this.userName)
try {
const response = await axios.post(this.baseUrl + '/api/test/test5',
formdata,
{
headers: {
Authorization: `Bearer ${window.sessionStorage.getItem("token")}`,
},
});
if (response.data) {
alert(response.data.message);
console.log(response.data); // 在这里处理获取到的数据，可以根据需要进行进一步操作或展示数据。
} else {
alert('获取数据失败，请重试');
}
} catch (error) {
console.error(error);
}
}
},
});
</script>
2577
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
