时间:2025-04-24 作者:游乐小编
在上一节中,我们成功设置了后端接口,并进行了测试,确认可以通过以下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。
最后,我们进行测试:
如图所示,最新一条公告信息已成功展示。由于底部区域空间有限,目前无法展示更多历史公告。
当前,我实现了一个列表展示,但后端传回的是单个数据。如果未来需要展示多条公告,只需修改后端即可。
本节内容到此结束。下一节,我们将正式开始,制定项目计划。
2022-09-17 13:04
手游攻略2022-05-08 21:12
手游攻略2022-07-30 08:06
八卦新闻2021-12-12 12:51
单机攻略2021-12-16 01:00
单机攻略