Un mémo sur le flux de Rails et Vue
Je ne connaissais pas le flux de Rails et Vue jusqu'à présent. Après avoir joué avec, j'ai enfin compris le déroulement, alors je vais écrire une note pour pouvoir regarder en arrière. Puisqu'il s'agit d'un débutant, il est très probable que la compréhension soit fausse, c'est donc à titre indicatif seulement! Ce n'est pas une réponse correcte générale, mais ma compréhension et ma réponse convaincante.
environnement
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
Du navigateur à routes.rb
Dans cet article, nous utiliserons l'URL suivante: http://localhost:3000/ http://localhost:3000/user
Tout d'abord, entrez l'URL de votre navigateur Web. 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
L'URL est envoyée du navigateur au serveur Rails. http://localhost:3000/のURLを指定しているため La destination de "root to: 'home # index'" dans routes.rb est Sera référencé.
Contrôleur depuis la racine
La fonction d'index du contrôleur domestique est appelée.
home_controller.rb
class HomeController < ApplicationController
def index
end
end
Au fait, je ne sais pas si c'est correct, mais routes.rb et le contrôleur référencé C'est une reconnaissance qu'une instance est créée à chaque fois. C'est pourquoi il n'y a pas de relation entre les routes ou les contrôleurs.
Revenant au sujet principal, la fonction d'index est appelée. Comme il n'y a rien cette fois, le fichier Veiw qui correspond à l'index est référencé, Créez une instance du modèle comme @ home = Home.all dans la fonction d'index S'il y avait un programme, une instance de modèle serait créée et Le modèle récupère les informations de la base de données et les stocke dans l'instance @home si nécessaire Il devrait y avoir une étape, mais je ne l'utiliserai pas cette fois. Souvenez-vous comme un flux.
Afficher le fichier (fichier erb) à partir du contrôleur
La fonction d'index du contrôleur fait référence au fichier correspondant. Accédez à veiw / home / index.html.erb.
Les paramètres suivants ont été saisis ici, Cela signifie référencer le fichier hello.vue dans app / javascript / pack.
rb:index.html.erb
<%= javascript_pack_tag 'hello_vue' %>
<%= stylesheet_pack_tag 'hello_vue' %>
Hello.vue (fichier js) à partir du fichier Veiw (fichier erb)
C'est le fichier de base pour l'utilisation de l'application Vue. Chaque fichier avec l'extension Vue est regroupé dans ce fichier Les images à combiner.
render: h => h(App)
Comme vous pouvez le voir, le modèle app.vue En appelant, le contenu de app.vue sera affiché.
Ce fichier vous permet d'utiliser chaque fonction de Vue. Le contenu de l'invite n'est pas écrit dans ce fichier lui-même. C'est un fichier qui semble être géré dans les coulisses.
vuetify,
router,
store,
Est défini pour pouvoir être utilisé dans Vue.
Le fichier du composant parent est App. C'est le routeur qui réalise SPA Vuex stocke les données Le cadre de l'interface utilisateur est 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)
})
La prochaine chose à regarder est le fichier App.
De hello.vue (fichier js) à app.vue (composant vue)
C'est très simple, mais Ce fichier est le composant parent et ce fichier est affiché dans le navigateur. pourtant
<router-view></router-view>
En étant là Puisque hello_vue a une fonction de route, route l'attend.
app.vue
<template>
<div>
<router-view></router-view>
</div>
</template>
De app.vue (composant vue) à router.js (déterminer le composant par URL)
Avec la fonction route, le composant spécifié sera renvoyé en fonction des informations URL.
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
}]
});
Dans votre navigateur http: // localhost: 3000 / Parce que j'ai frappé
{
path: '/',
component: Home
}
Décidé de retourner le composant Home. Dans routes.rb au début
root to: 'home#index'
Comme il est lié aux informations de route de, les informations d'URL peuvent également être obtenues avec vue.
De router.js (les composants sont déterminés par URL) à Home.vue (composants enfants)
Depuis que j'ai décidé le composant à afficher à partir des informations d'URL à la racine de Vue Jetons un coup d'œil au composant cible ici, Home.vue.
Home.vue
<template>
<div>
<p>Home</p>
<p>{{ store}}</p>
</div>
</template>
<script>
export default {
computed: {
store(){
return this.$store.state.store
}
}
}
</script>
Le modèle est la partie qui est réellement affichée sur le navigateur et le script est la partie de traitement js. Dans le modèle
<p>{{ store }}</p>
Je veux afficher, donc je vais regarder à l'intérieur du processus de script.
computed: {
store(){
return this.$store.state.store
}
}
Cela dit, mais c'est le fichier qui définit Vuex Puisqu'il dit d'apporter les données de state.store, regardons le fichier qui définit vuex.
Index.js (fichier qui définit vuex) depuis Home.vue (composant enfant)
index.js
import Vuex from 'vuex';
import Vue from 'vue';
Vue.use(Vuex);
export default new Vuex.Store({
state: {
store: "Store"
}
});
Je suis désolé que le nom du fichier soit difficile à comprendre, mais c'est un fichier qui définit vuex.
store:"Store"
Puisque "Store" est défini en magasin, vous pouvez appeler "Store" en écrivant store à partir de n'importe quel composant.
Home.vue (composant enfant) de index.js (fichier qui définit vuex)
Revenez à Home.vue à nouveau.
<p>{{ store }}</p>
Je veux afficher, donc je vais regarder à l'intérieur du processus de script.
computed: {
store(){
return this.$store.state.store
}
}
Le flux consiste à apporter "Store" avec vuex avec script, à le mettre dans
{{store}} </ p> et à l'afficher.
De Home.vue (composant enfant) à app.vue (composant vue)
Je pense que le composant (Home) de l'URL a été décidé par Route.
Attribuez-le à
app.vue
<template>
<div>
<router-view></router-view>
</div>
</template>
Sous
<router-view></router-view>
Mais
Home.vue
<template>
<div>
<p>Home</p>
<p>{{ store}}</p>
</div>
</template>
<script>
export default {
computed: {
store(){
return this.$store.state.store
}
}
}
</script>
Est attribué à.
hello_vue.js de app.vue (composant vue)
Vous serez renvoyé au fichier de gestion d'origine. Tous les fichiers app.vue deviennent des objets et sont transmis à hello_vue.js.
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)
})
Par la fonction de rendu suivante
render: h => h(App)
Tous les fichiers Vue sont renvoyés sous forme d'objets.
Fichier Veiwa (fichier erb) de hello_vue.js
Enfin, je suis de retour côté Rails. Tous les fichiers Vue seront combinés dans index.html.erb.
rb:index.html.erb
<%= javascript_pack_tag 'hello_vue' %>
<%= stylesheet_pack_tag 'hello_vue' %>
Contrôleur à partir du fichier View (fichier erb)
C'est un peu vague, mais à la fin, le contrôleur renvoie les fichiers Veiw ensemble au navigateur.
Tapez http: // localhost: 3000 / dans votre navigateur La maison et le magasin répertoriés dans Home.vue ont été retournés.
Que faire si je saisis une autre URL de la même manière?
Essayez une autre URL. http://localhost:3000/user Tapez l'URL ci-dessus dans votre navigateur.
get "/user", to: 'home#index'
Est utilisé. Le contrôleur est le même, et l'erb est également le même, je vais donc l'omettre.
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
}]
});
L'URL et les composants suivants sont utilisés dans router.js côté vue. Cette fois, c'est le composant User.
{
path: '/user',
component: User
}
Le composant utilisateur est aussi simple que: Après cela, route se lie à app.vue de la même manière et l'affiche avec hello_vue. Le reste est la même procédure.
User.vue
<template>
<div>
<p>User</p>
</div>
</template>
L'utilisateur est affiché.
Au fait, pourquoi ne devient-il pas SPA même si j'utilise un routeur? Je me demande si je suis allé accéder au serveur deux fois avec (/ et / user). C'est parce que je tape l'URL directement dans le navigateur.
Si vous programmez Home.vue ou User.vue pour vous connecter à chaque composant Vous pouvez réaliser le SPA.
Recommended Posts