vue和springboot实现网页聊天_使用 SpringBoot+Vue 实现留言版-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_39963174/article/details/112887167

本文介绍了如何使用Vue和SpringBoot构建一个网页聊天留言版。首先，通过vue ui创建Vue项目，然后在SpringBoot项目中配置数据库连接、创建实体类、JpaRepository接口及Controller。接着解决了跨域问题，并在前端安装axios和Element UI，编写Home页面展示留言。最后，实现了留言的增删功能和页面加载时获取留言列表。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一.新建Vue项目和SpringBoot项目

新建Vue项目

新建文件夹SpringBoot-Vue-MessageBoard

创建Vue项目使用vue ui命令(需要vue 3.0

选择刚才的目录

名字为Vue创建后V还是小写创建后可以改为大写

取消git初始化

手动配置

取消

打开

创建项目，不保存预设

新建SpringBoot项目

用IDEA打开SpringBoot-Vue-MessageBoard这个目录

创建SpringBoot项目

右键

选择Spring Initializr

选择这四个

名字改为SpringBoot

二. 后端

配置application.properties

#Mysql

spring.datasource.url=jdbc:mysql://localhost:3306/enaium?useUnicode=true&characterEncoding=UTF-8&serverTimezone=Asia/Shanghai

spring.datasource.username=root

spring.datasource.password=root

spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver

spring.jpa.show-sql= true

spring.jpa.properties.hibernate.format_sql = true

#Server

server.port=8181

写实体类

package cn.enaium.message.entity;

import lombok.AllArgsConstructor;

import lombok.Data;

import lombok.NoArgsConstructor;

import javax.persistence.Entity;

import javax.persistence.Id;

/**

* Project: message

* -----------------------------------------------------------

@Data

@Entity

@NoArgsConstructor

@AllArgsConstructor

public class Message {

@Id

private Long id;

private String author;

private String message;

private String time;

}

实体类Jpa

package cn.enaium.message.repository;

import cn.enaium.message.entity.Message;

import org.springframework.data.jpa.repository.JpaRepository;

/**

* Project: message

* -----------------------------------------------------------

public interface MessageRepository extends JpaRepository {

}

Controller

package cn.enaium.message.controller;

import cn.enaium.message.entity.Message;

import cn.enaium.message.repository.MessageRepository;

import org.springframework.beans.factory.annotation.Autowired;

import org.springframework.web.bind.annotation.GetMapping;

import org.springframework.web.bind.annotation.RequestMapping;

import org.springframework.web.bind.annotation.RequestParam;

import org.springframework.web.bind.annotation.RestController;

import java.text.SimpleDateFormat;

import java.util.Date;

import java.util.List;

/**

* Project: message

* -----------------------------------------------------------

@RestController

public class Controller {

@Autowired

private MessageRepository messageRepository;

@RequestMapping("/getMessages")

private List getMessages() {

return messageRepository.findAll();//遍历所有留言

}

@GetMapping("/postMessage")

private String postMessage(@RequestParam String author, @RequestParam String message) {

if(author.replaceAll(" ","").equals("") || message.replaceAll(" ","").equals("")) {

return "filed";

}//判断名字和留言是否为空

messageRepository.save(new Message((long) (messageRepository.findAll().size() + 1),author,message,new SimpleDateFormat("yyyy-MM-dd HH:mm:ss").format(new Date())));//保存留言到数据库

return "success";

}

解决跨源请求问题

package cn.enaium.message.config;

import org.springframework.context.annotation.Configuration;

import org.springframework.web.servlet.config.annotation.CorsRegistry;

import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

/**

* Project: message

* -----------------------------------------------------------

@Configuration

public class CorsConfig implements WebMvcConfigurer {