Cara mengendalikan pangkalan data dalam Vue.js

Dengan pembangunan teknologi bahagian hadapan moden, semakin ramai pembangun menumpukan pada cara menggabungkan bahagian hadapan dan bahagian belakang dengan lancar. Vue.js ialah rangka kerja JavaScript yang popular untuk membangunkan aplikasi web satu halaman interaktif. Dalam Vue.js, kita boleh menggunakan kaedah yang berbeza untuk berkomunikasi dengan pelayan, yang paling biasa ialah AJAX dan Axios. Walau bagaimanapun, dalam kebanyakan kes kita perlu menggunakan Vue.js dengan pangkalan data. Artikel ini akan memperkenalkan cara mengendalikan pangkalan data dalam Vue.js.

1. Baca dokumentasi

Perkara pertama yang perlu dilakukan apabila menggunakan Vue.js ialah memastikan anda telah membaca dokumentasi rasmi Vue.js. Dalam dokumentasi, pengarang Vue.js telah menerangkan dengan terperinci cara menggunakan Vue.js untuk berkomunikasi dengan pelayan, cara menggunakan Vuex untuk mengurus keadaan dan cara menyepadukan dengan perpustakaan luaran. Dalam dokumentasi rasmi Vue.js, anda boleh menemui modul dan perpustakaan yang serasi dengan bahasa hujung belakang anda, yang merupakan langkah penting untuk mula bekerja pada bahagian hadapan.

2. Pilih bahasa dan rangka kerja bahagian belakang yang sesuai

Apabila memilih bahasa dan rangka kerja bahagian belakang yang sesuai, sila pertimbangkan faktor berikut:

• Sokongan Pangkalan Data: Pilih bahasa dan rangka kerja yang menyokong pangkalan data yang anda ingin gunakan.
• Prestasi dan kebolehskalaan: Pilih bahasa dan rangka kerja yang boleh memenuhi keperluan prestasi dan kebolehskalaan sistem anda.
• Sokongan Komuniti: Pilih bahasa dan rangka kerja yang mempunyai sokongan komuniti yang kuat dan aktif.

Di sini, kami akan mengambil Node.js sebagai contoh dan menggunakan rangka kerja Express.js dan pangkalan data MongoDB untuk menggambarkan cara melaksanakan pangkalan data dalam Vue.js.

3. Pasang Node.js dan MongoDB

Mula-mula, anda perlu memasang Node.js dan MongoDB. Anda boleh memuat turunnya dari laman web rasmi dan ikut arahan untuk menyelesaikan pemasangan.

4. Buat projek Express.js

Selepas memasang Node.js dan MongoDB, buat projek Express.js pada baris arahan dengan menjalankan arahan berikut:

$ mkdir my-project
$ cd my-project
$ npm init
$ npm install express --save

Aplikasi Node.js yang ringkas ini mencipta pelayan Express.js. Sekarang kami akan menyediakan penghalaan dan perisian tengah pada pelayan ini.

5. Sediakan penghalaan dan perisian tengah

Dalam aplikasi Express.js, penghalaan dan perisian tengah adalah sangat penting. Laluan ialah gabungan laluan permintaan permintaan web dan peristiwa yang dikendalikan oleh kaedah HTTP. Middleware ialah fungsi yang dilaksanakan sebelum dan selepas permintaan diproses. Dalam aplikasi Vue.js, kami akan menggunakan Axios untuk menghantar permintaan ke pelayan Express.js.

Di sini, kami menyediakan laluan mudah yang akan mengembalikan data JSON yang diproses apabila pelanggan menghantar permintaan kepada pelayan. :

const express = require('express')
const app = express()
const port = 3000

app.get('/', (req, res) => {
  res.send('Hello World!')
})

app.get('/api/data', (req, res) => {
  const data = {
    name: 'Jack',
    age: 30
  }
  res.json(data)
})

app.listen(port, () => {
  console.log(`Example app listening at http://localhost:${port}`)
})

6. Buat Pangkalan Data MongoDB

