Comment créer des applications Web flexibles à l'aide de Vue.js et Ruby on Rails

Comment utiliser Vue.js et Ruby on Rails pour créer des applications Web flexibles

En tant que deux frameworks populaires pour le développement Web moderne, Vue.js et Ruby on Rails sont tous deux populaires parmi les développeurs pour leur simplicité, leur facilité d'utilisation, leur efficacité et leur flexibilité. . amour. Vue.js est un framework JavaScript léger et progressif qui se concentre sur la réalisation d'effets interactifs sur l'interface utilisateur ; tandis que Ruby on Rails est un framework de développement de langage Ruby très élégant et complet qui se concentre sur la création rapide d'applications Web fiables. Cet article expliquera comment utiliser ces deux frameworks pour créer des applications Web flexibles et fournira des exemples de code correspondants.

1. Préparation

1. Installation de Vue.js

Vue.js est très simple à installer. Il peut être introduit via CDN ou installé via le gestionnaire de packages npm. Ici, nous choisissons d'utiliser npm pour installer, ouvrez le terminal et entrez la commande suivante :

npm install vue

2. Créez une application Ruby on Rails

Assurez-vous d'abord que Ruby et Rails sont installés, puis créez une nouvelle application Rails en procédant comme suit commande :

rails new myapp

Ensuite, allez dans le répertoire de l'application et démarrez le serveur Rails :

cd myapp
rails server

2. Intégrez Vue.js dans l'application Ruby on Rails

1. Introduisez Vue.js

Créez-en un dans l'application/assets/ répertoire javascripts de l'application Rails Un nouveau dossier, tel que vue, et créez un nouveau fichier JavaScript vue.js sous ce dossier. Introduisez ensuite la bibliothèque Vue.js dans le fichier vue.js :

//= require vue

2. Créez un composant Vue

Créez un nouveau fichier dans le répertoire app/assets/javascripts/vue, tel que app.vue. Définissez un composant Vue dans le fichier app.vue :

<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>

3. Utilisation des composants Vue dans les vues Rails

Créez un nouveau fichier de vue dans le répertoire app/views de l'application Rails, tel que Welcome.html.erb. Introduisez ensuite le composant Vue dans ce fichier et utilisez-le comme une balise distincte :

<%= javascript_pack_tag 'vue' %>

<div id="app">
  <app></app>
</div>

<script>
  import App from '../vue/app.vue'

  new Vue({
    el: '#app',
    components: { App }
  })
</script>

4. Exécutez l'application

Entrez la commande suivante dans le terminal pour démarrer le serveur Rails, puis visitez http://localhost:3000/ bienvenue pour voir Effet d'application :

rails server

3. Interaction avec le backend Ruby on Rails

Vue.js, en tant que framework front-end, peut réaliser des fonctions plus puissantes grâce à l'interaction des données avec le backend. Vous trouverez ci-dessous un exemple simple d'interaction avec un backend Ruby on Rails.

1. Créer un modèle et un contrôleur Rails

Créez d'abord un nouveau modèle et un nouveau contrôleur dans l'application Rails, par exemple Post :

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

Effectuez ensuite l'opération de migration de base de données :

rake db:migrate

2. Écrivez l'interface API

dans Posts Dans le contrôleur , ajoutez les méthodes d'indexation et de création, et utilisez-les comme interfaces API pour renvoyer des données 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

3. Appelez l'interface backend dans le composant Vue

Dans le composant app.vue, utilisez le module http et le backend de Vue Effectuez une interaction avec les données . Déclarez un tableau vide posts dans data et obtenez les données renvoyées par le backend via la méthode http.get dans le hook monté :

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

4. Afficher les données du backend

Utilisez l'instruction v-for dans le modèle pour parcourir les publications tableau et afficher les données sur la page :

<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>

Grâce aux étapes ci-dessus, nous avons implémenté une simple interaction de données front-end et back-end et affiché les données renvoyées par le back-end sur la page.

Résumé

Dans cet article, nous avons présenté comment créer des applications Web flexibles à l'aide de Vue.js et Ruby on Rails, et avons fourni des exemples de code correspondants. Grâce à l'utilisation combinée de ces deux frameworks, nous pouvons non seulement obtenir une interaction efficace avec l'interface utilisateur frontale, mais également créer rapidement des interfaces API back-end fiables. J'espère que cet article vous sera utile lorsque vous utilisez Vue.js et Ruby on Rails pour le développement Web.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!