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

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

Menu_get_platform

Menu_add_platform

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

打开Menu.vue

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

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

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

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

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

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

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

所以代码应该是这样的：

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

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

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

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

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

而此时的前端是这样的：

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

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