vue3+springboot新闻管理系统代码实现

这里提供一个简单的Vue3 + Spring Boot实现的新闻管理系统的代码示例：

前端Vue3代码：

<template>
  <div>
    <table>
      <thead>
        <tr>
          <th>标题</th>
          <th>作者</th>
          <th>发布日期</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="news in newsList" :key="news.id">
          <td>{{ news.title }}</td>
          <td>{{ news.author }}</td>
          <td>{{ news.publishDate }}</td>
          <td>
            <button @click="editNews(news)">编辑</button>
            <button @click="deleteNews(news.id)">删除</button>
          </td>
        </tr>
      </tbody>
    </table>
    <div>
      <h3 v-if="!editing">添加新闻</h3>
      <h3 v-else>编辑新闻</h3>
      <form>
        <div>
          <label for="title">标题:</label>
          <input type="text" v-model="news.title" id="title" />
        </div>
        <div>
          <label for="author">作者:</label>
          <input type="text" v-model="news.author" id="author" />
        </div>
        <div>
          <label for="publishDate">发布日期:</label>
          <input type="date" v-model="news.publishDate" id="publishDate" />
        </div>
        <button type="button" @click="saveNews">保存</button>
      </form>
    </div>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  name: 'NewsManagement',
  setup() {
    const editing = ref(false);
    const news = ref({
      id: '',
      title: '',
      author: '',
      publishDate: '',
    });
    const newsList = ref([]);

    const getNewsList = async () => {
      const response = await fetch('/api/news');
      const data = await response.json();
      newsList.value = data;
    };

    const saveNews = async () => {
      if (editing.value) {
        // 编辑新闻
        await fetch(`/api/news/${news.value.id}`, {
          method: 'PUT',
          headers: {
            'Content-Type': 'application/json',
          },
          body: JSON.stringify(news.value),
        });
      } else {
        // 添加新闻
        await fetch('/api/news', {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json',
          },
          body: JSON.stringify(news.value),
        });
      }
      await getNewsList();
      editing.value = false;
      news.value = {
        id: '',
        title: '',
        author: '',
        publishDate: '',
      };
    };

    const editNews = (selectedNews) => {
      editing.value = true;
      news.value = { ...selectedNews };
    };

    const deleteNews = async (id) => {
      await fetch(`/api/news/${id}`, {
        method: 'DELETE',
      });
      await getNewsList();
    };

    getNewsList();

    return {
      newsList,
      news,
      editing,
      saveNews,
      editNews,
      deleteNews,
    };
  },
};
</script>

后端Spring Boot代码：

@RestController
@RequestMapping("/api/news")
public class NewsController {

    @Autowired
    private NewsRepository newsRepository;

    @GetMapping
    public List<News> getAllNews() {
        return newsRepository.findAll();
    }

    @PostMapping
    public News addNews(@RequestBody News news) {
        return newsRepository.save(news);
    }

    @PutMapping("/{id}")
    public News updateNews(@PathVariable Long id, @RequestBody News updatedNews) {
        News news = newsRepository.findById(id).orElseThrow(() -> new NotFoundException("News not found"));
        news.setTitle(updatedNews.getTitle());
        news.setAuthor(updatedNews.getAuthor());
        news.setPublishDate(updatedNews.getPublishDate());
        return newsRepository.save(news);
    }

    @DeleteMapping("/{id}")
    public void deleteNews(@PathVariable Long id) {
        newsRepository.deleteById(id);
    }
}

此代码演示了如何使用Vue3和Spring Boot构建一个简单的新闻管理系统，其中Vue3负责前端展示和交互，Spring Boot负责后端数据的增删改查。在此示例中，我们使用了Vue3的Composition API和Spring Boot的RestController来实现该系统。需要注意的是，此示例仅提供了基本的功能，实际应用中还需要加入更多的功能和安全性措施。