Разделение front-end и back-end глазами Java-программиста и начало работы с Vue.js

Spring Boot
Разделение front-end и back-end глазами Java-программиста и начало работы с Vue.js

В книге Сонга Vue на самом деле упоминается, но он не сказал об этом подробно. Причина очень проста. Вся информация о Vue на китайском языке. Если вы просмотрите информацию на официальном сайте Vue.js от начала до В конце концов, вы в основном поймете, что должны понимать. Лично я считаю, что это лучший учебный материал по Vue.js, поэтому в своей книге я мало что говорю. Однако, недавно обобщая проблемы, с которыми столкнулись мои друзья, я чувствую, что многие люди все еще размазывают разработку по разделению фронтенда и бэкенда, поэтому сегодня Сонгге хочет поговорить с вами о разделении фронтенда и бэкэнда. и Vue.js, который представляет собой простое введение в научно-популярную панель.

Нет разницы между передним и задним

  1. Бэкенд-шаблоны: Jsp, FreeMarker, Velocity
  2. Интерфейсный шаблон: 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 также полностью способен работать со сложными одностраничными приложениями.

  1. Сосредоточиться только на слое просмотра
  2. Фреймворк 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 можно условно разделить на две категории:

  1. Внедрите Vue прямо на страницу без приложения SPA
  2. СПА-приложение

Базовая настройка среды

Сначала вам нужно установить две вещи:

  1. NodeJS
  2. 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.Каталог проекта выглядит следующим образом:

  1. папка сборки, используемая для хранения скриптов сборки проекта
  2. config хранит некоторую базовую информацию о конфигурации проекта, чаще всего используется перенаправление портов.
  3. В каталоге node_modules хранятся все зависимости проекта, то есть файлы, загруженные командой npm install
  4. Исходный код проекта хранится в каталоге src, то есть сюда помещается код, написанный разработчиком
  5. static используется для хранения статических ресурсов
  6. index.html — это домашняя страница проекта, страница входа и единственная HTML-страница для всего проекта.
  7. Все зависимости проекта определены в package.json, включая зависимости времени разработки и времени выпуска.

Для разработчиков 99,99% работы в будущем выполняется в src, а каталог файлов в src выглядит следующим образом:

  1. Каталог активов используется для хранения файлов активов
  2. Каталог компонентов используется для хранения компонентов (некоторых повторно используемых, независимых страниц).Конечно, разработчики также могут создавать полные страницы непосредственно в компонентах.
  3. Компоненты рекомендуется хранить в компонентах, а для полных страниц создавать отдельную папку страниц.
  4. В каталоге маршрутизатора хранятся файлы js для маршрутизации.
  5. App.vue — это компонент Vue и первый компонент Vue в проекте.
  6. 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/>'
})
  1. В main.js сначала импортируйте объект Vue.
  2. Импортируйте App.vue и назовите его App
  3. Импортируйте маршрутизатор, обратите внимание, что, поскольку имя файла маршрута по умолчанию в каталоге маршрутизатора — index.js, его можно не указывать.
  4. После того, как все будет успешно импортировано, создайте объект Vue и установите узел для обработки Vue как «#app», где «#app» относится к div, определенному в файле index.html заранее.
  5. Установите маршрутизатор на объект vue. Вот упрощенный способ написания. Полный способ написания: маршрутизатор: маршрутизатор. Если ключ/значение точно такое же, его можно сократить.
  6. Объявите компонент App. Компонент App был импортирован в проект в начале, но непосредственно импортированный компонент не может использоваться напрямую и должен быть объявлен.
  7. Шаблон страницы определяется в шаблоне, который отображает содержимое компонента приложения в 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>
  1. App.vue — это компонент vue, который состоит из трех частей: 1. шаблон страницы (template) 2. скрипт страницы (script) 3. стиль страницы (style)
  2. В шаблоне страницы определены HTML-элементы страницы. Здесь определены два элемента: один — изображение, а другой — представление маршрутизатора.
  3. Скрипты страниц в основном используются для реализации инициализации данных текущей страницы, обработки событий и т. д.
  4. Стили страницы — это операции по украшению страницы для 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
    }
  ]
})
  1. В этом файле сначала импортируются объект Vue, объект Router и компонент HelloWorld.
  2. Создайте объект Router и определите таблицу маршрутизации
  3. Таблица маршрутизации определена здесь, путь/, соответствующий компонент — 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 для вас!