[ВАЖНО - Читай описание] Vue.js Приложение мессенджер (messenger application)
HTML-код
- Опубликовано: 15 фев 2020
- --------------------------------------------------------------------------------------------------------------------------------------------------------
ВАЖНО - Видео на этом канале 3х летней давности и большинство уже НЕАКТУАЛЬНЫЕ в силу изменения синтаксиса, методов и подходов во Vue.js версии 3. Все видео были записаны на Vue.js версии 2. Много чего уже просто НЕ БУДЕТ РАБОТАТЬ или выдаст ошибки.
Новый канал на актуальном стеке Vue.js v3, Pinia, Vue router@next, Ionic (мобильные приложения), FireBase (база данных, аутентификация и тд) - / @intothecoding
НО! Новый канал ведется на АНГЛИЙСКОМ ЯЗЫКЕ - так что у вас есть уникальная возможность научиться кодить и подтянуть язык - так как Английский нужен всегда!
Жду вас на новом канале!
--------------------------------------------------------------------------------------------------------------------------------------------------------
1. Установка сборки Vue Cli 3: Откройте терминал - пройдите на рабочий стол - и выполните в нем команду: npm install -g @vue/cli
( cli.vuejs.org/guide/installat... )
Если совсем не получится установить Vue Cli - смотрите мой видео-урок на эту тему: • [ВАЖНО - Читай описани...
2. Откройте папку проекта в редакторе кода.
3. Пропишите зависимости в package-json, согласно уроку и выполните в терминале / командной строке команду npm install
- "axios": "^0.19.0",
- "vue-router": "^3.1.3",
- "vuex": "^3.1.2",
- "material-design-icons-iconfont": "^5.0.1"
4. Далее все как в видео-уроке. Должно работать :)
Файл db.json: github.com/antonboltnev/chat-...
Файлы стилей: github.com/antonboltnev/chat-...
Если такой часовой формат видео для вас будет утомительным - впредь учту и буду разбивать на несколько.
Ссылка на репозиторий проекта (чур не подглядывать пока сами не сделаете :) - github.com/antonboltnev/chat-app
Приятного просмотра!
![[ВАЖНО - Читай описание] Почему вы просто обязаны использовать VUEX в своем приложении!](http://i.ytimg.com/vi/5lBf-Fm4io4/mqdefault.jpg)
![[ВАЖНО - Читай описание] Почему вы просто обязаны использовать VUEX в своем приложении!](/img/tr.png)
![[ВАЖНО - Читай описание] PUSH-уведомления для web-сайта на Vue.js](http://i.ytimg.com/vi/1voPB5k0ZMY/mqdefault.jpg)
![Налог на незнание JavaScript - [Hamster Kombat]](/img/1.gif)
Нереално крутой канал! Тьма полезной инфы, объясняешь как корешу, за это отдельное спасибо, уютно )) жду вторую часть видео, было б хорошо, если б там ещё и деплой на обычный сервер был;)
А чего там деплоить-то? npm run build, и папку dist на обычный сервер.
Ну это супер просто)
Спасибо большое за твой труд. Получилось:)) Жду следующей части;)
Ибрагим Алимжанов отлично!
Спасибо за урок, ждём новых проектов на vue
Здравствуйте. Отличный контент. Спасибо вам! Жду новых видео.
ДЯДЬКА ты круто объясняешь!!!
Все по полчкам, спасибо
дружище, продолжай, лайк
Спасибо за такой труд, сможете сказать когда 2 часть очень жду
Спасибо!
дружище, держи лайк!
Буду очень ждать авторизацию, с записью в db.json!
Норм, подписался
Спасибо за материал! Когда следующий урок?
согласен круто)
а какая разница, передавать params:id в роут или передавать query? для чего нужно одно, а для чего другое?
Прошу подсказать. Какая тут версия Vue используется - 2 или уже 3?
спасибо, урок огонь! стоит ли ждать продолжение?
Подскажите где иконки такие брать в папки и файлы ?
На 44-1 минуте мы вызываем экшен, чтобы подсунуть пустую строку, потому что это его, экшена(мутэйшена) особенность, для другого сделанная... Так почему мы сразу в сторе не стелали пустую строку? currentUserChat: ""
И почему вообще он в хедер выводит эти скобки вместо toString(%тот самый пустой объект%) ? Ну, что-то вроде [object Object] хотя бы?
Спасибо за контент!
Правильно ли я понимаю, что если мы перейдем в чат пользователя, а затем обновим страницу, то сообщения уже не загрузятся?
Так как пропсы передаете через роутер?
Да все верно. Чтобы иметь возможность инициализировать приложение например на странице чата, то нужно запрашивать список чатов из API на странице чата. Потом фильтровать их основываясь на id чата в route.query и отфильтрованные данные распихивать в сообщения
А можно делать по человечески, инициализировать работу с апи в app.vue, а не в компонентах, потому что компоненты только для отрисовки контента. Также страницу пользователя делать через динамический роутинг можно. То, что пишет автор, далеко до продакшена. Но сама суть того, что он показывает новичкам азы, это хорошо. Но чтобы хорошо писать, изучайте документацию и смотрите хорошо написанные проекты
в 1:05:04 можно тогда спокойно передавать this.SET_MESSAGE_TO_CHAT(user)
а в сторе принимать его же и делать axios.put(chatstUrl + user.id, user)
Очень интересная подача материала! Смотрится легко, понятно, с удовольствием.
Но у меня есть пара вопросов:
1) Почему вы поместили метод SEND_MSG_TO_CHAT во Vuex store? Ведь этот метод никак не меняет state (не вызывает мутаций).
2) Кроме того, первым параметром этого метода вы указываете {commit}, хотя в теле метода этот commit никак не используете - ESLint такое не пропустит. В таких крайних ситуациях, не лучше-ли использовать в качестве первого параметра нижнее подчёркивание (символ "_"?
Поправьте, если я не прав.
Алексей Олегович 1) да можно из компонента вызвать этот запрос. Разницы никакой, просто удобнее когда все запросы к апи в одном месте. Но вы правы.
2) не знаю прокатит ли нижнее подчеркивание, но я обычно просто пустые {} ставлю, либо другой конструкцией через {context}. Тут я просто забыл:)
Вопрос. А почему все таки mapState используете? а не mapGetters
Fessan если надо взять данные из стейта в компонент - это mapState. Если надо условно сложить данные А и Б из стейта и потом получить в компонент - пишем геттер складывающий их и получаем в компоненте через mapGetters
Всё очень круто, но очень бы хотелось подобное видео, но fullstack js (Mongo, Express, Vue или Nuxt и Node.js) это была бы бомба
Семён Прохоров этого точно не будет, так как я не фулстак:)
Это на vue 2?
Зачем каждый файл префиксовать приставкой v-?
Привет! Уже не первый раз помогли твои видео. Не планируешь развиваться дальше? Патреон? чатик в телеге ?
Fessan я с трудом на просто видео время нахожу:) чатик в телеге - это мой личный тг:)
Не работает( Ругается на vuex, даже если скачать с гита авторскую версию. В результате не подтягиваются данные из store. Обновление версии все только портит.
! ВАЖНО - Читайте описание к видео ! 🔥🔥🔥👆👆👆
Для тех, кому было, как мне, лень доставать мак из рюкзака (десять раз уже пожалел в самом деле), открою очевидное:
"start": " somewhat --watch & npm run serve" не сработает не вендах, потому что одиночный амперсанд для винды не повод не дожидаться окончания вашего вотча )
Для таких ленивцев есть полезный (не один такой он) пакетик.
Делай раз в депенденсиз:
"npm-run-all": "^4.1.5"
Делай два в скриптах:
"start": "npm-run-all --parallel json serve",
"json": "json-server --watch db.json",
"serve": "vue-cli-service serve",
Хотя... можно было поставить server --watch в конец?.. Хм...
Есть еще такая штука: www.npmjs.com/package/concurrently
зачем ставить пакет если моно использовать &&
AndreyGovorukhin не везде && прокатит. Не на всех ОС
@@gofrontend2220 на винде норм
Баг: если из списка контактов зайти на контакт, потом перейти в чаты и нащать кнопку Back, то ошибка "contact_data is undefined"
Результат не запускается, проект не понятно как начинать(
last-message можно чуть короче: {{user_data.chat.slice(-1)[0].text}}
А как перенести на телефон?
Все нормально ,только не погружаются из джсон файла данные.путь пробовал и 3000 и 8080 и со слешами, никак, подгружает либ страницу (выводит в мутации страницу, либо ничего)
Да потому что тут бэка нет, который на 3000 порту по запросу отдает инфу. Например на node написаную без него весь фронт бесполезен.
у меня при введении сообщения удаляется пользователь из базы данных.
Как исправить, подскажете ?
заранее спасибо )
классный контент
Suleyman Dzhemilov затираете пользователя. Смотрите что вы шлете в базу при вводе сообщений
Классный канал, но не для новичков в js
Сколько стоит час вашей работы?
YuG_FM я не работаю фриланс
@@gofrontend2220 а какова среднерыночная стоимость часа спеца вашего уровня?
YuG_FM нет ее. Везде все по-разному. Деньги не за знания платят, а за обязанности рабочие. Ну в среднем думаю 1500-2000 час
а как сделать такой же чат для телеграмма?
что это значит?)
Было бы побольше видео :(
Array.filter должен ВЕРНУТЬ булево значение, результатом ее будет искомый объект (первый, для которого коллбек вернул true)
зачем вы учите неокрепшие умы использовать программную навигацию vue-router, когда есть замечательный компонент router-link. vuejs - это html-first, соответственно все, что может быть выражено декларативно (в html), должно быть выражено именно так
я щас скачал проект чтоб посмотреть его и выходит такая ишибка(Failed to load resource: net::ERR_CONNECTION_REFUSED
createError.js?2d83:16 Uncaught (in promise) Error: Network Error
at createError (createError.js?2d83:16)
at XMLHttpRequest.handleError (xhr.js?b50d:83))
и никакие кнопки не работают
как исправить?
Бехруз Абдувалиев npm install делали?
@@gofrontend2220 да конечно
у меня такая же ошибка
json-server запускали ? npx json-server --watch db.json
Не запускается, куча ошибок, а было бы весьма интересно сделать такое приложение, увы :(
так перепиши код)
куча ошибок.. почему весь процесс не показать?
чел, а на чем бэк, ты бы не мог отдать инфу про бэк, а то без него это бесполезни ))
Дима Рапид тут нет бека
@@gofrontend2220 тогда куда стучится axios на порт 3000?
Дима Рапид в локальный фронтовый файл с json
@@gofrontend2220 тк если я его запускаю он мне говорит что 3000 не отвечает(((
@@gofrontend2220 Failed to load resource: net::ERR_CONNECTION_REFUSED :3000/contact