作为一个前端开发者, 你可以会遇到没有测试数据的尴尬, 而这次我们用
json-server, 优雅的解决这个问题效果
关于 json-server
json-server
全局安装方式:
npm install -g json-server使用方式: 如果有一个名为
douyu.json的文件, 它的启动命令为json-server --watch douyu.json启动界面
json-server最外层json的值, 默认只支持数组和对象
使用axios发出请求
axios.get("http://localhost:3000/data")
.then(res=> {
return (res.data.rl)
})
效果测试
动图效果
核心代码:
vue组件化代码
<template>
<div class="source-atom">
<div v-for="anchorInfo in anchorsInfo" class="atom">
<img v-bind:src="anchorInfo['image']" height="200" width="200" alt="" v-bind:title="message">
<section>
<div class="title">{{ anchorInfo['name'] }}</div>
<article>{{ anchorInfo['desc'] }}</article>
</section>
</div>
</div>
</template>
<script>
import axios from 'axios';
export default {
data: function() {
return {
message: "斗鱼主播",
anchorsInfo: this.getPersonImageAddr()
}
},
methods: {
getPersonImageAddr: function(){
let anchorsInfo = [];
axios.get("http://localhost:3000/data")
.then(res=> {
return (res.data.rl)
})
.then(res=>{
let anchorInfo = []
for (let i = 0; i < res.length; i++){
let anchorInfo = {};
anchorInfo["name"] = res[i]['nn'];
anchorInfo["image"] = res[i]['rs1'];
anchorInfo["desc"] = res[i]['rn'];
anchorsInfo.push(anchorInfo)
}
return anchorsInfo;
})
return anchorsInfo
}
}
}
</script>
<style scoped lang="less">
.source-atom {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.atom{
float: left;
margin: 10px;
padding: 10px;
border: 1px solid #BDBDBD;
}
.title {
font-size: 20px;
color: #A84631
}
</style>
数据来源:
https://www.douyu.com/gapi/rkc/directory/2_201/1
