【deepseek用例生成平台-10】公告功能前端实现

在上一节中，我们成功设置了后端接口，并进行了测试，确认可以通过以下url访问：

https://www.php.cn/link/77b1932b3eec9f094a2b103001f0dff1

现在，我们将转向前端部分的实现。让我们打开HomeNew.vue文件，并进行以下修改：

1. 首先，我们需要清空变量notices，使其成为一个空列表，以便后续从接口中获取数据。

   

   立即学习“前端免费学习笔记（深入）”；

2. 接下来，通过命令行安装axios插件，用于发送HTTP请求：

   npm install axios --save

   

3. 在methods部分编写请求函数，并在mounted生命周期钩子中调用该函数。这样可以确保页面在加载时自动发起请求，无需用户手动触发：

   

   请注意，请求的host应为：https://www.php.cn/link/83f68e12355250e64cbd57b2e51c57ad。

4. 最后，我们进行测试：

   

   如图所示，最新一条公告信息已成功展示。由于底部区域空间有限，目前无法展示更多历史公告。

   当前，我实现了一个列表展示，但后端传回的是单个数据。如果未来需要展示多条公告，只需修改后端即可。

本节内容到此结束。下一节，我们将正式开始，制定项目计划。

来源：互联网