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