5.3 组件设计：框架GameFrame

GameFrame就是我们要做的第一个组件，
从www.codessp.cn/dzGames复制游戏框架部分,具体做法如下：
1.选中角色扮演这几个文字，右键点击检查：
接下来鼠标在html代码部分移动，网页可以看到对应的部分被选中：
最后发现这个div就是我们要的：

整个复制下来作为GameFrame的template部分：
<template>
    <div>
        <div class="gameFrameName">
            <span>角色扮演</span>
            <a href="search.jsp?gametype=角色">更多</a>
        </div>
        <div class="game_list_div">
            <div class="game_content">
                <!-- 一个game_list就是一个游戏 -->
                <div class="game_list" style="clear: both;">
                    <div class="item_img" onclick="gameDetail('5866')">
                        <img class="gameIcon" src="https://img.d.cn/cp_admin/icon/501405/34679d89e8c5ad0ab2eedb3dc21507d3.png"/>
                    </div>
                    <div class="item_content" onclick="gameDetail('5866')">
                        <span class="game_channel">(当乐)</span>
                        <span class="game_name">弹弹岛2<span style="color: red">5.2 </span>
                        <span class="discount">折</span>
                        </span>
                        <span class="intro">华丽的战斗操作</span>
                    </div>
                    <div class="item_download">
                        <span class="dow">下载地址:</span>
                        <img class="platformicon" onclick="download(this)" data-url="https://pkg.d.cn/T1VUA9aK" src="https://www.codessp.cn/wxImage/android.png"/>
                    </div>
                </div>
                <!-- 还有若干个游戏，忽略-->
            </div>
        </div>
    </div>
</template>
script部分,GameFrame组件有一个frame属性，它的值是外部指定的，参见上一节
export default{
    name:"GameFrame",
    data(){
        return{
            games:[]//GameFrame内部包含的所有游戏，在GameFrame内部查询
        }
    },
    props:{
        frame:Object //外部传入的所有GameFrame数据
    }
}
这个时候如果启动网站，理论上可以看到很多个框架，每个框架上都写着"角色扮演"，都有一个游戏《弹弹岛2》
角色扮演这个值，应该用frame的tabName属性取代，也就是{{frame.tabName}}
这个组件里面包含若干个游戏，如果要展现动态的，游戏，需要查询接口：
接口如下：
请求的URL：https://www.codessp.cn/api/games
请求方式：get
要发送的参数：{type:游戏类型,num:游戏数量} 游戏类型是this.frame.gameType,游戏数量是this.frame.gameNum(参见上一节gameFrame表结构）
返回值：查找的游戏
例如这是一个取值的例子：
我们用www.json.cn查看数据：

查询数据的写法参考之前登录。
于是GameFrame组件里面应该有一个变量games，它用来保存查到的游戏，每个game的数据如上，然后就如5.2所描述的：
<template v-for="(g,i) in games" :key="i">
    <Game :game="g"/>
</template>
那么GameFrame的template部分应该是这样：
<template>
    <div>
        <div class="gameFrameName">
            <span>{{frame.tabName}}</span>
            <a href="search.jsp?gametype=角色">更多</a>
        </div>
        <div class="game_list_div">
            <div class="game_content">
                <!--循环显示游戏，游戏的html在Game组件 -->
                <template v-for="(g,i) in games" :key="i">
                    <Game :game="g"/>
                </template>
            </div>
        </div>
    </div>
</template>
接下来完成Game组件。