在上一节中，我们成功设置了后端接口，并进行了测试，确认可以通过以下url访问：
https://www.php.cn/link/77b1932b3eec9f094a2b103001f0dff1
现在，我们将转向前端部分的实现。让我们打开HomeNew.vue文件，并进行以下修改：
-
首先，我们需要清空变量notices，使其成为一个空列表，以便后续从接口中获取数据。
立即学习“前端免费学习笔记（深入）”；
-
接下来，通过命令行安装axios插件，用于发送HTTP请求：
npm install axios --save
-
在methods部分编写请求函数，并在mounted生命周期钩子中调用该函数。这样可以确保页面在加载时自动发起请求，无需用户手动触发：
响应式黑色展台设计整站模板1.4.2下载响应式黑色展台设计整站模板，自带内核安装即用，图片文本实现可视化，方便修改，支持多种内容模型及自定义功能，可根据需要自行添加。模板特点： 1、安装即用，自带人人站CMS内核及企业站展示功能（产品，新闻，案例展示等），并可根据需要增加表单 搜索等功能（自带模板） 2、支持响应式 3、前端banner轮播图文本均已进行可视化配置 4、伪静态页面生成 5、支持内容模型、多语言、自定义表单、筛选、多条件搜
请注意，请求的host应为：https://www.php.cn/link/83f68e12355250e64cbd57b2e51c57ad。
-
最后，我们进行测试：
如图所示，最新一条公告信息已成功展示。由于底部区域空间有限，目前无法展示更多历史公告。
当前，我实现了一个列表展示，但后端传回的是单个数据。如果未来需要展示多条公告，只需修改后端即可。
本节内容到此结束。下一节，我们将正式开始，制定项目计划。
