vue+spring boot实现公告发布

实现公告发布的基本思路是，前端页面提供一个表单，用户输入公告内容，点击发布按钮，然后将公告信息通过Ajax请求发送到后端，后端接收到请求后将公告信息保存到数据库中，再返回一个响应告诉前端保存成功。

下面是一个简单的实现过程：

1. 创建公告表

首先，在数据库中创建一个公告表，包含id、标题、内容、发布时间等字段。

2. 创建后端接口

使用Spring Boot创建一个后端接口，接收前端发送的公告信息，将公告信息保存到数据库中。可以使用Spring Data JPA来实现对数据库的操作。

例如，创建一个名为AnnouncementController的控制器类，包含一个POST方法用于接收并保存公告信息：

@RestController
@RequestMapping("/announcement")
public class AnnouncementController {
 
    @Autowired
    private AnnouncementRepository announcementRepository;
 
    @PostMapping("/add")
    public String addAnnouncement(@RequestBody Announcement announcement) {
        announcementRepository.save(announcement);
        return "success";
    }
}

3. 创建前端页面

使用Vue.js创建一个前端页面，包含一个表单，用户输入公告信息并点击发布按钮后将公告信息发送到后端接口。

例如，创建一个名为AnnouncementForm的Vue组件，包含一个表单和一个发布按钮：

<template>
  <form>
    <div>
      <label for="title">标题：</label>
      <input type="text" id="title" v-model="title" />
    </div>
    <div>
      <label for="content">内容：</label>
      <textarea id="content" v-model="content"></textarea>
    </div>
    <button type="button" @click="addAnnouncement">发布</button>
  </form>
</template>

在组件中定义一个addAnnouncement方法，用于将公告信息发送到后端接口：

<script>
import axios from 'axios';

export default {
  data() {
    return {
      title: '',
      content: ''
    };
  },
  methods: {
    addAnnouncement() {
      const announcement = {
        title: this.title,
        content: this.content
      };
      axios.post('/announcement/add', announcement)
        .then(response => {
          console.log(response.data);
        })
        .catch(error => {
          console.log(error);
        });
    }
  }
};
</script>

4. 集成前后端

将上面的前后端代码集成到一起，启动Spring Boot应用和Vue.js应用，访问Vue.js应用中的公告发布页面，输入公告信息并点击发布按钮，就可以将公告信息保存到数据库中了。

以上就是一个简单的Vue.js和Spring Boot实现公告发布的示例。当然，实际开发中还需要考虑一些安全性和可用性方面的问题，例如防止恶意攻击、数据校验、分页查询等。