开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第20天，点击查看活动详情
上一篇文章中我们介绍了一下fastmock在线模拟接口工具，接下来我们将使用fastmock编写题目接口并且通过request发送get请求获取到数据渲染到页面上
- 我们使用fastmock编写接口的格式如下代码所示：
{
"code": 200,
"data": [{
title: "1.哪个不是江西国家级非遗传统舞蹈?",
answer: "D：",
options: [{
code: "A：",
option: "永新盾牌舞",
},
{
code: "B：",
option: "婺源傩舞",
},
{
code: "C：",
option: "南丰傩舞",
},
{
code: "D：",
option: "东北秧歌",
},
]
},
]
}
这是一个题目 数据编写，把四个选项当作数组对象的数组，然后可以多写几个类似的，当请求发送成功的时候会返回code码为200。
- 接口编写完成之后我们就可以通过request发送get请求获取到数据，请求地址就是我们fastmock项目中的预览接口的地址
- 在项目中发送请求看看，我们在页面中定义一个 getSubject方法，然后发送封装过的request请求，然后console.log打印一下res,具体的代码如下所示：
getSubject() {
this.$request("/tabbar3/vider", {}, "GET").then((res) => {
console.log(res);
});
},
- 然后这个请求是需要在页面刚加载的时候就发送的，所以这个方法需要在onLoad里面调用，onLoad里面的代码如下所示：
onLoad() {
this.getSubject();
},
- 然后我们进入页面之后就会看到浏览器的控制台打印了这么一些数据，如下图所示：
这些正是我们所需要的题目数据，我们return一个空数组subject:[]来接收他，让res.data.data的内容赋值给subject，然后就可以通过v-for循环渲染这些数据展示到页面上了
