One line command, static json changes to api

As a front-end developer, you may encounter the embarrassment of no test data. This time, we use JSON server to solve this problem gracefully


about json-server


Global installation mode:

npm install -g json-server

Usage: if there is a file named douyu.json, its startup command is

json-server --watch douyu.json

Boot interface

json server the value of the outermost json. Only arrays and objects are supported by default

Using axios to make requests

.then(res=> {
    return (

Effect test

Motion picture effect

Core code:

vue component code

    <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">
                <div class="title">{{ anchorInfo['name'] }}</div>
                <article>{{ anchorInfo['desc'] }}</article>

import axios from 'axios';

export default {
    data: function() {
        return {
            message: "Fighting fish anchor",
            anchorsInfo: this.getPersonImageAddr()

    methods: {

        getPersonImageAddr: function(){
            let anchorsInfo = [];

            .then(res=> {
                return (
                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'];
                return anchorsInfo;
            return anchorsInfo


<style scoped lang="less">
    .source-atom {

        display: flex;
        flex-wrap: wrap;
        justify-content: center;


        float: left;
        margin: 10px;
        padding: 10px;
        border: 1px solid #BDBDBD;

    .title {

        font-size: 20px;
        color: #A84631

Data source:

Tags: JSON axios npm Vue

Posted on Fri, 20 Mar 2020 14:35:12 -0400 by jaytux