cai/VueJS
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Первоначальная версия

Browse Source
This commit is contained in:
Alexander I. Chebykin
2019-06-09 23:43:12 +03:00
parent a0fa2798d9
commit 9f4cda9e64
25 changed files with 9394 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

126
public/data/id303.html Normal file
View File

@@ -0,0 +1,126 @@
<h1>Загрузка данных</h1>
<p>
В созданном нами компоненте есть один ощутимый недостаток - данные в нём зашиты намертво и чтобы добавить
новую главу, придётся перекомпилировать всё приложение, а так дела не делаются. Сейчас мы добавим возможность
хранения данных во внешних файлах и будем загружать их по мере надобности.
</p>
<p>
Для начала нам понадобится Axios (<a href="https://yarnpkg.com/ru/package/axios" target="_blank">
https://yarnpkg.com/ru/package/axios</a>), именно с его помощью мы будем загружать наши json и html файлы.
Установим его командой <code>yarn add axios vue-axios</code>, после чего добавим в main.js строки для его
подключения. Выглядеть он у вас должен следующим образом:
<div class="grey lighten-2" style="overflow-x: auto; border-radius: 5px;">
<pre>
import Vue from 'vue'
import Axios from 'axios'
import VueAxios from 'vue-axios'
import './plugins/vuetify'
import App from './App.vue'
Vue.config.productionTip = false
Vue.use(VueAxios, Axios)
new Vue({
render: h => h(App),
}).$mount('#app')
</pre>
</div>
</p>
<p>
Вот теперь можно взяться за загрузку внешних данных. Для начала уберём из нашего компонента (TOC.vue) все данные
о разделах, для этого строку items в блоке data приведём к виду <code>items: []</code>, после чего перейдём к
App.vue и в секцию export добавим <code>mounted () {}</code>. Здесь мы в дальнейшем добавим код, исполняемый при
запуске нашего приложения. Блок <code>&lt;script>&lt;/script></code> должен выглядеть следующим образом:
<div class="grey lighten-2" style="overflow-x: auto; border-radius: 5px;">
<pre>
&lt;script>
import TOC from './components/TOC'
export default {
name: 'App',
components: {
TOC
},
data () {
return {
}
},
mounted () {
}
}
&lt;/script>
</pre>
</div>
</p>
<p>
Помимо этого нам надо немного изменить тег нашего оглавления, добавить в него <code>ref="TOC"</code>, после
чего выглядеть он должен следующим образом: <code>&lt;TOC ref="TOC"/></code>. Нужно нам это для того чтобы
мы могли обращаться к конкретному экземпляру созданного нами компонента.
</p>
<p>
Итак, добавим в секцию <code>mounted</code> код загрузки оглавления:
<div class="grey lighten-2" style="overflow-x: auto; border-radius: 5px;">
<pre>
mounted () {
this.axios.get("data/toc.json")
.then(response => {
this.$refs.TOC.items = response.data;
})
.catch(error => {
console.log(error);
});
}
</pre>
</div>
</p>
<p>
Готово! Всё работает, убедиться в этом можете открыв консоль браузера и обнаружив там ошибку "Request failed with
status code 404". Чтобы от неё избавиться, создайте в каталоге public/data файл toc.json и заполните его данными
о разделах. Готовый файл можно получить по ссылке <a href="../data/toc.json" target="_blank">/data/toc.json</a>
и сохранить его в <code>public/data/toc.json</code>. После этого оглавление будет загружаться из него.
</p>
<p>
Оглавление у нас есть, осталось реализовать загрузку статей. Для того чтобы сделать это, погрузимся немного в
принципы работы нашего компонента. Каждый раз при выборе элемента, у компонента изменяется свойство active и
нам надо отслеживать его изменение в App.vue. Для этого добавим в mounted файла App.vue следующий код:
<div class="grey lighten-2" style="overflow-x: auto; border-radius: 5px;">
<pre>
this.$watch(
"$refs.TOC.active",
(newVal, oldVal) => {
if (newVal.length) {
this.axios.get("data/id" + newVal + ".html")
.then(response => {
this.text = response.data;
})
.catch(error => {
console.log(error);
});
}
}
);
</pre>
</div>
</p>
<p>
Остаётся только создать файлы с содержимым статей. Вы можете скачать их из git или по следующим ссылкам:
<ul>
<li><a href="../data/id1.html" target="_blank">/data/id1.html</a></li>
<li><a href="../data/id201.html" target="_blank">/data/id201.html</a></li>
<li><a href="../data/id202.html" target="_blank">/data/id202.html</a></li>
<li><a href="../data/id301.html" target="_blank">/data/id301.html</a></li>
<li><a href="../data/id302.html" target="_blank">/data/id302.html</a></li>
<li><a href="../data/id303.html" target="_blank">/data/id303.html</a></li>
</ul>
Разместите данные файлы в public/data/. Теперь приложение выполняет все свои основные задачи.
</p>
<p>
А теперь попробуйте самостоятельно добавить при старте приложения загрузку и отображение информации о нём.
Файл с информацией можно взять на git или по следующей ссылке:
<a href="../data/start.html" target="_blank">/data/start.html</a>.
</p>