В книге Сонга Vue на самом деле упоминается, но он не сказал об этом подробно. Причина очень проста. Вся информация о Vue на китайском языке. Если вы просмотрите информацию на официальном сайте Vue.js от начала до В конце концов, вы в основном поймете, что должны понимать. Лично я считаю, что это лучший учебный материал по Vue.js, поэтому в своей книге я мало что говорю. Однако, недавно обобщая проблемы, с которыми столкнулись мои друзья, я чувствую, что многие люди все еще размазывают разработку по разделению фронтенда и бэкенда, поэтому сегодня Сонгге хочет поговорить с вами о разделении фронтенда и бэкэнда. и Vue.js, который представляет собой простое введение в научно-популярную панель.
Нет разницы между передним и задним
- Бэкенд-шаблоны: Jsp, FreeMarker, Velocity
- Интерфейсный шаблон: Thymeleaf
Нет различий между фронтендом и бэкэндом. Jsp — очень типичный способ написания. Jsp сочетает в себе код HTML и Java. Вначале это действительно повышало производительность, но спустя долгое время все обнаружили проблемы Jsp. -end-инженеры Например, вы можете не владеть css, поэтому процесс обычно выглядит следующим образом: страница дизайна внешнего интерфейса --> серверная часть преобразует страницу в Jsp --> серверная часть находит проблемы --> страница к внешнему интерфейсу --> внешний интерфейс не знает Jsp. Этот подход неэффективен. Особенно после появления мобильного Интернета бизнес компании, помимо ПК, обычно включает в себя мобильные телефоны, небольшие программы и т. д. Обычно набор внутренних систем должен соответствовать нескольким внешним интерфейсам. , интерфейс и серверная часть не могут быть использованы разработанным способом.
В методе разработки, что фронт и бэкенд не разделены, вообще говоря, бэкенд может возвращать ModelAndView, и после рендеринга в HTML браузер конечно может его отобразить, но для небольших программ и мобильных терминалов не может отображать HTML очень хорошо (на самом деле, мобильный терминал также поддерживает HTML, но эффективность работы низкая). В настоящее время взаимодействие внутренних и внешних данных является основным решением для достижения через JSON.
Переднее и заднее разделение
После разделения фронтенда и бэкенда бэкенд больше не пишет страницы, а только предоставляет интерфейс данных JSON (формат данных XML сейчас редко используется) Фронтенд может быть мобильным, апплетным или ПК. Фронтенд отвечает за отображение JSON, а страницы перескакивают.Трансфер и прочее достигается через фронтенд. После того, как внешний интерфейс был отделен, в настоящее время во внешнем интерфейсе есть три основных фреймворка:
- Vue
Автор You Yuxi, сам Vue опирается на Angular. В настоящее время GitHub имеет наибольшее количество звезд. Рекомендуется использовать его бэкэнд-инженерам. Основная причина заключается в том, что Vue прост в использовании и его можно быстро освоить. конечные инженеры, они могут быстро создавать страницы для решения проблем. , но если вы профессиональный фронтенд-инженер, я бы порекомендовал вам изучить все три. Что касается текущего внутреннего использования интерфейсных фреймворков, Vue является наиболее часто используемым. И в настоящее время существует большое количество связанных с Vue периферийных продуктов, различных фреймворков пользовательского интерфейса, проектов с открытым исходным кодом и множества учебных материалов.
- React
Продукт Facebook. Это js-библиотека для создания пользовательских интерфейсов, React имеет лучшую производительность и простую логику кода.
- Angular
AngularJS — это библиотека JavaScript с открытым исходным кодом, поддерживаемая Google для запуска одностраничных приложений. Его цель — улучшить браузерные приложения с помощью функций шаблона MVC (MVC), упрощая разработку и тестирование.
Введение во Vue
Vue (произносится как /vjuː/, похоже на view) — это прогрессивный фреймворк для создания пользовательских интерфейсов. В отличие от других крупных фреймворков, Vue разработан так, чтобы его можно было применять слой за слоем снизу вверх. Основная библиотека Vue ориентирована только на уровень представления, который не только прост в использовании, но и легко интегрируется со сторонними библиотеками или существующими проектами. С другой стороны, в сочетании с современными наборами инструментов и различными вспомогательными библиотеками Vue также полностью способен работать со сложными одностраничными приложениями.
- Сосредоточиться только на слое просмотра
- Фреймворк MVVM
В процессе использования jQuery большое количество DOM-операций смешивается, и DOM-операции требуются для модификации представления или получения значения.MVVM представляет собой двустороннюю привязку между представлением и моделью данных, т. е. когда данные изменяются, соответственно изменяется и представление.При изменении представления изменяется и модель данных, и разработчикам больше не нужно манипулировать узлами DOM.
Вот простая таблица умножения девять-девять, чтобы дать вам представление о MVVM:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<input type="text" v-model="num">
<table border="1">
<tr v-for="i in parseInt(num)">
<td v-for="j in i">{{j}}*{{i}}={{i*j}}</td>
</tr>
</table>
</div>
<script>
var app = new Vue({
el: "#app",
data: {
num:9
}
});
</script>
</body>
</html>
Пользователь изменяет данные в поле ввода, вызывая изменение переменной, тем самым реализуя обновление таблицы умножения девяноста девяти.
SPA
SPA (одностраничное веб-приложение), одностраничное приложение — это модель веб-приложения или веб-сайта, которая взаимодействует с пользователем путем динамической перезаписи текущей страницы, а не традиционной перезагрузки всей новой страницы с сервера. Такой подход позволяет избежать прерывания работы пользователя при переключении между страницами, что делает приложение более похожим на настольное приложение. В одностраничном приложении весь необходимый код (HTML, JavaScript и CSS) извлекается путем загрузки одной страницы, либо соответствующие ресурсы динамически загружаются и добавляются на страницу по мере необходимости (обычно в ответ на действия пользователя). У SPA есть недостаток, потому что после развертывания приложения SPA есть только одна страница, и эта страница представляет собой просто набор ссылок js и css и не имеет другого действительного значения.Поэтому приложение SPA нелегко индексировать Поэтому в целом SPA подходит для системы управления фоном крупного предприятия.
Использование Vue можно условно разделить на две категории:
- Внедрите Vue прямо на страницу без приложения SPA
- СПА-приложение
Базовая настройка среды
Сначала вам нужно установить две вещи:
- NodeJS
- npm
Просто найдите и загрузите NodeJS напрямую.После успешной установки npm будет доступен. После успешной установки вы можете проверить, была ли установка успешной, с помощью команды cmd:
После успешной установки NodeJS установите инструменты Vue следующим образом:
npm install -g vue-cli # 只需要第一次安装时执行
vue init webpack my-project # 使用webpack模板创建一个vue项目
cd my-project #进入到项目目录中
npm install # 下载依赖(如果在项目创建的最后一步选择了自动执行npm install,则该步骤可以省略)
npm run dev # 启动项目
После успешного запуска браузер вводитhttp://localhost:8080
Вы увидите следующую страницу:
воплощать в жизньnpm install
При использовании команды внешний источник загрузки используется по умолчанию, и его можно настроить для использования зеркала Taobao с помощью следующего кода:
npm config set registry https://registry.npm.taobao.org
После завершения модификации вероятность успешной загрузки может быть эффективно повышена.
Введение в структуру проекта Vue
После создания проекта Vue откройте его с помощью Web Storm.Каталог проекта выглядит следующим образом:
- папка сборки, используемая для хранения скриптов сборки проекта
- config хранит некоторую базовую информацию о конфигурации проекта, чаще всего используется перенаправление портов.
- В каталоге node_modules хранятся все зависимости проекта, то есть файлы, загруженные командой npm install
- Исходный код проекта хранится в каталоге src, то есть сюда помещается код, написанный разработчиком
- static используется для хранения статических ресурсов
- index.html — это домашняя страница проекта, страница входа и единственная HTML-страница для всего проекта.
- Все зависимости проекта определены в package.json, включая зависимости времени разработки и времени выпуска.
Для разработчиков 99,99% работы в будущем выполняется в src, а каталог файлов в src выглядит следующим образом:
- Каталог активов используется для хранения файлов активов
- Каталог компонентов используется для хранения компонентов (некоторых повторно используемых, независимых страниц).Конечно, разработчики также могут создавать полные страницы непосредственно в компонентах.
- Компоненты рекомендуется хранить в компонентах, а для полных страниц создавать отдельную папку страниц.
- В каталоге маршрутизатора хранятся файлы js для маршрутизации.
- App.vue — это компонент Vue и первый компонент Vue в проекте.
- main.js эквивалентен основному методу в Java и является входом js всего проекта.
Содержимое main.js выглядит следующим образом:
import Vue from 'vue'
import App from './App'
import router from './router'
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})
- В main.js сначала импортируйте объект Vue.
- Импортируйте App.vue и назовите его App
- Импортируйте маршрутизатор, обратите внимание, что, поскольку имя файла маршрута по умолчанию в каталоге маршрутизатора — index.js, его можно не указывать.
- После того, как все будет успешно импортировано, создайте объект Vue и установите узел для обработки Vue как «#app», где «#app» относится к div, определенному в файле index.html заранее.
- Установите маршрутизатор на объект vue. Вот упрощенный способ написания. Полный способ написания: маршрутизатор: маршрутизатор. Если ключ/значение точно такое же, его можно сократить.
- Объявите компонент App. Компонент App был импортирован в проект в начале, но непосредственно импортированный компонент не может использоваться напрямую и должен быть объявлен.
- Шаблон страницы определяется в шаблоне, который отображает содержимое компонента приложения в div '#app'.
Следовательно, можно предположить, что после успешного запуска проекта видимый эффект страницы определяется в App.vue.
<template>
<div id="app">
<img src="./assets/logo.png">
<router-view/>
</div>
</template>
<script>
export default {
name: 'App'
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
- App.vue — это компонент vue, который состоит из трех частей: 1. шаблон страницы (template) 2. скрипт страницы (script) 3. стиль страницы (style)
- В шаблоне страницы определены HTML-элементы страницы. Здесь определены два элемента: один — изображение, а другой — представление маршрутизатора.
- Скрипты страниц в основном используются для реализации инициализации данных текущей страницы, обработки событий и т. д.
- Стили страницы — это операции по украшению страницы для HTML-элементов в шаблоне.
Дополнительным объяснением является то, что router-view, который относится к местоположению, где отображается страница маршрутизации, можно просто понимать как заполнитель, и содержимое, отображаемое этим заполнителем, будет определяться в соответствии с текущим конкретным URL-адресом. Конкретное отображаемое содержимое см. в таблице маршрутизации, то есть в файле router/index.js, который выглядит следующим образом:
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'HelloWorld',
component: HelloWorld
}
]
})
- В этом файле сначала импортируются объект Vue, объект Router и компонент HelloWorld.
- Создайте объект Router и определите таблицу маршрутизации
- Таблица маршрутизации определена здесь, путь
/
, соответствующий компонент — HelloWorld, то есть адрес браузера/
Когда компонент HelloWorld отображается в позиции просмотра маршрутизатора
Запустите Vue в WebStorm
Вы также можете настроить vue прямо в веб-шторме и запустить его, нажав в правом верхнем углу для настройки:
Затем настройте скрипт:
После завершения настройки нажмите кнопку запуска в правом верхнем углу, чтобы запустить проект Vue, как показано ниже:
компиляция проекта
Такой большой интерфейсный проект не может быть выпущен и запущен напрямую.Когда разработчик завершит разработку проекта, найдите командную строку cmd в текущем каталоге проекта, а затем выполните следующую команду, чтобы упаковать проект:
npm run build
После успешной упаковки в текущей директории проекта будет сгенерирована папка dist.В этой папке находятся два файла index.html и static.Страница index.html — единственная HTML-страница в нашем SPA-проекте.Скомпилированный js , css и другие файлы сохраняются.Когда проект будет выпущен, вы можете использовать nginx для самостоятельного развертывания статических файлов в дистрибутиве, или вы можете скопировать статические файлы в статический каталог проекта Spring Boot, а затем скомпилировать, упаковать и выпустить проект Spring Boot. .
Суммировать
Поскольку читатели Сонге в основном программисты бэкенда, а также есть небольшое количество программистов фронтенда, поэтому в этой статье Сонгге хочет помочь вам понять разделение фронтенда и бэкенда и некоторые основные принципы использования Vue от перспектива back-end программиста.Профессиональный front-end также приветствуется.Инженер вышел пострелять по кирпичикам.
Обратите внимание на общедоступную учетную запись [Jiangnan A Little Rain], сосредоточьтесь на технологиях с полным стеком, таких как Spring Boot + микросервисы и разделение интерфейса и сервера, делитесь регулярными видеоуроками, отвечайте на Java после того, как уделите внимание, и получайте Сухие товары Java тщательно приготовлены Songge для вас!