在springboot+vue中,前端发送用户的username给后端,后端查询到用户的全部信息,怎么返回给前端,并在前端vue上渲染,请给我vue和Java的代码
时间: 2024-02-25 17:59:37 浏览: 61
基于SpringBoot+Vue大学生交友系统的前端源码
好的,首先是Java代码,假设你已经定义了一个User类,其中包含了用户的各种信息,你可以在Controller中定义一个接口来获取用户信息,代码如下:
```java
@RestController
@RequestMapping("/user")
public class UserController {
@Autowired
private UserService userService;
@GetMapping("/{username}")
public User getUserByUsername(@PathVariable String username) {
return userService.getUserByUsername(username);
}
}
```
这段代码定义了一个GET请求的接口,路径为"/user/{username}",其中的{username}表示用户的用户名,通过@PathVariable注解获取。getUserByUsername方法会调用userService中的方法来获取用户信息,并将用户信息返回。
接下来是Vue代码,假设你已经使用了axios库来发送请求,你可以在Vue的methods中定义一个getUser方法来获取用户信息,代码如下:
```javascript
methods: {
getUser(username) {
axios.get(`/user/${username}`)
.then(response => {
this.user = response.data;
})
.catch(error => {
console.log(error);
});
}
}
```
这段代码定义了一个getUser方法,其中的username参数表示要获取的用户的用户名。通过axios库发送GET请求来获取用户信息,获取成功后将返回的数据赋值给Vue的data中的user属性,以便在页面上渲染。
最后,在Vue的页面中可以使用{{}}来显示用户信息,代码如下:
```html
<template>
<div>
<input v-model="username" placeholder="请输入用户名" />
<button @click="getUser(username)">查询</button>
<div v-if="user">
<p>用户名:{{ user.username }}</p>
<p>姓名:{{ user.name }}</p>
<p>年龄:{{ user.age }}</p>
<!-- 其他用户信息 -->
</div>
</div>
</template>
```
这段代码定义了一个输入框和一个查询按钮,用户输入用户名后点击查询按钮会调用getUser方法,获取到用户信息后会在页面上显示用户的各种信息。注意,在显示用户信息之前需要判断user是否存在,否则会出现渲染错误。
阅读全文