一行命令, 静态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 条评论
登录 后参与评论

相关文章

来自专栏猿份到

maven私服快速入门

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

31280
来自专栏difcareer的技术笔记

Android启动过程分析-从按下电源键到第一个用户进程[转载]正文

对Android最初的启动过程一直没有清晰的认识,看到一篇好文,转载一下: http://blog.jobbole.com/67931/ http://ww...

8220
来自专栏云计算教程系列

如何在CentOS 7上安装和配置mod_deflate

Mod_deflate是一个Apache模块,它允许在发送到客户端之前压缩Web服务器的输出。一旦您的网站内容的大小被压缩,其大小就会变小,客户端可以更快地下载...

22000
来自专栏北京马哥教育

利用TCMalloc优化Nginx的性能

TCMalloc的全称为Thread-Caching Malloc,是谷歌开发的开源工具google-perftools中的一个成员。与标准的glibc库的Ma...

26350
来自专栏xiaoxi666的专栏

Git中的"pull request"真正比较的是什么?

利用git版本控制工具时,我们通常会从主分支拉出新分支进行开发,开发完成后创建pr(也就是pull request),让其他小伙伴帮忙review,确定代码没有...

15610
来自专栏最高权限比特流

Linux误删所有内核,恢复内核的解决办法

32630
来自专栏施炯的IoT开发专栏

Windows 10 IoT Serials 6 - 如何修改IoTStartupOnBoot.cmd文件

    使用Windows 10 IoT Core系统的朋友应该会比较熟悉IoTStartupOnBoot.cmd文件,该文件是系统启动以后加载的批处理文件,一...

27180
来自专栏FreeBuf

爬虫代理搭建与批量安装

代理对于搞爬虫的都不会陌生。公司有一批阿里云服务器用于分布式增量抓取,但对于一些封ip且只需进行一次全量抓取的数据源,或数据量级较小时,如果部署到爬虫集群上又太...

55550
来自专栏北京马哥教育

这些git技能够你用一年了

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

31070
来自专栏xingoo, 一个梦想做发明家的程序员

图文并茂 —— 基于Oozie调度Sqoop

利用大数据来做BI分析的时候,必不可少需要设置一些调度任务。 本篇就讲述一下如何利用hue来编辑shell操作,这里面的很多操作在其他的调度操作里面也是可...

22460

扫码关注云+社区

领取腾讯云代金券