Cara membina aplikasi web berprestasi tinggi menggunakan Vue.js dan Ruby

Cara membina aplikasi web berprestasi tinggi menggunakan bahasa Vue.js dan Ruby

Dengan pembangunan aplikasi web yang berterusan, membina aplikasi berprestasi tinggi menjadi semakin penting. Menggunakan bahasa Vue.js dan Ruby untuk mencipta aplikasi web ialah pilihan yang sangat ideal. Vue.js ialah rangka kerja bahagian hadapan yang ringan, manakala Ruby ialah bahasa pengaturcaraan yang ringkas namun berkuasa. Menggabungkan kedua-dua teknologi ini membolehkan kami membina aplikasi web berprestasi tinggi dengan lebih cekap.

Dalam artikel ini, kami akan membincangkan cara menggunakan bahasa Vue.js dan Ruby untuk membina aplikasi web berprestasi tinggi dan memberikan beberapa contoh kod untuk membantu anda memahami dengan lebih baik.

1. Buat projek

Pertama, kita perlu buat projek baharu. Kami boleh membuat projek Vue.js dengan cepat menggunakan Vue CLI. Jalankan arahan berikut dalam baris arahan untuk memasang Vue CLI:

npm install -g @vue/cli

Kemudian, kita boleh mencipta projek Vue baharu:

vue create project-name

Seterusnya, kita ingin memilih konfigurasi yang hendak digunakan. Kami boleh memilih konfigurasi manual untuk menyesuaikan tetapan projek kami. Dalam pilihan konfigurasi, kami perlu memilih untuk menggunakan Babel untuk menyokong sintaks ES6, dan juga memilih untuk menggunakan pemalam seperti Vue Router dan Vuex untuk membantu kami membina aplikasi web yang kompleks.

2. Cipta halaman hadapan

Dalam projek Vue.js kami, kami boleh mencipta halaman hadapan untuk memaparkan data kami. Kita boleh menggunakan komponen Vue untuk membina bahagian halaman yang berbeza.

Mula-mula, mari buat komponen untuk memaparkan senarai. Cipta komponen folder baharu di bawah folder src, dan cipta komponen fail tunggal baharu List.vue di dalamnya dengan kod berikut:

<template>
  <ul>
    <li v-for="item in list" :key="item.id">
      {{ item.name }}
    </li>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      list: [
        { id: 1, name: 'Item 1' },
        { id: 2, name: 'Item 2' },
        { id: 3, name: 'Item 3' }
      ]
    }
  }
}
</script>

Kemudian, kami mahu menggunakan komponen ini dalam fail App.vue kami. Tambahkan kod berikut dalam App.vue:

<template>
  <div>
    <h1>My App</h1>
    <List></List>
  </div>
</template>

<script>
import List from './components/List.vue'

export default {
  components: {
    List
  }
}
</script>

Akhir sekali, kami perlu memperkenalkan App.vue dalam fail main.js dan lekapkannya pada elemen DOM. Tambahkan kod berikut pada main.js:

import Vue from 'vue'
import App from './App.vue'

new Vue({
  render: h => h(App)
}).$mount('#app')

Kini, kami telah menyelesaikan penciptaan halaman hadapan. Kita boleh memulakan pelayan pembangunan dengan menjalankan npm run serve dan melihat halaman kami dalam penyemak imbas.

3. Cipta API bahagian belakang

Sekarang kami memasuki bahagian bahasa Ruby, kami akan mencipta API bahagian belakang yang mudah untuk menyediakan data ke halaman hujung hadapan kami.

Pertama, kita perlu memasang Ruby on Rails. Jalankan arahan berikut dalam baris arahan untuk memasang Ruby on Rails:

gem install rails

Kemudian, kami akan mencipta projek Rails baharu. Jalankan arahan berikut dalam baris arahan:

rails new api

Seterusnya, kami ingin mencipta model Item dan pengawal Item untuk mengendalikan logik yang berkaitan dengan Item. Jalankan arahan berikut dalam baris arahan:

rails g model Item name:string
rails g controller Items

Kami ingin mencipta jadual Item dalam pangkalan data. Jalankan arahan berikut dalam baris arahan:

rails db:migrate

Selepas itu, kita perlu menentukan kaedah indeks dalam pengawal Item untuk mendapatkan semua data Item dan mengembalikannya ke hujung hadapan dalam format JSON. Tambahkan kod berikut pada app/controllers/items_controller.rb:

class ItemsController < ApplicationController
  def index
    @items = Item.all
    render json: @items
  end
end

Akhir sekali, kami akan menentukan laluan dalam fail config/routes.rb untuk menunjuk ke pengawal Item kami. Tambahkan kod berikut dalam route.rb:

Rails.application.routes.draw do
  resources :items
end

Kini, API bahagian belakang kami telah dibuat. Kita boleh memulakan pelayan Rails dengan menjalankan rails dan memanggil API dalam penyemak imbas untuk melihat data yang dikembalikan.

4. Sambungkan bahagian hadapan dan bahagian belakang

Sekarang, kita perlu menyambungkan halaman hujung hadapan dan API hujung belakang. Kami akan menggunakan axios untuk menghantar permintaan HTTP dan mendapatkan data.

Pertama, kita perlu memasang axios. Jalankan arahan berikut dalam baris arahan untuk memasang axios:

npm install axios

Kemudian, kita perlu mengubah suai komponen List.vue untuk mendapatkan data daripada API bahagian belakang. Tambahkan kod berikut dalam List.vue:

<script>
import axios from 'axios'

export default {
  data() {
    return {
      list: []
    }
  },
  methods: {
    fetchList() {
      axios.get('/items')
        .then(response => {
          this.list = response.data
        })
        .catch(error => {
          console.log(error)
        })
    }
  },
  mounted() {
    this.fetchList()
  }
}
</script>

Pada ketika ini, kami telah berjaya menyambungkan halaman hadapan dan API bahagian belakang. Kami boleh menjalankan npm run serve sekali lagi untuk memulakan pelayan pembangunan dan melihat aplikasi kami dalam penyemak imbas.

Kesimpulan

Dengan menggunakan bahasa Vue.js dan Ruby, kami boleh membina aplikasi web dengan prestasi cemerlang. Vue.js menyediakan rangka kerja bahagian hadapan yang fleksibel dan berkuasa, manakala Ruby menyediakan bahasa bahagian belakang yang ringkas dan cekap. Kami telah menunjukkan cara menggunakan bahasa Vue.js dan Ruby untuk membina aplikasi web berprestasi tinggi melalui kod sampel Kami berharap ia akan membantu anda.

Atas ialah kandungan terperinci Cara membina aplikasi web berprestasi tinggi menggunakan Vue.js dan Ruby. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!