Menggunakan Pelayan JSON untuk melaksanakan data Mock dalam projek Vue

Dalam pembangunan projek Vue, data Mock adalah bahagian penting. Data olok-olok boleh mensimulasikan data yang dikembalikan oleh pelayan, supaya pada peringkat awal pembangunan atau apabila tiada pelayan, kita boleh mencapai lelaran pantas tanpa mengganggu proses pembangunan. Artikel ini akan memperkenalkan cara menggunakan Pelayan JSON dalam projek Vue untuk melaksanakan data Mock.

1. Pengenalan kepada Pelayan JSON

Pelayan JSON ialah alat yang digunakan untuk membina API RESTful secara automatik. Pemasangan Pelayan JSON agak mudah Kami boleh menggunakan npm untuk memasangnya, seperti yang ditunjukkan di bawah:

npm install -g json-server

Selepas pemasangan selesai, kami boleh mencipta fail db.json dalam direktori akar projek dan menulis dalam fail Kami memerlukan data simulasi. Format fail db.json adalah seperti berikut:

{
  "posts": [
    { "id": 1, "title": "json-server", "author": "typicode" },
    { "id": 2, "title": "Vue.js", "author": "Evan You" }
  ],
  "comments": [
    { "id": 1, "body": "some comment", "postId": 1 },
    { "id": 2, "body": "some other comment", "postId": 2 }
  ]
}

Dalam contoh ini, kami telah menentukan dua objek: siaran dan ulasan, yang boleh digunakan dalam permintaan POST dan GET.

2. Menggunakan Pelayan JSON dalam projek Vue

Menggunakan Pelayan JSON dalam projek Vue adalah sangat mudah. Seperti yang ditunjukkan di bawah:

"scripts": {
  "json-server": "json-server --watch db.json"
},

Kemudian kami menggunakan arahan berikut dalam terminal untuk memulakan json-server:

npm run json-server

Lawati http://localhost:3000/posts, dan kami boleh mendapatkan olok-olok data.

3. Menggunakan API dalam projek Vue

Kami boleh memulakan permintaan API yang disediakan oleh Pelayan JSON melalui pustaka Axios. Kami perlu memasang perpustakaan Axios dalam projek seperti berikut:

npm install axios --save

Contoh kod untuk menghantar permintaan menggunakan Axios adalah seperti berikut:

import axios from 'axios';

const BASE_URL = 'http://localhost:3000/';

axios.defaults.baseURL = BASE_URL;

export function getPosts() {
  return axios.get('posts').then((res) => {
    return res.data;
  });
}

export function getPostById(id) {
  return axios.get(`posts/${id}`).then((res) => {
    return res.data;
  });
}

export function addPost(post) {
  return axios.post('posts', post).then((res) => {
    return res.data;
  });
}

export function updatePost(id, post) {
  return axios.put(`posts/${id}`, post).then((res) => {
    return res.data;
  });
}

export function deletePost(id) {
  return axios.delete(`posts/${id}`).then((res) => {
    return res.data;
  });
}

Dalam contoh ini, kami mendedahkan banyak fungsi API, Termasuk mendapatkan semua artikel, mendapatkan artikel tunggal, mencipta artikel, mengemas kini artikel, memadam artikel, dll. Anda boleh menentukan API ini mengikut keperluan anda.

Contoh kod untuk menggunakan API ini dalam komponen Vue adalah seperti berikut:

<template>
  <ul>
    <li v-for="post in posts" :key="post.id">
      {{ post.title }}
    </li>
  </ul>
</template>

<script>
import { getPosts } from '@/api';

export default {
  data() {
    return {
      posts: [],
    };
  },
  created() {
    this.fetchData();
  },
  methods: {
    fetchData() {
      getPosts().then((data) => {
        this.posts = data;
      });
    },
  },
};
</script>

Dalam contoh ini, kami mengikat API untuk mendapatkan semua artikel kepada kaedah yang dibuat apabila komponen dibuat Kaedah ini akan dicetuskan apabila. Panggil API dalam kaedah untuk mendapatkan data, dan akhirnya mengikat data pada atribut siaran supaya ia boleh dipaparkan dalam templat komponen.

Setakat ini, kami telah berjaya menggunakan Pelayan JSON untuk melaksanakan data Mock dalam projek Vue dan menggunakan Axios untuk menghantar permintaan API yang disediakan oleh Pelayan JSON. Ini membolehkan kami membangunkan dan menguji projek secara bebas, menjadikan pembangunan lebih cekap.

Atas ialah kandungan terperinci Menggunakan Pelayan JSON untuk melaksanakan data Mock dalam projek Vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!