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

相关文章

来自专栏木制robot技术杂谈

Python + Splinter 实现浏览器自动化操作入门指南

前言 Splinter 是用 Python 开发的一个开源web自动化测试的工具集。 它可以帮你自动化浏览器的行为,比如浏览 URLs 并和页面进行交互。 快...

3966
来自专栏喵了个咪的博客空间

PhalGo-初识PhalGO

PhalGo-初识PhalGO PhalGo是一个API开发框架,因为使用了Echo框架同样也能用于MVC的开发,MVC具体可以参考Echo官方文档,对于Pha...

29910
来自专栏CRPER折腾记

NG2&4折腾记 --- 记NG2升级NG4 RC1之修正问题跑起来

再打一次辟谣:NG2->NG4不是重构,只是常规升级【统一版本而已,目前路由是3.x】, NG团队说以后不再以版本号为核心,统称angular,下半年NG5要出...

621
来自专栏极客生活

tableau绘制好看的折线图

671
来自专栏CSDN技术头条

Python 开发者的微信小程序开发实践

导读 在知乎上,有人提问“如何使用 Python 开发微信小程序”。 ? 其实微信小程序作为一个前端的机制,Python 并不能插上边。只不过可以作为后端接口...

6267
来自专栏开源优测

Robot Framework | 03 基于Public API创建你RFS测试

概述 本文就上一文基于RobotFramework关键字语法实现的百度搜索实例改为有Public API来实现 让大家看下如何基于代码模式来实现基于RobotF...

2635
来自专栏知无涯

如何用PHP获取Bing背景图

33110
来自专栏程序员互动联盟

【答疑释惑】Android多国语言实现原理

先来看一下网友的问题: ? 网友们问的问题是android中布局文件中android:text="hello_world"和 android:text="@s...

29810
来自专栏前端杂谈

移动端引入的字体文件过大处理方法

62722
来自专栏Youngxj

emlog媒体范修改首页显示文章是否收录

1692

扫码关注云+社区