Предисловие
Мой уровень JavaScript средний. Ну, это довольно среднее. Таким образом, это действительно сложно для новейших фронтальных технологий фреймворта, но реальность заставляет меня с этим сталкиваться. Поэтому обучение - единственный выход.
Я сравнил n передних рам, вертикально и, наконец, выбрал Vue. Почему? Причины следующие:
1. Ангулярный будущее неизвестно, 1.x имеет высокую кривую обучения и, по -видимому, был заброшен, в то время как 2 еще не были официально запущены.
2. React довольно мощный, но не имеет контакта.
3. Vue прост, и, начав работы, он более подходит для моего мышления и уровня.
4. Vue имеет китайскую документацию, и я выгляжу более комфортно.
Поскольку я решил выучить Vue, лучший способ научиться - практиковать. Я случайно видел, что есть публичный API для форума cnodejs.org, который так удобен. Поэтому я решил использовать этот публичный API, чтобы написать демо.
Введение интерфейса
Это интерфейс, публично предоставляемый cnodejs.org. Конечно, мы не только можем использовать для фронта. Это может быть использовано в различных программах. Адрес интерфейса http://cnodejs.org/api. Через эту страницу соответствующий контент введен подробно.
Интерфейсы, которые они предоставляют, завершены, что означает, что мы можем создать такой форум, как они, через эти интерфейсы.
План проекта
1. Сделайте страницу списка, которая может прочитать содержимое списка Cnodejs.
2. Сделайте страницу сведений, нажмите на ссылку на странице списка и введите страницу сведений.
3. Используйте технологию SSI для реализации повторного использования HTML -кода. Поиск SSI+SHTML, чтобы узнать о связанном контенте.
4. Код CSS предварительно считывается с использованием SASS.
Файл каталог
Oindex.shtml Список списка рендеринга
├Content.shtml Рендеринг
Fragemed File
│ ├--Bar.html код боковой панели
│ ├--Foter.html Copyright часть кода
│ ├achead.html Зона головы вызывает JS и другие коды
│ └achehheader.html Leger Logo и код навигации
File File Resource File
├Cimage
├acjs
│ ├acmon Common My Code Directory
│ │ ├acmomon.js Public Excument JS
│ └ac Method.js Custom Method JS
│ ├ ├ jquery jQuery Исходной код каталог
│ ├--Plugins другие каталоги плагинов
│ └ └ Рекомендую
│ └acture Vue Vue Source Code Directory
└ сотрудника
├acstyle.scss Sass Source File
├acstyle.css скомпилированный файл CSS
Base
└--SCSS
Скачать мой исходный файл https://github.com/fengcms/vue-cnodejsorgtest
Начните писать код
Во -первых, следуйте приведенной выше дизайне файловых каталогов и начните записать в него файлы. Res - это каталог ресурсов. Вы можете взглянуть на это или знать, что это такое.
Фактически, ключевым моментом являются файлы index.shtml и content.shtml.
Подготовьте список домашних страниц HTML
<! Doctype html> <html lang = "zh"> <head> <meta charset = "utf-8"> <title> title </title> <link rel = "stylesheet" href = "res/style/style.css"> </head> <body> <header> <h1> <href = "index.html". Fungleo </a> </h1> <vav> <ul> <li> Список навигации </li> </ul> </nav> </header> <section> <section> <ul> <li> <i> <img src = "#url Avatar"> <pran> username </span> </i> <ime> pospult 5 дней Название </a> </li> </ul> <div> </div> </section> <hoalth> <h3> Инструкции на этой странице </h3> ... </wather> </section> <noter> утверждение об авторском праве </cooler> <div> </div> </body> </html>
Как упомянуто выше, это статическая страница, которую я написал первым. В связи с моим CSS эффект показан на рисунке ниже:
Пожалуйста, получите полный код от GitHub
Представьте JS -файлы, такие как Vue & jQuery
<script src = "res/js/jquery/jquery-2.2.3.min.js"> </script> <script src = "res/js/vue/vue.min.js"> </script> <script src = "res/js/common.js"> </script> <script src = "res/js/common.js"> </script>
Получить данные из интерфейса
Прежде всего, несмотря ни на что, мы должны получить данные из интерфейса, прежде чем мы сможем продолжать это делать. Мы используем jQuery для использования метода AJAX для проведения данных.
Следующий код:
$ (function () {$ .ajax ({type: 'get', url: "http://cnodejs.org/api/v1/topics", dataType: 'json', success: function (data) {if (data.success) {console.log (data)} else {alert (json. function (data) {alert (json.stringify (data));Код, как указано выше. Давайте посмотрим на консоли браузера, а скриншот выглядит следующим образом:
Как показано на рисунке выше, мы успешно получили данные.
Анализировать данные
Как показано на приведенном выше рисунке, данные содержат следующее содержание
1. Автор
1. URL автора аватара
2. Авторский имя пользователя
2. Автор идентификатор
3. публиковать контент
4. Время выпуска
5. Это суть
6. post id
7. Последнее время ответа
8. Количество ответов
9. -аттриодовые теги
10. Путь заголовок
11. Должнее ли это
12. Просмотр статистики
Интерфейс данных, как указано выше. Конечно, если вы полнофункциональный форум, эти данные полезны. В моем проекте многие из них не используются. Давайте посмотрим на то, что мне нужно.
<li> <i> <img src = "#avatar url"> <pan> username </span> </i> <Time> Опубликовано 5 дней назад </time> <a href = "content.html?
Как показано в приведенном выше коде, то, что нам нужно, включает
1. URL автора аватара
2. Авторский имя пользователя
3. Время выпуска
4. Post Id
5. Путь заголовок
Нет проблем, доступен весь контент и интерфейсы.
Инкапсулировать код AJAX
Хотя код Ajax не длинный, я все еще чувствую себя некомфортно. Поэтому я использую следующий код, чтобы инкапсулировать его
// ajax получить функцию метода json getjson (url, func) {$ .ajax ({type: 'get', url: url, dataType: 'json', success: function (data) {if (data.success) {func (data);} else {alert ("interfect call не удалось");}}, ошибка: data (data); Alert (json.stringify (data));Как упоминалось выше, где это необходимо, нам нужно только использовать функцию GetJson (URL, func).
Справочный инкапсулированный код
$ (function () {var url = "http://cnodejs.org/api/v1/topics"; getjson (url, function (data) {console.log (data);});});После того, как изменить его так, давайте посмотрим, сможем ли мы распечатать необходимые данные? Как показано на рисунке ниже:
Без каких -либо проблем мы все еще получили данные. Мы инкапсулируем функцию обратного вызова и изменяем ее на следующий код
$ (function () {var url = "http://cnodejs.org/api/v1/topics"; getjson (url, pushdom);}); function pushdom (data) {console.log (data);};Хорошо, если ошибки нет, данные интерфейса определенно могут быть распечатаны. После этой операции наш код будет чрезвычайно кратким и значительно повышенной читаемости. Что нам нужно сделать дальше, так это сделать это в функции Pushdom (Data).
Vue рендеринг код
Во -первых, нам нужно использовать метод VUE, чтобы написать данные, которые мы хотим вставить на странице.
HTML -кодовая часть
<li v-for = "Информация в Data"> <i> <img src = "{{info.author.avatar_url}}"> <pan> {{info.author.loginname}} </span> </i> <Time> {info.create_at}} </time> <a. href = "infortm. }} "> {{info.title}} </a> </li> 1Vue знания
Данные цикла http://vuejs.org.cn/api/#v-for
JS -кодовая часть
Функция pushdom (data) {var vm = new Vue ({el: '.list', data: data});}Давайте посмотрим на эффект:
ОК, очень взволнован. Всего за несколько строк кода мы успешно отобразили список с Vue.
краткое содержание
1.Ajax является ключом к получению данных
2. Как только вы поймете немного контента Vue, вы можете начать.
3. При создании проекта код и файлы должны быть ясными и ясными.
Приложение
Вью Официальный сайт
Cnodejs API детали
Загрузите исходный код этой серии учебных пособий
ГЛАВА 1 Практического учебника Vuejs, создание оснований и визуализация списка
Практическое учебное пособие vuejs Глава 2 «Исправление ошибок и украсить время
Практическое учебное пособие Vuejs, используя плагин макета для реализации страниц.
Эта статья была первоначально написана Fungleo
Первый адрес выпуска: http://blog.csdn.net/fungleo/article/details/51649074
Эта статья была составлена в «Учебное пособие по изучению компонентов Vue.js Front-End», и все могут учиться и читать.
Для обучения по компонентам Vue.js, пожалуйста, нажмите на учебник по обучению компонентов Special Topic.js.
Выше всего содержание этой статьи. Я надеюсь, что это будет полезно для каждого обучения, и я надеюсь, что все будут поддерживать Wulin.com больше.