java和vue写一个登录页面
时间: 2023-10-25 16:24:05 浏览: 45
可以通过前后端分离的方式,使用Java作为后端技术,Vue作为前端技术,来实现一个登录页面。以下是一个简单的示例:
后端代码(Java):
```java
@RestController
@RequestMapping("/api")
public class LoginController {
@PostMapping("/login")
public ResponseEntity<?> login(@RequestBody LoginRequest loginRequest) {
// 处理登录逻辑
if (loginRequest.getUsername().equals("admin") && loginRequest.getPassword().equals("123456")) {
return ResponseEntity.ok(new LoginResponse("登录成功"));
} else {
return ResponseEntity.status(HttpStatus.UNAUTHORIZED).body(new ErrorResponse("用户名或密码错误"));
}
}
}
```
前端代码(Vue):
```vue
<template>
<div>
<h2>登录页面</h2>
<form @submit.prevent="login">
<div>
<label>用户名:</label>
<input type="text" v-model="username" />
</div>
<div>
<label>密码:</label>
<input type="password" v-model="password" />
</div>
<button type="submit">登录</button>
</form>
</div>
</template>
<script>
import axios from 'axios';
export default {
data() {
return {
username: '',
password: '',
};
},
methods: {
login() {
axios.post('/api/login', {
username: this.username,
password: this.password,
}).then(response => {
alert(response.data.message);
}).catch(error => {
alert(error.response.data.message);
});
},
},
};
</script>
```
在上面的代码中,后端使用了@RestController和@PostMapping注解来定义一个处理登录请求的接口;前端使用了Vue的模板语法和axios库来发送登录请求并处理返回结果。需要注意的是,这只是一个简单的示例,实际的登录页面还需要添加更多的功能和样式来提升用户体验。