vue springboot 一对一聊天代码示例
时间: 2024-04-10 07:25:16 浏览: 70
Vue和Spring Boot是两个独立的技术,可以结合使用来实现一对一聊天功能。下面是一个简单的代码示例:
前端部分(Vue):
```html
<template>
<div>
<div v-for="message in messages" :key="message.id">
{{ message.sender }}: {{ message.content }}
</div>
<input v-model="newMessage" type="text" />
<button @click="sendMessage">发送</button>
</div>
</template>
<script>
export default {
data() {
return {
messages: [],
newMessage: ""
};
},
methods: {
sendMessage() {
// 发送消息的逻辑
// 使用axios或其他方式将消息发送给后端
// 示例中假设后端提供了一个接口 /api/sendMessage
axios.post("/api/sendMessage", { content: this.newMessage })
.then(response => {
// 发送成功后更新消息列表
this.messages.push({
id: response.data.id,
sender: "我",
content: this.newMessage
});
this.newMessage = "";
})
.catch(error => {
console.error(error);
});
}
},
mounted() {
// 获取历史消息的逻辑
// 使用axios或其他方式从后端获取历史消息
// 示例中假设后端提供了一个接口 /api/getMessages
axios.get("/api/getMessages")
.then(response => {
this.messages = response.data;
})
.catch(error => {
console.error(error);
});
}
};
</script>
```
后端部分(Spring Boot):
```java
@RestController
@RequestMapping("/api")
public class ChatController {
private List<Message> messages = new ArrayList<>();
@GetMapping("/getMessages")
public List<Message> getMessages() {
return messages;
}
@PostMapping("/sendMessage")
public Message sendMessage(@RequestBody Message message) {
message.setId(UUID.randomUUID().toString());
messages.add(message);
return message;
}
}
public class Message {
private String id;
private String sender;
private String content;
// 省略构造函数、getter和setter
}
```
以上代码示例演示了一个简单的一对一聊天功能,前端使用Vue框架进行页面展示和消息发送,后端使用Spring Boot框架提供接口来处理消息的发送和获取。你可以根据实际需求进行修改和扩展。
阅读全文