Помните вводное обучение по разделению передней и задней частей Spring boot и Vue.

Spring Boot полный стек

Так как раньше компания писала на C#, а сейчас собирается перейти на распределенную Java + vue, проводится простое обучение на фронт и бэкенде.

Интерфейсные инструменты и среды:Node.js V10.15.0 Vue.js V2.5.21 yarn: V1.13.0 IDE:VScode

Бэкэнд-инструменты и среды:Maven: 3.52 jdk: 1.8 MySql: 14.14 IDE: IDEA Spring Boot: 2.0+ Зоопарк: 3.4.13

демонстрационный адрес:http://101.132.124.171:8000/about

Адрес исходного кода ниже. Дайте ему звезду, если можете, спасибо! ! !

Адрес кода Spring Boot + Vue:GitHub.com/Два 010…

Кодовый адрес Dubbo-Spring-Boot:GitHub.com/Два 010…

demo.png

Разделение внешнего и внутреннего интерфейса (рендеринг сервера, рендеринг браузера)

  • Реализуйте настоящую развязку интерфейса и сервера.

  • Основная идея заключается в том, что html-страница внешнего интерфейса вызывает интерфейс restuful API внутреннего интерфейса через ajax и использует данные json для взаимодействия.

  • Разделение клиентской и серверной частей заложит прочную основу для будущей крупномасштабной распределенной архитектуры, архитектуры эластичных вычислений, архитектуры микросервисов и многотерминальных сервисов (несколько клиентов, таких как браузеры, Android, IOS и т. д.). .

Vue.js

Прежде чем говорить о Vue, вам нужно иметь общее представление о том, что такое HTML, CSS и JS?

HTML предназначен для написания тегов, CSS — для написания стилей, JS — для добавления динамических эффектов на веб-страницы.

HTML,CSS,JavaScript

Введение во Vue

  1. Vue — это прогрессивный фреймворк для создания пользовательских интерфейсов по адресу:cn.vuejs.org/

  2. Популярность Vue на Github

GithubStar.jpg

  1. Нет необходимости управлять Домом, реализован MVVM
// jquery的操作
$("#test3").val("Dolly Duck");

// Vue的操作
MVVM，实现了双向绑定
  1. Низкая стоимость обучения и понятная документация

Проект сборки Vue

  1. Vue предоставляет официальный интерфейс командной строки для быстрого создания сложных шаблонов для одностраничных приложений (SPA). На основе каркаса проекта Vue cli, URL:cli.vuejs.org/zh/guide/

  2. Запустите одну из следующих команд, чтобы создать новый проект, по умолчанию можно выбрать значение по умолчанию.

      vue create vue-hello-world (命令行)

  vue ui (界面)

  3. После создания проекта выполните следующую команду, чтобы увидеть интерфейс первоначального создания проекта.

      cd vue-hello-world

  yarn serve

  4. По умолчанию браузер обращаетсяhttp://localhost:8080/Вы увидите следующий интерфейс:

vue.png

Связанная с Vue структура и введение в жизненный цикл

  • Структура каталогов следующая:

vue-cli3.0.png

  • Знакомство с компонентами одного файла .vue

    <template>
<!--html-->
</template>

<script>
//js
</script>

<style>
/* css style */
</style>

  • Компонентное построение приложений

Создавайте большие приложения, используя небольшие автономные и часто повторно используемые компоненты, со страницей, построенной как стандартные блоки.

components.png

  • Жизненный цикл Vue выглядит следующим образом:

    lifecycle.png

  • Метод крючка:Результат выполнения метода шаблона называется методом-ловушкой. Личное понимание: он влияет на выполнение шаблона и перехватывает функцию.Этот метод является функцией-ловушкой.

функция ловушки объяснять
beforeCreate Инициализация экземпляра вызывается автоматически
created Вызывается после создания экземпляра
beforeMounte Запускается перед монтированием, элемент загружается, но значение атрибута не отображается
mounted И вызовите хук после его установки на инстанс
beforeDestroy Вызывается, когда начинается уничтожение экземпляра
destroyed Вызывается после уничтожения экземпляра

Общие директивы Vue

  • Декларативный рендеринг

    <div id="app">
  {{ message }}
</div>

    data: {
    message: 'Hello Vue!'
}

  • условный рендеринг

    <div id="app-3">
  <p v-if="seen">现在你看到我了</p>
</div>

    data: {
    seen: true
}

  • рендеринг цикла

    <div id="app-4">
  <ol>
    <li v-for="todo in todos">
      {{ todo.text }}
    </li>
  </ol>
