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

上节我们搞定了后端接口，也进行测试可以成功访问了，url如下：

http://127.0.0.1:8000/get_news/

接下来就是前端的部分了

打开HomeNew.vue ，要改动的部分如下：

1. 把变量notices清空，变成一个空列表，之后的值要从接口中获取。

2. 通过命令安装axios插件，用来发出具体http请求:

npm install axios --save

3. 在methods中写出请求函数并在mounted中调用函数，这样可以让页面自动请求而无需用户手动触发：

上图中注意请求的host是：http://localhost:8000 ，不要写错，否则会有可能出现跨域错误。

4. 测试一下：

如上图，已经成功展示了最新一条的公告信息。因为这个底部区域暂时不够展示过多历史公告。

这里我是做了一个列表展示，但是后端传过来的是一个单个数据。如果未来把公告内容改成多条展示的话，只需修改后端即可。

好，本节到此结束。下一节，我们要进入正轨，打造项目计划。