一行命令, 静态json变身api

作为一个前端开发者, 你可以会遇到没有测试数据的尴尬, 而这次我们用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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏北京马哥教育

这些git技能够你用一年了

用git有一年了,下面是我这一年来的git使用总结,覆盖了日常使用中绝大多数的场景。嗯,至少是够用一年了,整理出来分享给大家,不明白的地方可以回复交流。 ---...

2817
来自专栏腾讯云TStack专栏

nova backup 剖析

nova backup 可以指定虚拟机备份类型,备份保留的数目,那 nova backup 到底是怎么做到备份虚拟机的?下面为大家拨开层层迷雾。

1930
来自专栏北京马哥教育

Python之包管理工具快速入门

学Python最简单的方法是什么?推荐阅读:30万年薪Python开发工程师成长魔法 在Python环境中已经有很多成熟的包,可以通过安装这些包来扩展我们的程序...

2775
来自专栏LIN_ZONE

Linux各目录及每个目录的详细介绍(转载)

Linux目录和Windows目录有着很大的不同,Linux目录类似一个树,最顶层是其根目录,如下图:

1042
来自专栏小轻论坛

FTP服务器连不上,那是因为关闭了这个功能

一直在使用FlashFXP工具上传源码,最近换了宽带,新的路由器,发现已经登陆不进FTP了。我尝试从服务器后台进FTP,看下是不是我的工具有问题。结果FTP地址...

1262
来自专栏无所事事者爱嘲笑

react-native添加react-native-vector-icons插件android遇到的问题

1734
来自专栏蓝天

全面了解安装使用Linux下的日志文件系统

文件系统是用来管理和组织保存在磁盘驱动器上的数据的系统软件,其实现了数据完整性的保证,也就是保证写入磁盘的数据和随后读出的内容的一致性。除了保存以文件方式存储的...

922
来自专栏武培轩的专栏

当你在浏览器地址栏输入一个URL后回车,将会发生的事情?

当我们在浏览器的地址栏输入 www.cnblogs.com ,然后回车,回车到看到页面到底发生了什么呢? 域名解析 --> 发起TCP的3次握手 --> 建立T...

3457
来自专栏应用案例

Hexo博客的安装部署及多电脑同步

Hexo安装教程很多,我这里尽可能的讲的细一些,把容易踩坑的地方以及后期多电脑同步所遇到的问题列出来,以便给自己及大家参考。本文主要讲解安装部署后源文件同步问题...

1.2K7
来自专栏猿份到

maven私服快速入门

android 开发时,类库依赖管理一般是拷贝到相应 libs 目录然后配置文件中引用该类库,或者引用 jceneter 中第三方类库等。 前者...

2858

扫码关注云+社区