</div>

    data: {
  todos: [
    { text: '学习 JavaScript' },
    { text: '学习 Vue' },
    { text: '整个牛项目' }
  ]
}

  • прослушать событие

    Вы можете использовать директиву v-on для прослушивания событий DOM и запуска кода JavaScript при их возникновении.

    <div id="example-2">
<!-- `greet` 是在下面定义的方法名 -->
<button v-on:click="greet">Greet</button>
</div>

    methods: {
  greet: function () {
    // `this` 在方法里指向当前 Vue 实例
    alert('Hello ' + this.name + '!')
  }
}

  • Кэши вычисляемых свойств и методы

    <div id="example">
  <p>Original message: "{{ message }}"</p>
  <p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>

    var vm = new Vue({
  el: '#example',
  data: {
    message: 'Hello'
  },
  computed: {
    // 计算属性的 getter
    reversedMessage: function () {
      // `this` 指向 vm 实例
      return this.message.split('').reverse().join('')
    }
  },
  methods: {
    // 方法
    reversedMessage: function () {
    return this.message.split('').reverse().join('')
    }
  }
})

  • данные меняются, смотри

    var vm = new Vue({
  el: '#demo',
  data: {
    firstName: 'Foo',
    lastName: 'Bar'
  },
  computed: {
    // 当两个值变化时，将会触发此函数
    fullName: function () {
      return this.firstName + ' ' + this.lastName
    }
  }
})

  • привязка ввода формы

    <input v-model="message" placeholder="edit me">
<p>Message is: {{ message }}</p>

  • сокращение

    аббревиатура v-bind

    <!-- 完整语法 -->
<a v-bind:href="url">...</a>

<!-- 缩写 -->
<a :href="url">...</a>

    аббревиатура v-on

    <!-- 完整语法 -->
<a v-on:click="doSomething">...</a>

<!-- 缩写 -->
<a @click="doSomething">...</a>

маршрутизация

  // 可提供懒加载
  const router = new VueRouter({
  routes: [
    {
      path: '/user/:userId',
      name: 'user',
      component: User
    }
  ]
  })

<!--html跳转-->
<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>

// js跳转
router.push({ name: 'user', params: { userId: 123 }})

Доступ к API с помощью axios

// get请求 
axios.get('/user', {
  params: {
  ID: 12345
  }
})
.then(function (response) {
  console.log(response);
})
.catch(function (error) {
  console.log(error);
});

// post 请求
axios.post('/user', {
  firstName: 'Fred',
  lastName: 'Flintstone'
})
.then(function (response) {
  console.log(response);
})
.catch(function (error) {
  console.log(error);
});

Изучив вышеперечисленные знания, вы сможете использовать Vue для создания простых страничных приложений.

Spring Boot

Прежде чем говорить о Spring Boot, вам нужно кое-что узнать о Java.

  • Уровень синтаксиса подобен C#, который здесь пропущен.

  • Как работает Java

    java.jpg

  • Виртуальная машина JVM

    jvm1.png

площадь объяснять
куча Общий для всех потоков; экземпляр объекта new.
Стек виртуальных машин (стек) Каждый поток имеет независимый стек, хранит локальные переменные и ссылки на объекты. После завершения вызываемого метода соответствующие переменные области стека немедленно уничтожаются.
статическая/методическая область Область метода содержит всю информацию о классе и статические переменные.

вводить

Spring Boot — это все проекты, разработанные на базе Spring. Spring Boot предназначен для того, чтобы вы могли работать с приложениями Spring как можно быстрее и с минимальным количеством файлов конфигурации.

Разработайте единую службу RESTful с помощью Spring Boot

В связи с большим количеством интернет-ресурсов этапы создания подробно расписывать не буду. Вот онлайн-учебник, Вы можете выполнить следующие шаги, чтобы создать проект, к которому можно получить доступ с помощью браузера. SpringBoot создает новый проект HelloWorld:blog.CSDN.net/small_mouse…

Структура каталогов проекта

SpringBootCli.png

взаимодействовать с фронтендом

  1. Интерфейсный запрос Http будет отправлен на уровень контроллера, а уровень контроллера перейдет к соответствующему классу в соответствии с соответствующей аннотацией информации о маршрутизации.
// 如： /api/user 的get请求将会被 UserQry() 函数处理

@RequestMapping("/api")
public class UserController {
    
    @RequestMapping(value ="/user", method = RequestMethod.GET)
    public List<User> UserQry() {
        return userService.getUser();
    }
}
  1. После того, как фреймворк обработан, наконец вызывается слой картографа.

