在上一节中，我们成功设置了后端接口，并进行了测试，确认可以通过以下url访问：
https://www.php.cn/link/77b1932b3eec9f094a2b103001f0dff1
现在，我们将转向前端部分的实现。让我们打开HomeNew.vue文件，并进行以下修改：
-
首先，我们需要清空变量notices，使其成为一个空列表，以便后续从接口中获取数据。
立即学习“前端免费学习笔记（深入）”；
-
接下来，通过命令行安装axios插件，用于发送HTTP请求：
npm install axios --save
Element Plus UI Vue3下载Element Plus Vue3 桌面组件库。在开发 Vue 3.x 页面时调用，使用 Element Plus 组件（如 el-button、el-input、el-form、el-table 等）。
-
在methods部分编写请求函数，并在mounted生命周期钩子中调用该函数。这样可以确保页面在加载时自动发起请求，无需用户手动触发：
请注意，请求的host应为：https://www.php.cn/link/83f68e12355250e64cbd57b2e51c57ad。
-
最后，我们进行测试：
如图所示，最新一条公告信息已成功展示。由于底部区域空间有限，目前无法展示更多历史公告。
当前，我实现了一个列表展示，但后端传回的是单个数据。如果未来需要展示多条公告，只需修改后端即可。
本节内容到此结束。下一节，我们将正式开始，制定项目计划。
