作为一个前端开发者, 你可以会遇到没有测试数据的尴尬, 而这次我们用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:class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="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