Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”.

This article has participated in the “Digitalstar Project” and won a creative gift package to challenge the creative incentive money.

In the actual project development, most of the development mode is used to separate the front and back end, at this time there will be asynchronous situation, the back end interface has not been developed, and the front end needs data development. In this case, the mock data needs to be used first by the front end and targetUrl replaced when the back-end interface is written

withjson-serverThe mock data

With a.json file, a single command can start a local service, make a request to the service, and return the.json file contents. Give it a try:

Step 1 Global installation

cnpm i json-server -g
# check version number:
json-server --version
Copy the code
json-server list.json   / / the mock data
Copy the code

Step 2: Create a server folder.jsonfile

Set up server folder to store back-end data and set up XXX.json file

// server>dogList.json
{
  "dogs": [{"id": "001"."name": Dog1 "overweight"."age": 1
    },
    {
      "id": "002"."name": "Dog2 black"."age": 3
    },
    {
      "id": "003"."name": "Dog3 spots"."age": 5
    },
    {
      "id": "003"."name": "Dog3 big black is big."."age": 7}}]Copy the code

Step 3: Start the service

Open the command line in the current folder directory and enter

json-server dogList.json
json-server list.json --port 9000  # 9000 port number
# that is: (filename.json)
Copy the code

Step 4 > Modify the request in the test project

Modify the test.vue code as shown in the following section

<template>
  <div class="hello">
    <input type="text" v-model="dogname" @keyup.enter="add" />
    <button @click="find">To find the</button>
    <ul>
      <li v-for="dog in dogs" :key="dog.id">
        {{dog.name}} {{dog.age}} <button @click="del(dog.id)">delete</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>
Copy the code

Display effect: