前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >一行命令, 静态json变身api

一行命令, 静态json变身api

作者头像
zhaoolee
发布2018-06-14 14:47:29
9380
发布2018-06-14 14:47:29
举报
文章被收录于专栏:木子昭的博客

作为一个前端开发者, 你可以会遇到没有测试数据的尴尬, 而这次我们用json-server, 优雅的解决这个问题

效果

关于 json-server

json-server 全局安装方式: npm install -g json-server 使用方式: 如果有一个名为douyu.json的文件, 它的启动命令为 json-server --watch douyu.json

启动界面 json-server最外层json的值, 默认只支持数组对象

使用axios发出请求

代码语言:javascript
复制
axios.get("http://localhost:3000/data")
.then(res=> {
    return (res.data.rl)
})

效果测试

动图效果

核心代码:

vue组件化代码
代码语言:javascript
复制
<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>

数据来源:

代码语言:javascript
复制
https://www.douyu.com/gapi/rkc/directory/2_201/1
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2018.05.05 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 关于 json-server
  • 使用axios发出请求
  • 效果测试
  • 核心代码:
    • vue组件化代码
    • 数据来源:
    领券
    问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档