Простая CRM на Nuxt.js

17 часов записей прямых трансляций, которые я делал с 10 июня по 12 июля про создание простой CRM на основе Nuxt.js. Советую смотреть на скорости 2х. Контент может быть полезен начинающим программистам, которым интересны: Nuxt, Vue, MongoDB, Express, Mongoose.

Важно! Относитесь к информации с большой долей скептицизма и всё перепроверяйте. Это всего лишь мой опыт, а не уроки или инструкция по созданию приложения.

Плейлист из 10 серий трансляций: https://www.youtube.com/playlist?list=PLOICX-WjKEZdYjMaIt_7qte5u_g4FOuKp

 

№1 Планирование функциональности и установка Nuxt.js

00:00 Введение
01:37 Полный список функциональности будущей CRM
03:15 Пользователь
04:13 Напоминания для пользователей
05:58 Ночной разлогин)
07:05 Клиент
08:55 Статусы, отрасли, регионы, услуги
10:31 Даты внесения и следующего контакта
11:43 Контактные лица, комментарий и прочие поля клиентов
13:41 Страница Настройки
14:30 Ограничения прав
16:07 Возможности администраторов
16:53 Основной экран программы
22:23 Статистика с графиками
23:31 Лог (запись действий пользователей)
26:47 Структура приложения
28:20 Отличия CRM от обычного сайта
30:07 Буду пробовать SCSS
34:22 Мои впечатления о первом сезоне трансляций про создание сайта на Nuxt.js
37:08 Я не программист, проверяйте всё, что я говорю
37:53 Оказывается мои старые трансляции репостили
39:45 Установка Nuxt.js
45:25 Отличия режима SPA от Universal(SSR)
47:15 Nuxt.config.js
50:00 Обратная связь - это важно!

 

№2 Авторизация, менеджеры, SCSS

00:00 Введение
02:15 Вход в программу по логину и паролю с ошибкой о неправильных данных
03:35 Отличия в авторизации на сайте и CRM
05:15 Что сохраняем в момент авторизации на сайте
08:44 bcrypt - шифрование(хеширование) паролей
11:30 Процесс авторизации пользователя
15:40 Расшифровка токена на бэкенде
18:50 Создаю нового пользователя с правами менеджера
20:47 Скрытие смены прав пользователей без прав администратора
22:47 Как можно было обойти смену прав через Postman (не совсем получилось показать)
32:18 Скрытие элементов меню от пользователей без прав администратора
36:04 Смена пароля пользователей для администраторов
41:07 Запрет смены прав пользователей без прав администратора
50:48 Удаление пользователей
52:20 Попробовал SCSS
58:45 Запрет для получения списка всех менеджеров не для администраторов
01:02:22 Добавление свободного текстового поля для менеджеров TinyMCE
01:09:24 Убираю захешированный пароль из ответа сервера при обновлении данных пользователя (спасибо TheLetslook)
01:21:17 Загрузка картинок внутри TinyMCE (ответ на вопрос Web VPF)
01:30:00 Конец

 

№3 Внесение клиентов и настройка списков

00:00 Подписывайтесь на канал - это важно!
02:36 Менеджеры могут заходить только в свой профиль, администраторы могут заходить в любые
08:37 Настройка списков статусов, отраслей, регионов и услуг
13:16 Корректная работа связки label и input
17:01 Модель Клиент
17:45 Получение списка менеджеров и выделение текущего
20:59 Немного переделал авторизацию
21:43 Продолжение про модель Клиент
28:30 Отправка данных в базу при внесении Клиента на сайте
39:30 Установка плагина для браузера Vue-devtools
45:22 Приём данных Клиента на бэкенде
50:23 Какие данные Клиента в итоге получились
51:58 Создание страницы и маршрута для получения информации об одном клиенте
58:55 Проблема с форматом даты и времени следующего контакта (решил после стрима)
01:19:00 Проблема с отображением менеджера в multiselect (решил после стрима)

 

№4 Комментарии и ограничение прав

00:00 Начало
01:10 Вывод клиентов внутри таблицы
03:37 Звонит перекуп по авто
06:01 Менеджер может заходить только в своих клиентов
07:48 Логаут по 403 ответу сервера
10:03 Комментарии у менеджеров - теория
17:30 Реализация отправки комментариев у менеджеров (АД)
02:18:40 Решил проблему с файлом (нужен не req.body.file, а req.file)
02:26:10 Вывод данных клиента через id и populate

 

№5 Контактные лица клиентов

