• Как правильно переписать класс?

    FinGanapre
    @FinGanapre
    Реализация интересная, но вообще так:
    get last() {return this.method()}

    Вам просто не нужен method(). Перенесите тело в last.
    Ответ написан
    Комментировать
  • Почему сессия в Node.js быстро сбрасывается?

    FinGanapre
    @FinGanapre
    secret пробрасывается через переменную окружения. Ваша задача создать файл .env и прописать туда необходимые переменные (коннект к бд, секретный ключ, порт, хост...). Чтобы считать файл, используйте dotenv. Для этого создайте папку config к примеру, в ней файл index.js в котором пропишите экспортируемый объект с необходимым конфигом. Этот объект вы будете использовать для доступа к переменным окружения в других модулях. При подключении библиотеки лучше указать путь к файлу .env полностью (__dirname ...).
    Файл .env не заливается в репозиторий, укажите его в .gitignore
    Если вы про генерацию ключа как последовательности символов, то любой генератор паролей как вариант. Кол-во символов побольше и поехали.
    Ответ написан
    Комментировать
  • Как настроить добавление в корзину?

    FinGanapre
    @FinGanapre
    1. При добавлении в корзину проверять нет ли этого товара в корзине (У вас будут id товаров в реальном приложении, проверяйте по ним. В корзину в принципе складывают только id товаров)
    2. Кнопки добавить в корзину уже не должно быть в карточке товара, если он в корзине. На её место можно вставить выбор количества товара (с мин и макс значение, вводом в ручную и + -), а также добавить кнопку удалить если отдел маркетинга не против (можно удалять выбором менее 1)
    3. Очистка корзины = присвоение пустого массива. Из локала можно удалить так
    4. Подобное лучше писать на фреймворках, т.к. без них придётся ручками контролировать ререндеринг интерфейса. Как минимум стоит описать это через класс.
    Ответ написан
    Комментировать
  • Возможно ли прописать условие, если при нажатии кнопки воспроизведется функция 1, то name = "Vlad"?

    FinGanapre
    @FinGanapre
    Не уверен, что вам нужны 3 разные функции. Лучше закинуть имена в дата атрибуты кнопок и ловить клики на всех кнопках в одном обработчике. Т.к. можно кликнуть мимо кнопки, проверять есть ли дата свойство у элемента по которому кликнули перед присваиванием нового имени. Например так
    Ответ написан
    Комментировать
  • Как сделать чтобы header и футер не прокручивались?

    FinGanapre
    @FinGanapre
    Ответ написан
    Комментировать
  • Есть ли язык Eris и вообще существует-ли?

    FinGanapre
    @FinGanapre
    Это не язык, а обёртка под node.js:
    https://www.npmjs.com/package/eris
    Ответ написан
    Комментировать
  • В чем разница между этими двумя способами передачи данных в компонент?

    FinGanapre
    @FinGanapre
    Чтобы что-то передать в дочерний компонент из родителя через пропсы всегда можно байндить.
    Есть сокращённый синтаксис:
    :msg="'Welcome to Your Vue.js App'"
    и полный:
    v-bind:msg="'Welcome to Your Vue.js App'"
    В кавычках всегда js выражение, т.е. чтобы передать строку, нужно поставить ещё кавычки. Просто понимайте, что в кавычках у вас обычный js.
    Но можно обойтись и без bind, но такое редко можно встретить, т.к. чаще всего в компонент передаётся переменная. Вот туториал, на который следует ориентироваться
    Ответ написан
    Комментировать
  • Как передавать значение from и to в div используя ion range slider?

    FinGanapre
    @FinGanapre

    Всё работает, не вижу проблемы
    Ответ написан
    Комментировать
  • Как переключать список через другой список?

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

    Pug
    .lists-app
      - const lists = new Array(10)
      - const items = new Array(3)
      
      each i, idx in lists
        button(
          data-list-toggle=`${idx}`
        ) open #{idx + 1}
        ul.lists-app__list(
          data-list=`${idx}`
        )
          each i, idx in items
            li list elem #{idx + 1}

    SASS
    .lists-app
      &__list
        display: none
        &--open
          display: block

    JS
    const rootClass = 'lists-app'
    const openClass = 'lists-app__list--open'
    const $listsRoot = document.querySelector(`.${rootClass}`)
    
    const findList = idx => {
      return $listsRoot.querySelector(`[data-list='${idx}']`)
    }
    const closeList = $el => {
      $el.classList.remove(openClass)
    }
    const openList = $el => {
      $el.classList.add(openClass)
    }
    const isOpen = $el => $el.classList.contains(openClass)
    const getOpenList = () => {
      return $listsRoot.querySelector(`.${openClass}`)
    }
    
    $listsRoot.addEventListener('click', e => {
      if (!e.target.hasAttribute('data-list-toggle')) {
         return
      }
      
      const idx = e.target.dataset.listToggle
      const $list = findList(idx)
      
      if (isOpen($list)) {
        closeList($list)
        return
      }
      
      const $openList = getOpenList()
      $openList ? closeList($openList) : null
      
      openList($list)
    })

    Ответ написан
    Комментировать
  • Как связать правильно связать график с беком?

    FinGanapre
    @FinGanapre
    Если под "налету" имеется в виду обновление данных на клиенте при изменении данных на сервере, то вам нужны веб-сокеты. Это удобная кроссбраузерная обёртка для них. Альтернатива из ушедших времён - long-polling и short-polling. Естественно, на серверной стороне также должен быть реализован этот метод передачи данных.
    Ответ написан
    Комментировать
  • Example question?

    FinGanapre
    @FinGanapre
    Не совсем понял, что вы пытаетесь реализовать... посмотрите на вывод, возможно, что-то из этого.
    a = 123
    b = 'asd'
    ab = str(a) + b
    list = []
    while a > 0:
      a -= 1
      ab = str(a) + b
      list.append(ab)
      print(a)
      print(ab)
      print(list)
    Ответ написан
    Комментировать
  • Как запретить нажатие колёсика мыши на сайте?

    FinGanapre
    @FinGanapre
    Если вы хотите запретить активацию скролла по нажатию на колёсико, то так.

    document.addEventListener('mousedown', e => e.which === 2 ? e.preventDefault() : null )
    Ответ написан
    Комментировать
  • Как поместить текст в центр кнопки?

    FinGanapre
    @FinGanapre
    Текст не вмещается просто. Зачем это задано классу button:
    width: 170px;
    height: 40px;

    Уберите и будет ок. Вы же за счёт padding-ов и контента задаёте размер.

    devtools
    5f0752d5735b0619618226.jpeg
    Ответ написан
    Комментировать
  • Сервер Express в nuxt, как настроить?

    FinGanapre
    @FinGanapre
    Если вопроса не появилось, возможно вы не выбрали SSR при генерации приложения (mode: 'universal' в nuxt.config.js должно быть)

    Примерно так должны выглядеть файлы. В app.js работаем как с обычным express далее, только запуск сервера у нас в index.js, так что в app.js его запускать не нужно, просто экспортируем и импортируем в index.js в котором и запускаем (тут уже всё сделано, просто объяснил)

    Структура:
    server/index.js
    server/app.js

    index.js

    const consola = require('consola')
    const { Nuxt, Builder } = require('nuxt')
    const app = require('./app')
    
    // Import and Set Nuxt.js options
    const config = require('../nuxt.config.js')
    config.dev = process.env.NODE_ENV !== 'production'
    
    async function start () {
      // Init Nuxt.js
      const nuxt = new Nuxt(config)
    
      const { host, port } = nuxt.options.server
    
      await nuxt.ready()
      // Build only in dev mode
      if (config.dev) {
        const builder = new Builder(nuxt)
        await builder.build()
      }
    
      // Give nuxt middleware to express
      app.use(nuxt.render)
    
      // Listen the server
      app.listen(port, host, () => {
    		consola.ready({
    			message: `Server listening on http://${host}:${port}`,
    			badge: true
    		})
    	})
    }
    start()


    app.js

    const express = require('express')
    const app = express()
    
    module.exports = app



    Новый способ:
    nuxt.config.js

    serverMiddleware: {
        '/api': '~/api'
      },



    api/index.js

    const express = require('express')
    
    // Create express instance
    const app = express()
    
    app.get('/', (req, res) => res.status(200).json([{name: "Robert"}, {name: "John"}]))
    
    // Export express app
    module.exports = app
    
    // Start standalone server if directly running
    if (require.main === module) {
      const port = process.env.PORT || 3001
      app.listen(port, () => {
        console.log(`API server listening on port ${port}`)
      })
    }



    pages/index.vue

    <template lang="pug">
      div
        p(v-for="user in users") {{ user.name }}
    </template>
    <script>
    export default {
      async asyncData({ $axios }) {
        const users = await $axios.$get('/api/')
    
        return {
          users,
        }
      },
    }
    </script>

    Ответ написан
    7 комментариев
  • Как настроить особенности работы с дробями в JavaScript?

    FinGanapre
    @FinGanapre
    Считайте в копейках, выводите в интерфейс как нужно. По поводу ввода в поля - валидируйте значения любой удобной библиотекой.
    Ответ написан
    4 комментария
  • Почему стили и скрипты не грузятся при динамическом url?

    FinGanapre
    @FinGanapre
    Полагаю, вы неверно отдаёте статические ресурсы. Вот документация

    Если в шаблонах указан верный путь до статических файлов и в express вы сконфигурировали отдачу статики правильно, согласно документации, то никаких проблем не будет.

    Если вы использовали данный вариант:
    app.use(express.static(path.join(__dirname, 'public')))


    То в шаблонах пути до папок с css и js должны быть:
    <link rel="stylesheet" href="/css/main.css">
    <script src="/js/main.js"></script>


    При условии, что статика подключена в index.js и структура каталогов следующая:
    index.js
    public/css/main.css
    public/js/main.js
    Ответ написан
  • Почему сайт не видит jquery ui?

    FinGanapre
    @FinGanapre
    Css от jqueryUI не вижу чтобы был подключен. Сама библиотека (js) работает, просто стилей нет.
    На рабочем сайте у вас подключено отсюда
    devtools

    5f00eec6ae014569120313.jpeg
    5f00eed8b31c9723760633.jpeg
    Ответ написан
  • Почему this равно undefined в свойстве объекта?

    FinGanapre
    @FinGanapre
    Создайте геттер как вариант:
    const Api = {
      baseUrl: 'http://localhost:9000/',
      get dataUrl() {
        return `${this.baseUrl}api/odata/`
      }
    }
    
    console.log(Api.dataUrl)
    Ответ написан
    Комментировать
  • Почему на "превью" у age 25, а когда открываешь, то 45 (в первом случае)?

    FinGanapre
    @FinGanapre
    Когда вы "раскрываете" объект, вам показывают его текущее значение. Наведите на иконку с информацией (i) рядом с объектом в консоли "Value below was evaluated just now". Что означает, что значение ниже было вычислено в данный момент. В тот самый момент, когда вы раскрыли объект.
    При этом, значение определяется при первом раскрытии объекта.
    Запустите этот код:
    const user = {
      name: 'Nikola',
      age: 25
    }
    console.log(user)
    
    setTimeout(() => {
      user.age = 45
      console.log(user)
    }, 5000)


    Значение в объекте будет изменено через 5 секунд.
    При первом запуске кода, сразу раскройте первый вывод в консоль. Дождитесь, пока измениться значение и произойдёт второй. Можете снова открывать и закрывать первый вывод в консоль, его значение не будет меняться и будет составлять 25.

    Запустите код ещё раз, но в этот раз не открывайте первый вывод в консоль. После второго вывода откройте оба. Вы увидите, что и там и там значение будет составлять 45.
    Ответ написан
    1 комментарий
  • Как обрабатывать клик по любой ссылке?

    FinGanapre
    @FinGanapre
    Конкретно ваш код не отрабатывает, т.к. к вам приходит псевдо-массив (NodeList) всех элементов a в документе. Вы могли бы пройтись по нему циклом и повесить на каждый элемент обработчик, но так делать не нужно. Во-первых, вы заставляете браузер искать все a на странице, во-вторых - вешаете обработчик на каждую. При этом, делаете это через цикл.

    Так как по умолчанию все события всплывают (это поведение можно изменить, а также отменить всплытие события на элементе), т.е. клик на вложенный элемент можно поймать в родительском, лучше вешать все обработчики на документ.

    // вешаем обработчик на документ
    // если повесите на каждую ссылку - то кол-во обработчиков будет равно кол-ву ссылок
    // так себе идея
    document.addEventListener('click', e => {
      // определяем, что клик произошёл на ссылке
      if (e.target.nodeName === 'A') {
        // отменяем переход по ссылке
        e.preventDefault()
        console.log('do some there')
      }
    })


    getElementsByTagName - не стоит использовать. Сейчас прекрасно работают querySelector и querySelectorAll. Из старых способов получения элементов можете пользоваться разве что getElementById, т.к. он отработает чуть быстрее
    Ответ написан
    1 комментарий