当前位置: 首页 > 软件教程 > 文章内容页

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

时间:2025-04-24    作者:游乐小编    

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

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

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

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

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

立即学习“前端免费学习笔记(深入)”;

接下来,通过命令行安装axios插件,用于发送HTTP请求:

npm install axios --save

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

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

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

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

最后,我们进行测试:

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

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

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

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

热门标签

热门推荐

更多

热门文章

更多

首页  返回顶部

本站所有软件都由网友上传,如有侵犯您的版权,请发邮件youleyoucom@outlook.com