mysql.png

  @Select("select * from user")
  List<User> getUser();

  1. После выполнения соответствующего Sql он, в свою очередь, вернется на уровень контроллера, а затем при возврате Http будет возвращен внешнему вызывающему объекту в виде строкового объекта Json.

  2. Внешний интерфейс получает возвращенное значение в ответе Http, а затем выполняет некоторую обработку.

концепция

  • весенний ioc-контейнер:, в основном используется для управления объектами и зависимостями, а также внедрения зависимостей

  • Внедрение зависимости:Вместо нового пусть Spring управляет новым процессом

  • Инверсия контроля:Вместо того, чтобы создавать экземпляры объектов с помощью new, фактическое управление было передано программе.

  • Лицом к срезу:Извлеките некоторые функции и включите их в бизнес посредством «динамического переплетения».

Bean

Компонент — это объект, а объект, сгенерированный ioc-контейнером, — это компонент.

Настройка аннотаций VS

// Spring 的操作
package com.yiibai.common;

public class Customer 
{
	private Person person;
	
	public Customer(Person person) {
		this.person = person;
	}
	
	public void setPerson(Person person) {
		this.person = person;
	}
	//...
}

package com.yiibai.common;

public class Person 
{
  //...
}

// Spring 的配置Bean的xml
<bean id="customer" class="com.yiibai.common.Customer">
  <property name="person" ref="person" />
</bean>

<bean id="person" class="com.yiibai.common.Person" />

// Spring 的注解方式
public class Customer 
{
  @Autowired
  private Person person;
}

аннотация

  1. @SpringBootApplication

@SpringBootApplication = @Configuration + @EnableAutoConfiguration + @ComponentScan упрощает настройку программы.

  1. @Configuration

Аннотация к классу указывает, что это IOC-контейнер, что эквивалентно конфигурационному файлу Spring, конфигурационному классу IOC-контейнера.

  1. @ComponentScan

Если сканируются классы с такими аннотациями, как @Component @Controller @Service, эти классы регистрируются как bean-компоненты. @Controller, @Service, @Repository являются уточнениями @Component, Эти три аннотации имеют больше семантики, чем @Component, и они соответствуют классам уровня управления, уровня службы и уровня сохраняемости соответственно.

  1. @RestController

Скажите Spring, чтобы он отображал результат в виде строки JSON и возвращал его непосредственно вызывающей стороне.

  1. @RequestMapping

Сообщите Spring, что это аннотация, используемая для обработки сопоставления адресов запросов.

  1. @Autowired

Переменные-члены класса, методы и конструкторы могут быть аннотированы. Найдите его в контейнере IoC и выполните автоподключение. (Удалите @Autowired и попробуйте)

  1. **@Mapper** от Mybatis

Аннотированный интерфейс генерирует класс реализации

перекрестный домен

Когда браузер запрашивает ресурсы другого доменного имени с веб-страницы одного доменного имени, любое различие в доменном имени, порте или протоколе является междоменным.

Совместное использование ресурсов между источниками (CORS) — это механизм, который использует дополнительные заголовки HTTP, чтобы сообщить браузерам, что запущенным веб-приложениям разрешен доступ к указанным ресурсам с разных исходных серверов.

RESTful стиль

Rest — это архитектурный стиль веб-служб, стиль дизайна, в котором URL-адреса указывают только ресурсы и выполняют различные операции с глаголами метода HTTP.

// 非RESTful接口
api/getfile.php - 获取文件信息，下载文件
api/uploadfile.php - 上传创建文件
api/deletefile.php - 删除文件

// 只需要api/users这一个接口
GET http://localhost:8080/api/users （查询用户） 
POST http://localhost:8080/api/users （新增用户） 
PUT http://localhost:8080/api/users （更新用户） 
DELETE http://localhost:8080/api/users （删除用户）

Преимущества отдыха:

  • URL-адреса хорошо читаются и самоописывают
  • Нормализуйте процесс запроса и возвращайте результаты
  • Слабая связь между описанием ресурса и представлением
  • Предоставляет OpenAPI для облегчения интеграции сторонних систем и улучшения взаимодействия.
  • Обеспечьте интерфейс службы без сохранения состояния, уменьшите сложность и улучшите горизонтальную масштабируемость приложений.

расширять

Модель памяти JAVA (Не потокобезопасный), Linq, JWT, Redis, WebSocket, единый вход (SSO), очередь сообщений

Распределенное весеннее облако

