Недавно я мог свободно изучать соответствующие знания vue.js. Я твердо верю, что если вы хотите быстро учиться, вам нужно построить колесо. Здесь я представлю колесо, которое я недавно построил.
адрес проекта:calebman/vue-DBMЭтот проект использует большое количество компонентов iview и использует связанные компоненты element-ui для реализации функций, которые iview не может реализовать (например, пользовательские деревья).Демонстрация эффекта
Обзор
Причина в том, что один из отделов аэропорта XX однажды сказал мне, что их модель управления данными очень отсталая, и все они используют документы Excel, которые нужно отправлять раз в месяц для управления данными, а это значит, что у них будет много Документы Excel, когда они хотят проконсультироваться.Одним данным приходится продолжать искать файлы.Для этой проблемы мне интересно, можно ли импортировать Excel, а затем создать таблицу в Mysql для импорта данных и предоставить некоторые пользовательские элементы фильтрации и добавить разрешение управления для решения проблемы управления этими данными, DBM основан на реализации этой идеи
стек технологий
vue2 + vuex + vue-router + vue-resource + iview
список функций
управление полномочиями
Использование DBM создаст три элемента разрешений для просмотра, редактирования (включая добавление) и удаления соответствующей таблицы после успешного импорта каждой таблицы.На странице управления ролями для указанной роли предоставляется определенное разрешение, и существует более десяти системных разрешения, которые не разрешены Полномочия на изменение есть только у администратора самого высокого уровня.
Манипуляции с формами
Используя DBM, вы можете настроить таблицу в соответствии с вашими потребностями и создать виртуальный каталог для управления созданной таблицей.DBM предоставляет пять типов данных: текст, число, время, параметр и изображение, а также предоставляет следующие условия фильтрации соответственно.
- Текст предоставляет четыре фильтра для равенства, не равно, содержит и не содержит
- Числовой текст предоставляет три фильтра для больше, меньше и равно.
- Время предоставляет три фильтра: период времени, до даты и после даты.
- Возможность включить этот фильтр
- На картинке предусмотрено два фильтра: пустой и непустой
манипуляция данными
После входа в указанную таблицу вы можете выполнять некоторые основные операции, такие как пользовательская фильтрация данных, импорт и экспорт, а также использовать фоновое разбиение по страницам и анализ файлов Excel.
соглашение об интерфейсе
DBM разрабатывается в полностью разделенном режиме фронтенда и бэкенда, фронтенд использует файлы json для имитации данных ответов бизнес-запросов, а бэкенд строит данные согласно спецификации json-файла, поэтому спецификация данных интерфейса может ссылаться на файл json в статической папке, например /login. Шаблон данных ответа запроса — это файл login.json в статической папке. При написании этой статьи я увиделСистема управления интерфейсом Lilac Garden с открытым исходным кодом, я думаю, что это довольно интересно, это может сделать соединение между передним и задним концами более удобным, поэтому я назову его здесь.
Спасибо
В этом проекте используется множество проектов с открытым исходным кодом, таких как vue-resource и ivew, и я хотел бы поблагодарить их за их вклад в сообщество открытого исходного кода.