Ein Memo über den Fluss von Rails und Vue
Ich kannte den Fluss von Rails und Vue bis jetzt nicht. Nachdem ich damit herumgespielt hatte, verstand ich endlich den Fluss, also werde ich ein Memo schreiben, damit ich zurückblicken kann. Da es sich um einen Anfänger handelt, ist es sehr wahrscheinlich, dass das Verständnis falsch ist, daher dient es nur als Referenz! Es ist keine allgemein richtige Antwort, sondern meine verständnisvolle und überzeugende Antwort.
Umgebung
MacOS Mojave Ruby 2.6.4 Rails 6.0.3.3 Vue 2.6.12 Webpack 4.44.2 yarn 1.22.5 Docker 2.3.0.5 VScode Vuetify Vue-router Vue-Store
Vom Browser zu route.rb
In diesem Artikel verwenden wir die folgende URL: http://localhost:3000/ http://localhost:3000/user
Geben Sie zuerst die URL in Ihrem Webbrowser ein. http://localhost:3000/
routes.rb
Rails.application.routes.draw do
root to: 'home#index'
get "/user", to: 'home#index'
# For details on the DSL available within this file, see https://guides.rubyonrails.org/routing.html
end
Die URL wird vom Browser an den Rails-Server gesendet. http://localhost:3000/のURLを指定しているため Das Ziel von "root to: 'home # index'" in route.rb ist Wird referenziert.
Controller von root
Die Indexfunktion des Home-Controllers wird aufgerufen.
home_controller.rb
class HomeController < ApplicationController
def index
end
end
Ich weiß übrigens nicht, ob es richtig ist, aber route.rb und der referenzierte Controller Es ist eine Anerkennung, dass jedes Mal eine Instanz erstellt wird. Deshalb gibt es keine Beziehung zwischen Routen oder Controllern.
Zurück zum Hauptthema wird die Indexfunktion aufgerufen. Da diesmal nichts vorhanden ist, wird auf die Veiw-Datei verwiesen, die dem Index entspricht. Erstellen Sie eine Instanz des Modells wie @ home = Home.all in der Indexfunktion Wenn es ein Programm gäbe, würde eine Modellinstanz erstellt Das Modell ruft Informationen aus der Datenbank ab und speichert sie bei Bedarf in der @ home-Instanz Es sollte einen Schritt geben, aber ich werde ihn diesmal nicht verwenden. Erinnere dich als Fluss.
Datei (erb-Datei) vom Controller anzeigen
Die Indexfunktion des Controllers bezieht sich auf die entsprechende Datei. Navigieren Sie zu veiw / home / index.html.erb.
Die folgenden Einstellungen wurden hier eingegeben: Dies bedeutet, dass auf die Datei hello.vue in app / javascript / pack verwiesen wird.
rb:index.html.erb
<%= javascript_pack_tag 'hello_vue' %>
<%= stylesheet_pack_tag 'hello_vue' %>
Hello.vue (js Datei) aus Veiw Datei (erb Datei)
Dies ist die Kerndatei für die Verwendung der Vue-Anwendung. Jede Datei mit der Erweiterung Vue wird in dieser Datei gruppiert Die zu kombinierenden Bilder.
render: h => h(App)
Wie Sie sehen können, die Vorlage app.vue Beim Aufruf wird der Inhalt von app.vue angezeigt.
Mit dieser Datei können Sie jede Funktion von Vue verwenden. Der Inhalt der Eingabeaufforderung wird nicht in diese Datei selbst geschrieben. Es ist eine Datei, die hinter den Kulissen verwaltet zu werden scheint.
vuetify,
router,
store,
Ist so definiert, dass es in Vue verwendet werden kann.
Die übergeordnete Komponentendatei ist App. Es ist der Router, der SPA realisiert Vuex speichert die Daten Das UI-Framework ist vuetify.
hello_vue.js
import Vue from 'vue';
import App from '../src/components/app/app';
import Vuetify from 'vuetify';
import router from '../src/router';
import store from "../src/vuex/index"
import 'vuetify/dist/vuetify.min.css';
Vue.use(Vuetify);
const vuetify = new Vuetify();
document.addEventListener('DOMContentLoaded', () => {
const app = new Vue({
vuetify,
router,
store,
render: h => h(App)
}).$mount()
document.body.appendChild(app.$el)
console.log(app)
})
Das nächste, was Sie sich ansehen müssen, ist die App-Datei.
Von hello.vue (js-Datei) zu app.vue (vue-Komponente)
Es ist sehr einfach, aber Diese Datei ist die übergeordnete Komponente und wird im Browser angezeigt. jedoch
<router-view></router-view>
Indem ich dort bin Da hello_vue eine Routenfunktion hat, wartet die Route darauf.
app.vue
<template>
<div>
<router-view></router-view>
</div>
</template>
Von app.vue (vue-Komponente) zu router.js (bestimmen Sie die Komponente anhand der URL)
Mit der Routenfunktion wird die angegebene Komponente gemäß den URL-Informationen zurückgegeben.
router.js
import Vue from 'vue';
import VueRouter from 'vue-router';
import Home from "../src/components/home/Home"
import User from "../src/components/user/User"
Vue.use(VueRouter);
export default new VueRouter({
mode: 'history',
routes: [{
path: '/',
component: Home
}, {
path: '/user',
component: User
}]
});
In Ihrem Browser http: // localhost: 3000 / Weil ich geschlagen habe
{
path: '/',
component: Home
}
Beschlossen, die Home-Komponente zurückzugeben. In route.rb am Anfang
root to: 'home#index'
Da es mit den Routeninformationen von verknüpft ist, können URL-Informationen auch mit vue abgerufen werden.
Von router.js (Komponenten werden durch URL bestimmt) zu Home.vue (untergeordnete Komponenten)
Da habe ich beschlossen, die Komponente aus den URL-Informationen im Stammverzeichnis von Vue anzuzeigen Schauen wir uns hier die Zielkomponente Home.vue an.
Home.vue
<template>
<div>
<p>Home</p>
<p>{{ store}}</p>
</div>
</template>
<script>
export default {
computed: {
store(){
return this.$store.state.store
}
}
}
</script>
Die Vorlage ist der Teil, der tatsächlich im Browser angezeigt wird, und das Skript ist der js-Verarbeitungsteil. In der Vorlage
<p>{{ store }}</p>
Ich möchte anzeigen, also werde ich in den Skriptprozess schauen.
computed: {
store(){
return this.$store.state.store
}
}
Es heißt, aber dies ist die Datei, die Vuex definiert Schauen wir uns die Datei an, die vuex definiert, da es heißt, die Daten von state.store zu bringen.
Index.js (Datei, die vuex definiert) aus Home.vue (untergeordnete Komponente)
index.js
import Vuex from 'vuex';
import Vue from 'vue';
Vue.use(Vuex);
export default new Vuex.Store({
state: {
store: "Store"
}
});
Es tut mir leid, dass der Dateiname schwer zu verstehen ist, aber es ist eine Datei, die vuex definiert.
store:"Store"
Da "Store" im Store definiert ist, können Sie "Store" aufrufen, indem Sie den Store von einer beliebigen Komponente aus schreiben.
Home.vue (untergeordnete Komponente) aus index.js (Datei, die vuex definiert)
Kehren Sie erneut zu Home.vue zurück.
<p>{{ store }}</p>
Ich möchte anzeigen, also werde ich in den Skriptprozess schauen.
computed: {
store(){
return this.$store.state.store
}
}
Der Ablauf besteht darin, "Store" mit vuex mit Skript zu bringen, es in
{{store}} </ p> abzulegen und anzuzeigen.
Von Home.vue (untergeordnete Komponente) zu app.vue (vue-Komponente)
Ich denke, dass die Komponente (Home) der URL von Route festgelegt wurde.
Weisen Sie es
app.vue
<template>
<div>
<router-view></router-view>
</div>
</template>
Unter
<router-view></router-view>
Aber
Home.vue
<template>
<div>
<p>Home</p>
<p>{{ store}}</p>
</div>
</template>
<script>
export default {
computed: {
store(){
return this.$store.state.store
}
}
}
</script>
Ist zugeordnet.
hello_vue.js von app.vue (vue-Komponente)
Sie kehren zur ursprünglichen Verwaltungsdatei zurück. Alle app.vue-Dateien werden zu Objekten und werden an hello_vue.js übergeben.
hello_vue.js
import Vue from 'vue';
import App from '../src/components/app/app';
import Vuetify from 'vuetify';
import router from '../src/router';
import store from "../src/vuex/index"
import 'vuetify/dist/vuetify.min.css';
Vue.use(Vuetify);
const vuetify = new Vuetify();
document.addEventListener('DOMContentLoaded', () => {
const app = new Vue({
vuetify,
router,
store,
render: h => h(App)
}).$mount()
document.body.appendChild(app.$el)
console.log(app)
})
Durch die folgende Renderfunktion
render: h => h(App)
Alle Vue-Dateien werden als Objekte zurückgegeben.
Veiwa-Datei (erb-Datei) aus hello_vue.js
Endlich bin ich wieder auf der Rails-Seite. Alle Vue-Dateien werden in index.html.erb zusammengefasst.
rb:index.html.erb
<%= javascript_pack_tag 'hello_vue' %>
<%= stylesheet_pack_tag 'hello_vue' %>
Controller aus View-Datei (erb-Datei)
Es ist etwas vage, aber am Ende gibt der Controller die Veiw-Dateien zusammen an den Browser zurück.
Geben Sie http: // localhost: 3000 / in Ihren Browser ein Das in Home.vue aufgeführte Home und Store wurden zurückgegeben.
Was ist, wenn ich auf die gleiche Weise eine andere URL eingegeben habe?
Versuchen Sie es mit einer anderen URL. http://localhost:3000/user Geben Sie die obige URL in Ihren Browser ein.
get "/user", to: 'home#index'
Wird genutzt. Der Controller ist der gleiche, und der erb ist auch der gleiche, also werde ich ihn weglassen.
routes.rb
Rails.application.routes.draw do
root to: 'home#index'
get "/user", to: 'home#index'
# For details on the DSL available within this file, see https://guides.rubyonrails.org/routing.html
end
router.js
import Vue from 'vue';
import VueRouter from 'vue-router';
import Home from "../src/components/home/Home"
import User from "../src/components/user/User"
Vue.use(VueRouter);
export default new VueRouter({
mode: 'history',
routes: [{
path: '/',
component: Home
}, {
path: '/user',
component: User
}]
});
Die folgende URL und Komponenten werden in router.js auf der Vue-Seite verwendet. Diesmal ist es die Benutzerkomponente.
{
path: '/user',
component: User
}
Die Benutzerkomponente ist so einfach wie: Danach wird die Route auf die gleiche Weise an app.vue gebunden und mit hello_vue angezeigt. Der Rest ist das gleiche Verfahren.
User.vue
<template>
<div>
<p>User</p>
</div>
</template>
Benutzer wird angezeigt.
Übrigens, warum wird es nicht zu SPA, obwohl ich einen Router verwende? Ich frage mich, ob ich zweimal mit (/ und / user) auf den Server zugegriffen habe. Dies liegt daran, dass ich die URL direkt in den Browser eingebe.
Wenn Sie Home.vue oder User.vue so programmieren, dass eine Verbindung zu jeder Komponente hergestellt wird Sie können SPA realisieren.
Recommended Posts