На самом деле небольшая демонстрация Spring Boot, которую мы сделали выше, является сервисом. Несколько небольших модулей Spring Boot вместе. Использование некоторых распределенных наборов для кластеризации модулей, подключения и управления модулями на самом деле является базовым микросервисом Spring Cloud.

Связь между Spring Boot и Spring Cloud

Быстрая разработка отдельного микросервиса на основе Spring Boot, Spring Cloud — это инструмент разработки на основе Spring Boot; Spring Boot фокусируется на отдельном отдельном микросервисе, который можно быстро и легко интегрировать, а Spring Cloud фокусируется на глобальной структуре управления сервисами; Spring Boot может покинуть проекты разработки Spring Cloud Use независимо, но Spring Cloud неотделим от Spring Boot, который является зависимостью.

Dubbo

Dubbo — это высокопроизводительная среда Java RPC, адрес:dubbo.apache.org/zh-cn/

Некоторые концепции микросервисов Dubbo

architecture.png

  1. Производитель публикует услугу в реестре услуг.

  2. Потребители подписываются на услуги в реестре услуг

  3. Потребители звонят в зарегистрированные службы

Реализация Dubbo одного микросервиса

// 定义服务接口标准
public interface DemoService {

    String sayHello(String name);
}

// 生产者项目引用并实现
@Service
public class DemoServiceImpl implements DemoService {

  @Override
  public String sayHello(String name) {
    return "Hello, " + name + " (from Spring Boot)";
  }
}

// 消费者引用然后调用
@RestController
public class DemoConsumerController {

  @Reference
  private DemoService demoService;

  @RequestMapping("/sayHello/{name}")
  public String sayHello(@PathVariable("name") String name) {
    return demoService.sayHello(name);
  }
}

Мониторинг и отображение интерфейса Dubbo

[Ошибка загрузки изображения...(image-f1b5da-1549937296666)]

Знакомство с распределенным базовым комплектом

cloud.png

  • эврика, смотритель зоопаркаМодуль регистрации и обнаружения услуги, услуга регистрируется в сервисном центре и предоставляется потребителям.

  • Hystrixвыключатель. Для обеспечения высокой доступности один сервис обычно развертывается в кластере. Если есть проблема с одной службой, вызов этой службы вызовет блокировку потока.Если в это время поступает большое количество запросов, ресурсы потока контейнера сервлета будут израсходованы, что приведет к параличу службы. Зависимости между службами, сбои могут распространяться и иметь катастрофические последствия для всей микросервисной системы.

  • zuulшлюз маршрутизации. Основная функция Zuul — маршрутизация, переадресация и фильтрация. Например, /api/user перенаправляется в службу пользователя, а /api/shop — в службу магазина.

  • Spring Cloud ConfigПри наличии большого количества сервисов для облегчения унифицированного управления и обновления файлов конфигурации сервисов в режиме реального времени требуется компонент распределенного центра конфигурации.

  • Spring Cloud SleuthФункция состоит в том, чтобы предоставить решение для отслеживания в распределенной системе.

Сравнение Spring Cloud и Dubbo

  • Сравнение базового комплекта
    duobbo@Spring.png

Dubbo реализует только управление службами, в то время как подпроекты Spring Cloud охватывают многие компоненты микросервисной архитектуры, и управление службами является лишь одним из ее аспектов. Dubbo предоставляет различные фильтры.Элементы «нет» в приведенном выше примере можно улучшить, расширив фильтр. Например:

Распределенная конфигурация: вы можете использовать алмаз Taobao и disconf Baidu для управления распределенной конфигурацией; Отслеживание услуг: вы можете использовать Hydra с открытым исходным кодом Jingdong или расширить фильтр, чтобы использовать Zippin для отслеживания услуг; Пакетные задачи: вы можете использовать Elastic-Job и tbschedule с открытым исходным кодом от Dangdang.

  • Сравнение производительности

speed

  • сервисная зависимость

Даббо: Поставщик услуг и потребитель зависят от интерфейса. Поэтому каждый микросервис должен определить свой собственный интерфейс и опубликовать его в частном хранилище посредством непрерывной интеграции. Вызывающее приложение имеет четкое представление об абстрактном интерфейсе, предоставляемом микросервисом. Зависимости, среды разработки, тестирования и интеграции должны строго управлять зависимостями версий.

Spring Cloud: поставщик услуг и потребитель услуг взаимодействуют через JSON, поэтому необходимо определить только соответствующие поля JSON, а потребитель и поставщик не имеют интерфейсных зависимостей.

Категории