Я бэкенд-разработчик с небольшим опытом работы с фронтендом. Мои навыки JavaScript в лучшем случае базовые. Новое приложение, над которым я работаю, требует отточенного и удобного в сопровождении пользовательского интерфейса, что побудило меня исследовать три лучших фреймворка дня: React, Angular и Vue. Я выбрал Vue, так как кривая обучения казалась наименьшей, и после просмотра пары курсов Pluralsight почувствовал себя достаточно уверенно, чтобы начать. [1]
DevExtreme [2] — это полный набор компонентов JavaScript от DevExpress. Раньше я использовал настольные компоненты DevExpress, и меня всегда впечатлял безупречный и профессиональный внешний вид, а также простота интеграции и обширная библиотека примеров кода. Похоже, что DevExtreme сделан по одной и той же схеме, с образцами кода для каждого компонента во всех трех упомянутых выше фреймворках.
Пример проекта, который я собираюсь рассмотреть, включает новое приложение Vue (2.6), использующее компонент DevExtreme Treelist, извлекающий данные из внутреннего API .Net Core (3.1). Это простое приложение для начала работы без аутентификации, предназначенное для демонстрации возможностей готовых компонентов, таких как DevExtreme, и простоты их включения в ваше приложение Vue и заполнения их из .Net Core API.
1. Создание приложения Vue
Первый шаг — установить NPM и Vue CLI, если они еще не установлены. NPM входит в состав установки Node.js. [3] После установки откройте терминал и выполните следующую команду, чтобы установить Vue CLI:
npm install -g @vue/cliЧтобы создать приложение Vue, мы будем использовать Vue Project Manager. Чтобы запустить Диспетчер проектов, выполните следующую команду из терминала:
vue ui
Vue Project Manager — это простое приложение, предназначенное для создания проектов Vue и управления ими. Он обрабатывает создание и настройку проекта, зависимости и плагины, а также задачи сборки. Я создал свой новый проект в папке «C:\Vue Projects» и назвал его «Сотрудники».
На странице стилей выберите Стили по умолчанию. Мы начнем с базового набора зависимостей и плагинов и добавим их позже по мере необходимости. Нажав Создать проект, вы создадите новый проект в выбранной папке. Это может занять пару минут, так как загружается и устанавливается большое количество зависимостей. После завершения вы увидите панель управления проекта для вашего нового проекта. Мы вернемся к этому позже.
2. Создание и запуск вашего нового приложения Vue
Я использую Visual Studio Code для своих приложений Vue. Как backend-разработчик .Net я больше знаком с Visual Studio, но считаю, что VS Code быстрее и проще для работы с проектами Vue.
Откройте код Visual Studio, выберите «Файл | Открыть папку» и перейдите в папку «Vue Projects\Employees». Новый проект Vue — это простое приложение Hello World, но все основные зависимости уже на месте, а проект правильно настроен и структурирован для одностраничного приложения.
Откройте терминал изнутри VS Code (меню «Терминал» | «Новый терминал») и выполните следующую команду, чтобы установить пакеты NPM в проект:
npm installЕсли команда выдает какие-либо ошибки, убедитесь, что ваш терминал активен в правильной папке: «C:\Vue Projects\employees». Затем создайте и запустите новое приложение:
npm run serveКогда сборка завершится без ошибок, вы должны увидеть локальный и сетевой адрес вашего приложения, в данном случае http://localhost:8080/.
Контрол + щелчок по ссылке откроет приложение, и вы увидите стандартное приложение Vue Hello World. Поздравляем с вашим первым успешным, пусть и ограниченным, приложением Vue.
3. Добавление компонента DevExtreme Treelist
Рабочую демонстрацию компонента DevExtreme Treelist можно найти здесь. Сюда входит пример кода Vue и данные, которые мы будем использовать позже, а пока стоит взглянуть на то, что ваше новое приложение будет отображать вместо страницы Hello World.
Чтобы добавить DevExtreme в свой проект, вернитесь к диспетчеру проектов Vue, который мы открыли ранее, и откройте раздел Зависимости. Нажмите «Установить зависимость» и выполните поиск «devextreme». Из доступного списка выберите и установите один за другим следующие три пакета: devextreme, devextreme-vue и devextreme-themebuilder.
После установки вернитесь на демонстрационную страницу Treelist, упомянутую выше. Теперь мы собираемся скопировать код и данные, чтобы заменить проект Hello World кодом страницы Treelist. Мы возьмем код со страниц App.vue, index.html и data.js.
Сначала скопируйте код Vue из App.vue. Вернитесь к проекту в Visual Studio Code и откройте файл App.vue. В редакторе замените содержимое скопированным содержимым из DevExtreme. Сделайте то же самое для файла index.html. В вашем проекте этот файл находится внутри общей папки. После копирования удалите два блока сценария из нижней части раздела HEAD, которые ссылаются на config.js и index.js.
Затем создайте новый файл с именем data.js в папке src вашего проекта. Скопируйте и вставьте содержимое примера DevExtreme data.js в этот файл.
Откройте новый терминал, создайте и запустите обновленное приложение Vue:
npm run serveТеперь вы должны увидеть демонстрационный контент DevExtreme TreeList вместо приложения Vue Hello World, как показано ниже. Приложение является полностью функциональным, позволяя вам добавлять, редактировать и удалять записи в древовидном списке, используя предопределенный источник данных в файле data.js.
Но что, если мы хотим получить данные из API?
4. Создайте .Net Core API
Следующий шаг — создание простого API-интерфейса с использованием .Net Core 3.1 для возврата данных о сотрудниках. Мы по-прежнему будем использовать предопределенные данные вместо базы данных, но на этот раз эти данные будут доступны только из вашего нового API.
Я использую последнюю версию Visual Studio 2019 для создания API. Выберите «Создать новый проект» и выберите «ASP.NET Core Web Application» из списка доступных шаблонов в диалоговом окне. На следующем экране перейдите в папку «Vue Projects» и назовите проект «EmployeeApi». На экране «Создать» выберите API в качестве типа приложения.
Созданное по умолчанию приложение .Net Core будет содержать некоторые ненужные файлы, поэтому давайте сначала удалим их. Удалите файлы Weatherforcast.cs и WeatherForecastController.cs. Откройте файл launchSettings.json в свойствах и задайте для значений launchUrl пустые строки.
Теперь давайте заполним код, чтобы у нас была конечная точка для вызова и некоторые объекты данных для отправки обратно.
Сначала создайте пустой контроллер API с именем Employee. Затем добавьте к нему новую конечную точку с именем GetEmployees и включите ссылку на интерфейс IWebHostEnvironment, который вам понадобится для доступа к вашему файлу данных.
Затем создайте свой объект Employee. Имена параметров должны точно совпадать с именами в источнике данных data.js, так как ваш DevExtreme Treelist ожидает найти эти значения в любых данных, которые он использует.
Наконец, вам нужно добавить источник данных в ваш проект. В корневой папке проекта создайте файл с именем data.json. Скопируйте содержимое данных списка сотрудников из файла data.js из проекта Vue в новый файл data.json в проекте .Net Core. Это должен быть список Json, а не список JavaScript, что означает копирование только блока кода [ … ].
Как только вы это сделаете, все готово. Создайте и запустите проект EmployeeApi. В моей системе он работает на https://localhost:44303/. Вы можете проверить, все ли работает, запустив запрос Get к вашей новой конечной точке внутри Postman, как показано ниже.
Теперь вы готовы вернуться к проекту Vue и внести необходимые изменения, чтобы получить данные о сотрудниках из API, а не из собственного внутреннего списка статических данных.
5. Приложение Vue.js вызывает .Net Core API
Первое, что вам нужно сделать, это вернуться в Vue Project Manager и установить HTTP-клиент, чтобы вы могли вызывать свой новый API. Как и раньше, нажмите «Установить зависимость», найдите и установите «axios».
Вернувшись в свой проект Vue, откройте файл data.js и удалите статический список сотрудников. Теперь вам нужно добавить вызов к новой конечной точке .Net Core, как показано ниже.
Если ваше приложение Vue все еще работает, древовидный список теперь будет пустым. Это связано с тем, что вы не обновили код App.vue для корректного вызова нового метода доступа к данным. Замените раздел script в нижней части App.vue следующим кодом:
И это все для приложения Vue. Все должно работать правильно. Вы делаете вызов новой конечной точке API, и ваш Treelist должен загружать возвращенные данные.
Но… это не так.
Вероятно, вы видите сообщения об ошибках консоли, относящиеся к CORS и заголовку Access-Control-Allow-Origin. Это относится к межсайтовому скриптингу. Ваше приложение Vue и ваш API используют разные порты, что считается уязвимостью системы безопасности. Вы можете исправить это, внеся некоторые изменения в API. Спасибо за это Скотту Стокеру.
Откройте файл startup.cs в проекте EmployeeApi. В методе ConfigureServices добавьте следующую строку: services.AddCors();
В методе Configure добавьте вызов app.UseCors, как показано ниже:
Перезапустите API и обновите страницу Treelist в приложении Vue.
Вы по-прежнему не видите данных, но на этот раз ошибок консоли нет. Вместо этого вы можете увидеть сообщение об ошибке DevExtreme, в котором говорится: «Ключевое поле «ID» не найдено в объектах данных». «Решение этой проблемы можно быстро найти, выполнив вызов API непосредственно из Postman как мы сделали ранее, и глядя на результаты. Вы должны увидеть, что все имена переменных были изменены на верблюжий регистр. Имена переменных DevExtreme чувствительны к регистру — поле «id» не распознается как «ID».
Это можно исправить, внеся дополнительные и окончательные изменения в файл startup.cs в .Net Core API. В ConfigureServices измените вызов на AddControllers(), как показано ниже:
Спасибо Рону Ребеннаку из Stack Overflow за это. Вернитесь в свой проект Vue, обновите страницу, и теперь данные будут загружаться без каких-либо ошибок консоли или других ошибок.
Если вы такой же новичок в разработке внешнего интерфейса, как и я, вы, вероятно, согласитесь, что есть много движущихся частей в создании даже такого базового приложения Vue, как эта работа и подключение к серверной части .Net Core. Добавление стороннего набора компонентов, такого как DevExtreme, только добавляет к этому, как и изменения, которые, кажется, происходят с каждым вторым выпуском .Net Core.
И это все, даже не взглянув на аутентификацию и управление пользователями, которые должны быть в каждом приложении, не говоря уже о маршрутизации и управлении состоянием, которые требуются даже для одностраничного приложения среднего размера. Веселье и игры на следующую неделю.
[1] Vue.js: общая картина, Дэниел Стерн. Vue: Начало работы, Джон Папа
[2] Набор компонентов JavaScript DevExtreme.
[3] Установка Node.js.
Чтобы узнать больше обо мне, вы можете подписаться на меня в Twitter или LinkedIn.
Первоначально опубликовано на http://darrendevitt.com 11 апреля 2020 г.