Dalam langkah ini, kami akan menggunakan pangkalan data MongoDB untuk menyimpan data. MongoDB ialah pangkalan data berasaskan dokumen sumber terbuka. Tidak seperti pangkalan data hubungan tradisional, MongoDB tidak menggunakan jadual, tetapi koleksi dan dokumen. Dalam direktori akar projek Express.js, kami akan mencipta koleksi bernama data:

mongo
use mydatabase
db.createCollection('data')

7. Konfigurasikan model pangkalan data MongoDB

Kami menggunakan Mongoose pakej untuk mendayakan model pangkalan data MongoDB dalam projek Express.js. Pakej Mongoose.js menyediakan kawalan yang lebih baik apabila menggunakan MongoDB pada pelayan. Untuk menggunakan MongoDB, pasang Mongoose.js dalam projek anda:

$ npm install mongoose --save

Buat fail data.js untuk mencipta model pangkalan data Mongoose.js. Dalam fail ini, kami mencipta model data menggunakan fungsi mongoose.Schema(). Dalam contoh ini, kami menyediakan model untuk mengandungi dua medan: nama dan umur.

const mongoose = require('mongoose');

let dataSchema = mongoose.Schema({
    name: String,
    age: Number
});

module.exports = mongoose.model('Data', dataSchema);

8. Menyambungkan aplikasi dan pangkalan data

Menyambung kepada pangkalan data biasanya sangat menyusahkan, tetapi Mongoose.js menjadikannya sangat mudah. Berikut ialah kod yang diperlukan untuk menyambung ke pangkalan data:

const mongoose = require('mongoose');

mongoose.connect('mongodb://localhost/mydatabase', {
    useNewUrlParser: true
});

mongoose.connection.on('connected', () => console.log('MongoDB connected.'));
mongoose.connection.on('error', err => console.error('Mongoose default connection error: ', err));
mongoose.connection.on('disconnected', () => console.log('MongoDB disconnected.'));

process.on('SIGINT', () => {
    mongoose.connection.close(() => {
        console.log('MongoDB connection disconnected through app termination.');
        process.exit(0);
    });
});

9. Mengintegrasikan Express.js dan MongoDB ke dalam aplikasi Vue.js

Sekarang kita telah menyelesaikan penghujung kerja. Langkah seterusnya ialah menyepadukannya dengan bahagian hadapan Vue.js. Dalam aplikasi Vue.js, kami akan menggunakan Axios untuk membuat permintaan kepada pelayan. Axios ialah klien HTTP berasaskan Promise yang mudah disepadukan ke dalam aplikasi Vue.js.

Dalam aplikasi Vue.js, kami boleh menggunakan kod berikut untuk mendapatkan data yang disediakan oleh bahagian pelayan:

<template>
  <div>
    <p>{{ data.name }}</p>
    <p>{{ data.age }}</p>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      data: {}
    };
  },
  methods: {
    fetchData() {
      axios.get('http://localhost:3000/api/data').then(
        (response) => {
          this.data = response.data;
        },
        (error) => {
          console.error(error);
        }
      );
    },
  },
  mounted() {
    this.fetchData();
  }
};
</script>

Dalam contoh ini, kami menggunakan komponen Vue.js untuk memaparkan data dalam halaman. Dalam kaedah mounted(), kami menghantar permintaan kepada pelayan Express.js yang kami sediakan dan menggunakan Axios untuk menyimpan data tindak balas dalam objek data komponen. Kami kemudian menggunakan templat untuk memaparkan data ke dalam format JSON.

Ringkasan

Dalam artikel ini, kami memperkenalkan cara mencipta pangkalan data dalam Vue.js menggunakan Express.js dan MongoDB. Kami mencipta pelayan Express.js dan menggunakan Axios untuk menghantar data antara pelayan dan klien. Dalam aplikasi Vue.js, kami menggunakan Axios untuk menghantar permintaan dan MongoDB untuk menyimpan data. Langkah di atas boleh digunakan dengan mudah pada pelbagai teknologi dan rangka kerja yang berbeza, membolehkan anda menggunakan teknik yang kami bincangkan pada sebarang fungsi dan teknologi.

Atas ialah kandungan terperinci Cara mengendalikan pangkalan data dalam Vue.js. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!