vue+springboot,登录界面有三个单选框,根据单选框的选择进行登录成功的跳转
时间: 2024-03-04 08:49:45 浏览: 16
好的,对于这个问题,我可以给您提供一些思路和代码示例:
1. 在前端界面,使用 Vue 实现三个单选框,并且设置它们的值分别为 1、2、3:
```html
<template>
<div>
<input type="radio" v-model="selected" value="1"> 单选框1
<input type="radio" v-model="selected" value="2"> 单选框2
<input type="radio" v-model="selected" value="3"> 单选框3
<button @click="login">登录</button>
</div>
</template>
<script>
export default {
data() {
return {
selected: '1'
}
},
methods: {
login() {
// 根据选中的单选框的值,发送登录请求
// 可以使用 axios 或者其他的 HTTP 请求库
// 发送请求的 URL 带上选中的值,例如 /login?type=1
}
}
}
</script>
```
2. 在后端界面,使用 Spring Boot 实现登录请求的处理,解析参数并且根据不同的值跳转到不同的页面:
```java
@RestController
public class LoginController {
@GetMapping("/login")
public String login(@RequestParam("type") int type) {
// 根据不同的 type 值,跳转到不同的页面
if (type == 1) {
return "redirect:/page1";
} else if (type == 2) {
return "redirect:/page2";
} else if (type == 3) {
return "redirect:/page3";
} else {
return "redirect:/error";
}
}
@GetMapping("/page1")
public String page1() {
return "page1";
}
@GetMapping("/page2")
public String page2() {
return "page2";
}
@GetMapping("/page3")
public String page3() {
return "page3";
}
@GetMapping("/error")
public String error() {
return "error";
}
}
```
以上就是一个简单的实现方式,当然具体实现过程还需要您自己根据实际情况进行调整和完善。希望对您有所帮助!