Maison > Article > interface Web > 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
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
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
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
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>
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>
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.
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
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
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 }) } }
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!