How to build flexible web applications using Vue.js and Ruby on Rails

How to use Vue.js and Ruby on Rails to build flexible web applications

As two popular frameworks for modern web development, Vue.js and Ruby on Rails are both easy to use, efficient and flexible. Features are loved by the majority of developers. Vue.js is a lightweight, progressive JavaScript framework that focuses on achieving interactive effects on the UI interface; while Ruby on Rails is a highly elegant and complete Ruby language development framework that focuses on quickly building reliable web applications. This article will introduce how to use these two frameworks to build flexible web applications and provide corresponding code examples.

1. Preparation

1. Installation of Vue.js

The installation of Vue.js is very simple. It can be introduced through CDN or through npm package Manager installation. Here we choose to use npm for installation, open the terminal and enter the following command:

npm install vue

2. Create a Ruby on Rails application

First make sure you have Ruby and Rails installed, then Create a new Rails application through the following command:

rails new myapp

Next go to the application directory and start the Rails server:

cd myapp
rails server

2. Integrate Vue.js into Ruby on Rails application

1. Introducing Vue.js

Create a new folder in the app/assets/javascripts directory of the Rails application, such as vue, and create a new one under this folder JavaScript file vue.js. Then introduce the Vue.js library in the vue.js file:

//= require vue

2. Create Vue component

Create a new file in the app/assets/javascripts/vue directory, For example app.vue. Define a Vue component in the app.vue file:

<template>
  <div>
    <h1 id="message">{{ 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. Use Vue components in Rails views

Create a new one in the app/views directory of the Rails application View files, such as welcome.html.erb. Then introduce the Vue component in the file and use it as a separate tag:

<%= 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. Run the application

Enter the following command in the terminal to start the Rails server, Then visit http://localhost:3000/welcome to view the application effect:

rails server

3. Interacting with the Ruby on Rails backend

Vue.js, as a front-end framework, can interact with the backend Interact with data to achieve more powerful functions. Below is a simple example of interacting with a Ruby on Rails backend.

1. Create Rails model and controller

First create a new model and controller in the Rails application, for example Post:

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

Then execute Database migration operation:

rake db:migrate

2. Writing API interface

In the Posts controller, add the index and create methods and return JSON data as the API interface:

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. Call the backend interface in the Vue component

In the app.vue component, use Vue’s http module to interact with the backend. Declare an empty array posts in data, and obtain the data returned by the backend through the http.get method in the mounted hook:

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

4. Display backend data

In Use the v-for instruction in the template to traverse the posts array and display the data on the page:

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

Through the above steps, we have implemented a simple front-end and back-end data interaction, and display the data returned by the back-end on on the page.

Summary

In this article, we introduced how to use Vue.js and Ruby on Rails to build flexible web applications and provided corresponding code examples. Through the combined use of these two frameworks, we can not only achieve efficient front-end UI interaction, but also quickly build reliable back-end API interfaces. I hope this article is helpful to you when using Vue.js and Ruby on Rails for web development.

The above is the detailed content of How to build flexible web applications using Vue.js and Ruby on Rails. For more information, please follow other related articles on the PHP Chinese website!