当前后端不分离的项目中,前端项目可以通过向后端项目发送HTTP请求与后端进行通信。这里以一个简单的登录功能为例,展示如何在前端项目中发送请求到后端。
-
后端 Spring Boot 项目:
假设后端提供了一个登录的接口
/login
,接收 POST 请求,传递用户名和密码,并返回登录结果。java
@RestController
public class LoginController {
@PostMapping("/login")
public ResponseEntity<String> login(@RequestBody Map<String, String> credentials) {
String username = credentials.get("username");
String password = credentials.get("password");// Perform login logic and return appropriate response
// ...// For simplicity, we return a success message if username and password are valid
return ResponseEntity.ok("Login successful!");
}
} -
前端 Vue 项目:
在前端 Vue 项目中,你需要在登录页面获取用户输入的用户名和密码,然后通过 HTTP POST 请求发送到后端登录接口。
vue
<template>
<div>
<h1>Login</h1>
<form @submit.prevent="login">
<label for="username">Username:</label>
<input type="text" v-model="username" id="username" required />
<br />
<label for="password">Password:</label>
<input type="password" v-model="password" id="password" required />
<br />
<button type="submit">Login</button>
</form>
</div>
</template><script>
export default {
data() {
return {
username: '',
password: ''
};
},
methods: {
async login() {
const credentials = {
username: this.username,
password: this.password
};try {
const response = await fetch('http://localhost:8081/login', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(credentials)
});if (response.ok) {
alert('Login successful!');
} else {
alert('Login failed.');
}
} catch (error) {
console.error('Error:', error);
}
}
}
};
</script>
在上面的示例中,我们假设后端接口在
http://localhost:8081
上。在实际项目中,请根据你的后端部署位置和端口进行调整。当用户填写用户名和密码并点击登录按钮时,前端会发起一个 POST 请求到后端的
/login
接口,并将用户名和密码作为 JSON 发送到后端。注意确保前后端接口的URL和端口、API路径、参数等都正确设置,以便前后端能够正确地通信。