【测开中台教程-08】菜单前端的动态获取关联平台数据并展示。

2024-09-23 11:17:57 浏览数 (1)

上节课我们已经搞定了俩大接口,他们分别是:

Menu_get_platform

代码语言:javascript复制
Menu_add_platform

本节课,我们继续来渲染前端的菜单模块。

打开Menu.vue

我们先来思考下,怎么发出一个请求来获取后台数据。

首先我们需要一个发请求的组件,也就是axios函数。

然后还要考虑这个函数的axios请求的触发时机,应该就是自动触发。

然后考虑到拿到返回的数据后,怎么使用?当然是放在一个变量中,然后菜单里具体的循环来循环这个变量展示,所以这个变量应该是个列表。

而变量通常是放在data()属性中的。

而函数通常是放在methods:中的。

而自动触发的调用代码通常是放在mounted()属性中的。

所以代码应该是这样的:

上图中,我们弄了一个platform_list当做那个变量。同名函数来获取平台列表。

那在上面dom层要怎么写for循环来遍历呢?请看下图:

这里我们添加了v-for循环,i作为循环体,也就是每一个关联平台的数据字典,i.name就是展示名称。用{{}}裹起来才可以使用。

如果此时我们把后台views.py中添加一个print,就可以清晰的看到我们获取了什么东西...

刷新页面就会重新触发请求,就可以看到django控制台展示的了。

而此时的前端是这样的:

也就是说,正常展示了关联的平台。

好,本节课到此结束,下节课来实现添加关联按钮的功能。

0 人点赞