• Главная
  • Курсы
  • События
  • Блог
  • Контакты
  • Магазин
    • Загрузки
  • Партнерка
  • Обо мне
Есть вопросы? Звоните:
+7 (917) 449 09 97
admin@nizamov.school
РегистрацияВход
nizamov.school
  • Главная
  • Курсы
  • События
  • Блог
  • Контакты
  • Магазин
    • Загрузки
  • Партнерка
  • Обо мне

Blog

  • Главная
  • Блог
  • Blog
  • МОБИЛЬНАЯ 1С. LAZYLOADING НОМЕНКЛАТУРЫ. ЧАСТЬ 2

МОБИЛЬНАЯ 1С. LAZYLOADING НОМЕНКЛАТУРЫ. ЧАСТЬ 2

  • Опубликовано Илья Низамов
  • Разделы Blog
  • Дата 15.03.2021
  • Комментарии Нет комментариев
мобильная 1с

Привет программисты 1С, с вами Низамов Илья. Сегодня мы продолжим нашу разработку и создадим фронденд на Vue и фреймворке Vuetify. Поставим плагин Axios для выполнения асинхронных запросов к http сервису 1С. Сделаем подгрузку товаров при прокрутке до конца списка и доработем запрос из первой части урока, так как я забыл учесть характеристики товаров. А в следующем уроке мы перенесем весь код в мобильное приложение 1С и получим конечный результат.

Запишись на тренинг

РАЗРАБОТАЙ МИНИ САЙТ НА СОВРЕМЕННОМ ФРЕЙМВОРКЕ NuxtJS ДЛЯ ОФОРМЛЕНИЯ ЗАКАЗОВ КОНТРАГЕНТАМИ
ПОДРОБНЕЕ

Исходник страницы Index.vue

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@4.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
</head>
<body>
<div id="app">
<v-app>
<v-main>
<v-container>
<v-card
:loading="loading"
class="mx-auto my-12"
max-width="374"
v-for="(product, i) in products"
:key="i"
>
<v-img
height="250"
:src="product.img"
></v-img>

<v-card-title>{{ product.title }}</v-card-title>

<v-card-subtitle>
Цена: {{ product.price }} руб.
</v-card-subtitle>

<v-divider class="mx-4"></v-divider>

<v-card-text>
{{ product.desk }}
</v-card-text>

<template slot="progress">
<v-progress-linear
color="deep-purple"
height="10"
indeterminate
></v-progress-linear>
</template>
</v-card>

<div class="observer" ref="observer"></div>
</v-container>
</v-main>
</v-app>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script>

new Vue({
el: '#app',
vuetify: new Vuetify(),
data() {
return {
loading: false,
lastCode: 0,
products: [],
observer: null
}
},
methods: {
async load() {
this.loading = true
try {
const url = this.lastCode === 0 ? 'http://10.10.1.10/vuesrv/hs/vue/products' : `http://10.10.1.10/vuesrv/hs/vue/products?lastcode=${this.lastCode}`

const response = await axios.get(url, {
credential: true,
auth: {
username: 'web',
password: 1
}
})

this.lastCode = response.data.lastcode
this.products = this.products.concat(response.data.products)
console.log(response.data)
} catch (e) {
console.log(e)
} finally {
this.loading = false
}
}
},
mounted () {
if (window['IntersectionObserver']) {
this.observer = new IntersectionObserver(([entry]) => {
if (entry && entry.isIntersecting) {
this.load()
}
})

this.observer.observe(this.$refs.observer)
} else {
this.loading = true
}
}
})
</script>
</body>
</html>
author avatar
Илья Низамов

Предыдущая запись

МОБИЛЬНАЯ 1С. LAZYLOADING НОМЕНКЛАТУРЫ. ЧАСТЬ 1
15.03.2021

Следующая запись

МОБИЛЬНАЯ 1С. LAZYLOADING НОМЕНКЛАТУРЫ. ЧАСТЬ 3
23.03.2021

Вам также может понравиться

1с шина
1С ШИНА. ШИНА ДАННЫХ 1С. УСТАНОВКА
2 февраля, 2022
Новый год nizamov.school
Новый год на NIZAMOV.SCHOOL
20 декабря, 2021
сервер взаимодействия
1С сервер взаимодействия. Amazon S3. The bucket you are attempting to access must be addressed using the specified endpoint. Please send all future requests to this endpoint.
4 мая, 2021

Оставьте ответ Отменить ответ

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Поиск

Рубрики

  • Blog

Ссылки

  • Политика конфиденциальности
  • Публичная оферта

Сайт создан в NIZAMOV.studio

Регистрация с помощью:

Войти Google Войти Twitter Войти Vkontakte

Вход через логин и пароль

Забыли пароль?

Нет аккаунта? Регистрируйся прямо сейчас

Register a new account

Are you a member? Login now