Эта статья предназначена для разработчиков .NET, которые, возможно, в настоящее время работают с ASP.NET MVC и хотят изучить одну из трех больших сред javascript — React, Angular или Vue, используя свои существующие навыки работы с .NET.
Статья проведет вас через следующее:
- Создайте новое приложение Asp Net Core с помощью Vue.js.
- Загрузите данные из контроллера в ваше приложение Vue.js.
Есть несколько обязательных условий, а именно:
- VSCode установлен
- NPM установлен — установить здесь.
Об остальном позаботятся ниже.
Создайте новое приложение Asp Net Core с Vue.js
Во-первых, давайте начнем с открытия VSCode и создания нового приложения Asp Net Core с Vue.js с использованием шаблона vuejs.
Откройте терминал VSCode и создайте каталог, в который вы хотите поместить свой новый проект, затем перейдите в этот каталог и выполните следующую команду:
mkdir mynewproject cd mynewproject dotnet new vuejs
После этого вам нужно будет установить команду CODE в каталог вашего проекта, вы можете сделать это, перейдя в панель команд VSCode (Cmd + Shift + P на Mac) и введите «Код», затем нажмите «Команда оболочки: установить команду кода в ДОРОЖКА'.
После того, как вы установили команду кода, вы можете вернуться в свой терминал VSCode и запустить:
code .
Если ваш VSCode попросит вас добавить какие-либо необходимые отсутствующие активы, нажмите «Да».
Далее нам нужно установить зависимости, указанные в файле package.json.
Для этого выполните следующую команду npm:
npm install
После выполнения этой команды мы готовы запустить наш проект. Для этого выполните следующую команду npm:
npm run dev
Эта команда указывает npm запустить команду dev, указанную в нашем файле package.json. Давайте посмотрим, что делает эта команда.
cross-env
— это библиотека npm, которая делает вашу команду npm независимой от платформы при установке переменных среды.
ASPNETCORE_ENVIRONMENT=Development
просто устанавливает среду aspnet, позволяя ссылаться на нее в коде C#, подробнее см. здесь.
NODE_ENV=development
подобно переменной среды asp net, это ваш эквивалент javascript, вы можете ссылаться на него в коде .js, используя process.env.NODE_ENV.
dotnet run
эквивалентно нажатию F5 в Visual Studio, при этом будет запущена команда dotnet build перед запуском кода.
Теперь посетите https://localhost:5001, чтобы просмотреть ваше новое приложение asp net core vue.js.
Загрузите данные из контроллера в ваше приложение Vue.js.
Добавьте новую конечную точку в свой HomeController.cs со следующим кодом.
[HttpGet] public IEnumerable<string> Hobbits() { return new List<string> { "Frodo", "Sam", "Merry", "Pippin" }; }
Чтобы наше приложение восприняло этот новый код, вам нужно остановить приложение и повторно запустить команду dotnet run.
В терминале VSCode нажмите Ctrl+C, чтобы остановить приложение, а затем снова запустите его.
dotnet run
Теперь вы сможете посетить https://localhost:5001/home/hobbits и увидеть возвращенный список хоббитов.
Теперь давайте отобразим этот список. Перейдите в ClientApp -> компоненты -> home-page.vue и введите следующий код.
Выше наш отредактированный компонент home-page.vue. Есть несколько замечаний.
Сначала мы добавили немного HTML для отображения наших хоббитов.
<ul> <li v-for="hobbit in hobbits" :key="hobbit">{{ hobbit }}</li> </ul>
v-for
— это директива Vue для рендеринга списков объектов. Вы можете прочитать больше здесь". Это отобразит <li>
элементов для каждого хоббита в нашем списке.
:key
в идеале должен быть уникальным. Он используется Vue для оптимизации изменений в списке.
{{ hobbit }}
используется для печати хоббита в виде текста. Если бы наш список хоббитов имел свойства, мы могли бы использовать {{ hobbit.name }}
или {{ hobbit.isRingBearer }}
.
Следующим фрагментом кода, на который следует обратить внимание, является импорт вспомогательной библиотеки, а именно axios. Это HTTP-клиент для браузера. Вы можете прочитать больше здесь".
import axios from 'axios'
Ранее мы рассмотрели код для отображения наших хоббитов. Чтобы отобразить этот список, нам нужно где-то их хранить.
data () { return { hobbits: [] } },
Это сообщает Vue, что мы хотим сохранить свойство с именем «hobbits» в нашем компоненте и что оно будет инициализировано как пустой массив.
Последний фрагмент кода отвечает за загрузку наших хоббитов с сервера.
mounted() { axios.get('/home/hobbits') .then((response) => { this.hobbits = response.data; }) }
mounted()
— это крюк жизненного цикла Vue, он будет запущен, когда компонент будет смонтирован, после того, как будет сгенерирован HTML для элемента.
Затем Axios используется для загрузки данных о наших хоббитах из нашей новой конечной точки, после чего для свойства this.hobbits
устанавливается значение response.data
(наш список хоббитов). Следует отметить, что ключевое слово this относится к экземпляру компонента Vue.
С этого момента механизм реактивности Vue позаботится обо всем остальном и отобразит наш список хоббитов.
Если у вас возникнут какие-либо проблемы, оставьте комментарий ниже, и я сделаю все возможное, чтобы ответить.