00:00 Начало
02:10 Доработка панели администратора
02:46 Сами комментарии обновились
05:30 Вынес добавление комментариев и панель администратора в компоненты
11:10 Удаление комментариев у менеджеров
17:35 Добавление комментариев у менеджеров
23:53 $emit - передача данных из компонента на страницу
27:10 Компонент Панель администратора
34:40 Удаление менеджера у действующего клиента
37:34 Из чего состоят контактные лица у клиентов
40:56 Создание функциональности контактных лиц
45:50 Почему нужно всё перепроверять и чем я занимаюсь
55:45 Возвращаюсь к контактным лицам
01:00:17 Создание компонента Добавление контактных лиц
01:39:16 Передача данных из компонента на страницу через $emit
01:41:57 Удаление контактных лиц

 

№6 Лог

00:00 Начало
01:40 Изменения в таблице клиентов
07:00 Звонок из Ростелекома
08:00 v-bind выделение цветом по условию
09:45 Поиск по клиентам и контактным лицам
17:55 Как localhost с nuxt'ом перевести на https
22:45 Модель Лог
29:20 Выбор периода для записей лога
32:30 Динамическое изменение количества записей
01:00:30 Корректировка пагинации
01:05:25 Фильтрация вывода лога (только входы в программу)
01:38:30 Корректировка даты на бэкенде +1 день
01:51:40 Итог

 

№7 Мобильная версия

00:00 Введение
05:11 Доработал лог
06:00 Получение уникальных пользователей через distinct
07:30 Отключение кнопки :disabled по условию
09:00 Что будет дальше
11:00 Создание недостающих страниц в меню
20:20 Планирование мобильных версий (горизонтальная и вертикальная)
31:30 Вёрстка горизонтальной версии до 1080px
01:13:00 Вёрстка вертикальной версии до 730px

 

№8 Vue-chartjs - знакомство с графиками

00:00 Введение
01:20 Про то, как я защемил нерв под лопаткой
05:25 Установка vue-chartjs
18:45 Добавляю первый график
30:35 Прикрепление нескольких услуг к Клиенту
32:40 Событие у Клиентов: сортировка
37:25 Редактирование событий, контактных лиц (субдокументов)
56:45 Фильтры в таблице клиентов
01:02:32 Попытки использовать во vue-chartjs данные из бэкенда
01:40:00 Получилось использовать динамические данные для графика

 

№9 Графики chart.js + финальные правки

00:00 Введение
01:40 Презентовал программу клиенту, перенес на VDS
03:00 Какие графики получились
05:50 Код страницы статистика
08:28 Опции графиков chart.js
10:30 Каждый график - это компонент
12:40 Загрузка динамических данных для графиков
15:50 Формирование данных для графиков на бэкенде
24:40 Model.aggregate: match, group, sort
29:50 Unwind - разбиваем массив на строки
33:15 Как работают фильтры в графиках
35:55 График с разбивкой по месяцам
49:08 Vue-chart.js (и обычный chart.js) подтягивают moment
56:50 Проблема с дублями клиентов в старой версии CRM
57:40 Mongoose unique validator
01:00:00 Валидация по регулярному выражению в vee-validate
01:02:38 Перенос данных из старой версии CRM
01:10:10 Как переносил проект на VDS (копировал всё кроме, .nuxt, dist, node_modules)
01:15:30 Что будет дальше

 

№10 Финальный обзор проекта

00:00 Введение
01:47 Попробовал SCSS
02:14 Компоненты графиков
02:31 Компонент добавления контактных лиц у клиентов
05:00 Vue-the-mask - маска для поля номера телефона
07:35 Компонент добавления событий у клиентов
09:02 Компонент поиска клиентов
18:00 Компонент header - шапка сайта
19:55 Компонент панель администратора у менеджера
23:00 Компонент добавления комментариев у менеджеров
25:31 Шаблон layout
26:11 Страница login
27:30 Авторизация nuxt-auth
31:50 Основная страница программы - таблица с клиентами
39:52 Текущие и отказные клиенты
41:18 Статистика - графики vue-chartjs
42:28 Лог
46:40 Настройки (списки статусов, услуг, отраслей, регионов)
48:20 Страница со списком менеджеров
48:46 Страница одного менеджера
50:02 Страница создания нового менеджера
50:35 Страница создания нового клиента
51:45 Бэкенд
52:40 Модель Клиент
56:42 Модель Лог
57:28 Модель Менеджер
58:40 Модель Настройки
59:00 Маршруты Клиента
01:11:50 Формирование данных для графиков
01:18:00 Продолжение про маршруты Клиента
01:22:40 Маршруты Лога
01:28:07 Маршруты Менеджера
01:30:15 Маршруты Настроек
01:30:50 Плагин vee-validate3
01:31:01 Папка Static (про иконки Nuxt PWA)
01:32:00 .env
01:32:30 Настройки prettier
01:34:32 Nuxt.config.js
01:38:32 Package.json
01:42:10 Следующий проект опен сорс - free-audit.ru

Автор: Александр Дергунов
Дата публикации:
Поделиться: