Cara membina aplikasi web yang fleksibel menggunakan Vue.js dan Ruby on Rails

Cara menggunakan Vue.js dan Ruby on Rails untuk membina aplikasi web yang fleksibel

Sebagai dua rangka kerja popular untuk pembangunan web moden, Vue.js dan Ruby on Rails kedua-duanya popular dalam kalangan pembangun kerana kesederhanaan, kemudahan penggunaan, kecekapan dan kefleksibelan mereka . Vue.js ialah rangka kerja JavaScript yang ringan dan progresif yang memfokuskan pada mencapai kesan interaktif pada antara muka UI manakala Ruby on Rails ialah rangka kerja pembangunan bahasa Ruby yang sangat elegan dan lengkap yang memfokuskan pada membina aplikasi web yang boleh dipercayai dengan pantas. Artikel ini akan memperkenalkan cara menggunakan kedua-dua rangka kerja ini untuk membina aplikasi web yang fleksibel dan menyediakan contoh kod yang sepadan.

1. Persediaan

1. Memasang Vue.js

Vue.js sangat mudah untuk dipasang melalui CDN atau dipasang melalui pengurus pakej npm. Di sini kita memilih untuk menggunakan npm untuk memasang, membuka terminal dan masukkan arahan berikut:

npm install vue

2. Buat aplikasi Ruby on Rails

Mula-mula pastikan anda telah memasang Ruby dan Rails, kemudian buat aplikasi Rails baharu melalui perkara berikut arahan:

rails new myapp

Seterusnya pergi ke direktori aplikasi dan mulakan pelayan Rails:

cd myapp
rails server

2. Integrasikan Vue.js ke dalam aplikasi Ruby on Rails

1. Perkenalkan Vue.js

Creaste one dalam app/Creas direktori javascripts aplikasi Rails Folder baharu, seperti vue, dan buat fail JavaScript baharu vue.js di bawah folder itu. Kemudian perkenalkan perpustakaan Vue.js dalam fail vue.js:

2. //= require vue

Cipta komponen Vue

Buat fail baharu dalam direktori app/assets/javascripts/vue, seperti app.vue. Tentukan komponen Vue dalam fail app.vue:

3. <template>
     <div>
       <h1>{{ message }}</h1>
       <button @click="changeMessage">Change Message</button>
     </div>
   </template>
   
   <script>
     export default {
       data() {
         return {
           message: 'Hello Vue.js!'
         }
       },
       methods: {
         changeMessage() {
           this.message = 'Hello Ruby on Rails!'
         }
       }
     }
   </script>

Menggunakan komponen Vue dalam paparan Rails

Buat fail paparan baharu dalam direktori app/views aplikasi Rails, seperti welcome.html.erb. Kemudian perkenalkan komponen Vue dalam fail ini dan gunakannya sebagai teg berasingan:

4. <%= javascript_pack_tag 'vue' %>
   
   <div id="app">
     <app></app>
   </div>
   
   <script>
     import App from '../vue/app.vue'
   
     new Vue({
       el: '#app',
       components: { App }
     })
   </script>

Jalankan aplikasi

Masukkan arahan berikut dalam terminal untuk memulakan pelayan Rails, dan kemudian lawati http://localhost:3000/ dialu-alukan untuk melihat kesan Aplikasi:

rails server

3. Interaksi dengan Ruby on Rails backend

Vue.js, sebagai rangka kerja hadapan, boleh mencapai fungsi yang lebih berkuasa melalui interaksi data dengan backend. Di bawah ialah contoh mudah berinteraksi dengan bahagian belakang Ruby on Rails.

Buat model dan pengawal Rails

Mula-mula buat model dan pengawal baharu dalam aplikasi Rails, contohnya Post:

rails generate model Post title:string content:text
rails generate controller Posts index create

Kemudian lakukan operasi pemindahan pangkalan data:

2. rake db:migrate

Tulis antara muka API

dalam pengawal , tambahkan indeks dan cipta kaedah dan gunakannya sebagai antara muka API untuk mengembalikan data JSON:

class PostsController < ApplicationController
  def index
    @posts = Post.all
    render json: @posts
  end

  def create
    @post = Post.new(post_params)
    if @post.save
      render json: @post, status: :created
    else
      render json: @post.errors, status: :unprocessable_entity
    end
  end

  private

  def post_params
    params.require(:post).permit(:title, :content)
  end
end

Panggil antara muka belakang dalam komponen Vue

Dalam komponen app.vue, gunakan modul http dan belakang belakang Vue Lakukan interaksi data . Isytiharkan tatasusunan kosong siaran dalam data dan dapatkan data yang dikembalikan oleh bahagian belakang melalui kaedah http.get dalam cangkuk yang dipasang:

export default {
  data() {
    return {
      posts: []
    }
  },
  mounted() {
    this.$http.get('/posts')
      .then(response => {
        this.posts = response.data
      })
  }
}

Paparkan data hujung belakang

Gunakan arahan v-untuk dalam templat untuk melintasi tatasusunan siaran, dan Paparan data pada halaman:

<template>
  <div>
    <h1>{{ message }}</h1>
    <button @click="changeMessage">Change Message</button>
    <ul>
      <li v-for="post in posts" :key="post.id">
        <h2>{{ post.title }}</h2>
        <p>{{ post.content }}</p>
      </li>
    </ul>
  </div>
</template>

Melalui langkah di atas, kami telah melaksanakan interaksi data bahagian hadapan dan bahagian belakang yang mudah dan memaparkan data yang dikembalikan oleh bahagian belakang pada halaman.

Ringkasan

Dalam artikel ini, kami memperkenalkan cara membina aplikasi web yang fleksibel menggunakan Vue.js dan Ruby on Rails, dan memberikan contoh kod yang sepadan. Melalui gabungan penggunaan kedua-dua rangka kerja ini, kami bukan sahaja boleh mencapai interaksi UI bahagian hadapan yang cekap, tetapi juga dengan cepat membina antara muka API bahagian belakang yang boleh dipercayai. Saya harap artikel ini membantu anda apabila menggunakan Vue.js dan Ruby on Rails untuk pembangunan web. 🎜

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