前端mock数据之 json-server 一条命令启动服务

小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。

本文已参与「掘力星计划」，赢取创作大礼包，挑战创作激励金。

在实际项目开发中, 大多数用到的是前后端分离的开发模式, 这时候就会出现不同步的情况, 后端接口还没有开发出来, 前端又需要数据进行开发. 这种情况下就需要前端先行 mock 数据, 等后端接口写好的时候进行 targetUrl 替换即可

用 json-server mock 数据

只需一个 .json文件, 一条命令即可启动一个本地服务, 可以向这个服务发起请求, 并返回 .json的文件内容. 快来试一试吧:

第一步 全局安装

cnpm i json-server -g
# 查看版本号:
json-server --version

json-server list.json   // mock 数据

第二步: 新建服务端文件夹 .json文件

建立 server 文件夹存放后端数据, 建立 xxx.json 文件

// server>dogList.json
{
  "dogs": [
    {
      "id": "001",
      "name": "dog1 胖墩",
      "age": 1
    },
    {
      "id": "002",
      "name": "dog2 小黑",
      "age": 3
    },
    {
      "id": "003",
      "name": "dog3 黑子",
      "age": 5
    },
    {
      "id": "003",
      "name": "dog3 大黑很大了",
      "age": 7
    }
  ]
}

第三步: 启动服务

在当前文件夹目录打开命令行, 输入

json-server dogList.json
json-server list.json --port 9000  # 可更改成9000端口号
# 即: (文件名.json)

第四步> 测试项目中修改请求

按照下图部分修改 test.vue代码

<template>
  <div class="hello">
    <input type="text" v-model="dogname" @keyup.enter="add" />
    <button @click="find">查找</button>
    <ul>
      <li v-for="dog in dogs" :key="dog.id">
        {{dog.name}} {{dog.age}} <button @click="del(dog.id)">删除</button>
      </li>
    </ul>
  </div>
</template>

<script>
  import axios from 'axios'
  export default {
    name: 'test',
    data() {
      return {
        dogs: [],
        dogname: '',
      }
    },
    created() {
      this.getData()
    },
    methods: {
      find() {
        axios
          .get('/api/dogs', {
            params: {
              name_like: this.dogname,
            },
          })
          .then((res) => {
            this.dogs = res.data
          })
      },
      getData() {
        axios.get('/api/dogs').then((res) => {
          this.dogs = res.data
        })
      },
      add() {
        axios
          .post(
            '/api/dogs',
            {
              name: this.dogname,
              age: 1,
            },
            {
              headers: {
                'Content-Type': 'application/json',
              },
            }
          )
          .then(() => {
            this.getData()
          })
        this.dogname = ''
      },
      del(id) {
        axios.delete('/api/dogs/' + id).then(() => {
          this.getData()
        })
      },
    },
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped></style>

展示效果: