Rumah > hujung hadapan web > View.js > teks badan

Menggunakan Pelayan JSON untuk melaksanakan data Mock dalam projek Vue

王林
Lepaskan: 2023-06-09 16:06:50
asal
1160 orang telah melayarinya

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
Salin selepas log masuk

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 }
  ]
}
Salin selepas log masuk

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"
},
Salin selepas log masuk

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

npm run json-server
Salin selepas log masuk

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
Salin selepas log masuk

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;
  });
}
Salin selepas log masuk

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>
Salin selepas log masuk

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!

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan