Создание веб приложения в visual studio 2017 с нуля
✓ Выберите шаблон “MVC“ и нажмите кнопку “ОК“
Этап 2. Внесение изменений
✓ Добавьте в проект новую HTML-страницу
На странице приветствия проекта имеются ссылки на справочные сведения. Если сразу же запустить этот проект, данная страница будет страницей по умолчанию на веб-сайте, благодаря чему вы можете более подробно ознакомиться с порядком ее создания. В нашем случае мы добавим в проект простую страницу.
- В обозревателе решений щелкните правой кнопкой мыши проект “Hello World” > разверните пункт меню “Добавить” > выберите “HTML-страница”, а затем введите “HelloWorld” в качестве названия страницы.
✓ Внесите изменения на новую страницу
- Новая страница должна по умолчанию открыться в редакторе. Если этого не произошло, найдите ее в обозревателе решений (в правом верхнем углу окна), а затем дважды щелкните ее (если щелкнуть страницу один раз, она на некоторое время отобразится в окне редактора для предварительного просмотра).
- На этой новой странице нам необходимо обновить заголовок, добавить пару строк основного текста и нижний колонтитул. При желании можно добавить меньше элементов.
Этап 3. Сборка и запуск
Теперь приступим к сборке проекта, чтобы проверить работоспособность кода.
✓ Выберите кнопку “Пуск“
- На кнопке “Пуск” имеется раскрывающийся список, в котором можно выбрать браузер, который будет по умолчанию использоваться для открытия веб-сайта (в список также можно добавить другие браузеры).
✓ Все работает!
После нажатия кнопки “Пуск” (зеленая стрелка рядом с названием браузера) запустится браузер, в котором отобразится ваш сайт.
- Следует помнить, что после закрытия окна браузера веб-сайт продолжает работать. Чтобы вернуться в режим правки, нажмите кнопку с красным квадратом, чтобы завершить сеанс отладки. В окне сведений о производительности справа будет указано, что сайт по-прежнему работает.
Поздравляем! Теперь вы знаете, как проверить работоспособность страницы и работать с ней локально. Обратитесь к подсказкам и ссылкам на странице по умолчанию, чтобы узнать о том, как создавать более сложные приложения, добавлять службы и развертывать их в Azure.
Если вы готовы познакомиться с другими функциями отладки, обратитесь к следующей статье. Отладка и многое другое.
- проще для выполнения;
- охватывает дополнительные возможности;
- Является предпочтительным подходом для разработки новых приложений.
Начало работы
начните с установки Visual Studio 2017. Затем откройте Visual Studio.
Visual Studio является интегрированной средой разработки или IDE. как и при использовании Microsoft Word для написания документов, для создания приложений используется интегрированная среда разработки. в Visual Studio есть список, в нижней части которого показаны различные доступные параметры. Также есть меню, предоставляющее еще один способ выполнения задач в интегрированной среде разработки. например, вместо выбора нового Project на начальной страницеможно использовать строку меню и выбрать файл>создать Project.
Создание первого приложения
Visual Studio использовал шаблон по умолчанию для только что созданного проекта MVC ASP.NET, поэтому у вас есть рабочее приложение, не делая ничего. это простой проект "Hello World!", который лучше всего подходит для запуска приложения.
По умолчанию в этом шаблоне содержатся Home страницы, Contact и About . На рисунке ниже не показаны ссылки Домашняя страница, сведения о программеи контакт . В зависимости от размера окна браузера может потребоваться щелкнуть значок навигации, чтобы просмотреть эти ссылки.
Список текущих руководств см. в статье рекомендации по MVC.
См. приложение, работающее в Azure
Вы хотите увидеть готовый сайт, работающий как активное веб-приложение? Вы можете развернуть полную версию приложения в учетной записи Azure, просто нажав кнопку ниже.
Для развертывания этого решения в Azure необходима учетная запись Azure. Если у вас еще нет учетной записи, используйте один из следующих параметров, чтобы создать его.
Вступление
Целевая аудитория
У вас должны быть знания в следующих областях:
- Объектно-ориентированное программирование (ООП) и языки
- Веб-разработка (HTML, CSS, JavaScript)
- реляционные базы данных
- N-уровневая архитектура
Для просмотра этих областей рассмотрите следующее содержимое:
Функции приложения
Сценарии и задачи приложений
Задачи серии руководств включают:
Общие сведения
НачальнаяЗагрузка, макет, создание и реагирование инфраструктуры разработки.
Обновление Entity Framework позволяющее выполнять следующие задачи:
- Получение данных и работа с ними в виде строго типизированных объектов
- Асинхронный доступ к данным
- Обработку временных ошибок подключения
- инструкции SQL Log
Пример приложения Wingtip Toys
Вы можете зарегистрироваться как новый пользователь или войти как существующий пользователь. Верхняя навигация содержит ссылки на категории продуктов и их продукты из базы данных.
Если выбрано значение продукты, отображаются все доступные продукты.
При выборе конкретного продукта отображаются сведения о продукте.
как пользователь, вы можете зарегистрироваться и войти в систему, используя функциональные возможности шаблона по умолчанию веб-формы. В этом учебнике также объясняется, как выполнить вход с использованием существующей учетной записи Gmail. Кроме того, вы можете войти в систему от имени администратора, чтобы добавлять продукты в базу данных и удалять их из нее.
Войдя в систему как пользователь, вы можете добавить продукты в корзину для покупок и извлечь их с помощью PayPal. пример приложения предназначен для работы в песочнице разработчика PayPal. Фактическая транзакция Money не выполняется.
PayPal подтверждает сведения об учетной записи, заказе и оплате.
после возврата из PayPal можно проверить и выполнить заказ.
Предварительные требования
Прежде чем начать, убедитесь, что на компьютере установлено следующее программное обеспечение:
в этой серии руководств используется Microsoft Visual Studio Community 2017. для выполнения этой серии руководств можно использовать либо Microsoft Visual Studio 2017.
Обратите внимание на следующие сведения о Visual Studio.
Microsoft Visual Studio 2017 и Microsoft Visual Studio Community 2017 в рамках этой серии руководств называются Visual Studio .
Visual Studio 2017 устанавливается рядом с уже установленными предыдущими версиями. сайты, созданные в более ранних версиях, можно открыть в Visual Studio 2017 и продолжить открытие в предыдущих версиях.
при первом запуске Visual Studio предполагается, что выбраны параметры веб-разработки . дополнительные сведения см. в разделе как выбрать среду веб-разработки Параметры.
После установки необходимых компонентов можно приступить к созданию веб-проекта, представленного в этой серии руководств.
Загрузка примера приложения
Готовый пример приложения можно загрузить в любое время с веб-сайта MSDN Samples:
Этот загружаемый файл содержит следующие элементы:
- Пример приложения в папке WingtipToys
- Ресурсы, используемые для создания примера приложения в папке WingtipToys-Assets в папке WingtipToys .
C:\Users\ \саурце\репос
Чтобы запустить завершенный проект, откройте папку WingtipToys и дважды щелкните файл WingtipToys. sln . Visual Studio 2017 открывает проект. затем щелкните правой кнопкой мыши файл Default. aspx в Обозреватель решений и выберите просмотреть в браузере.
После завершения серии руководств пройдите викторину, чтобы протестировать свои знания и получить основные понятия. Каждый вопрос содержит пояснения и ссылки на дополнительные рекомендации.
Поддержка и комментарии в учебнике
Мотивация
-
— Нужен для установки различных библиотек в JavaScript, требуется повсеместно. — Нужен если JavaScript и другой контент нужно упаковывать, минифицировать, использовать Less вместо ванильного CSS, шаблонизаторы HTML, использовать транспиляторы JavaScript и тому подобное. — Его можно использовать как транспайлер из новых версий JavaScript в старые. Также можно использовать сам язык TypeScript. Два в одном получается, плюс грех не использовать так как в Visual Studio сделана неплохая его поддержка.
Умея быстро создать такое приложение дальше уже можно смело изучать любые веб-технологии (включая сам npm, Webpack и TypeScript), при этом сервер будет на родном дотнете.
Стандартный компилятор TypeScript в данном туториале отключается, и используется тот, который является модулем для npm.
Подготовка
Что понадобится скачать и установить для начала работы
Создание проекта
Теперь у нас есть стартовый проект, он должен компилироваться и запускаться.
В случае, если используется git, то сразу добавляем .gitignore файл в папку с solution-ом (Там же инициализируем git репозиторий). Файл .gitignore для solution-ов в Visual Studio можно взять отсюда.
Упрощаем типовой проект
Далее изменим проект так, чтобы он получился максимально простым.
Сделаем из него Hello World.
Удаляем следующие файлы
- bower.json (и вложенный в него .bowerrc), bundleconfig.json
- Все содержимое папки wwwroot. Можно оставить favicon.ico.
- Папка Views — удаляем все внутренности, кроме Views/Home/Index.cshtml
В файле Controllers/HomeController.cs в классе HomeController
заменяем внутренности на следующий код
По сути тут убирается все кроме методов Index() и Error() , при этом Error() теперь возвращает строку "Error" вместо вьюшки (так как мы ранее удалили файл с этой вьюшкой).
Последний штрих — заменяем содержимое файла Views/Home/Index.cshtml на следующее
Все, теперь у нас есть базовый максимально упрощенный проект. Его можно скомпилировать и запустить, на странице будет отображаться текст "Hello world"
Добавляем npm
Добавляем в проект файл package.json
Вместо "yourappname" вписываем название проекта маленькими буквами.
npm при своей работе может писать в лог с названием npm-debug.log. Стоит исключить его из проекта, чтобы не мешал. Это можно сделать либо вызвав в студии на нем контекстное меню и выбрав Exclude From Project. Либо, в случае если он еще не создан (Скорее всего, так оно и есть), можно отредактировать файл проекта .csproj, добавив в корневой тег следующее
Все, теперь у нас есть поддержка npm, в зависимостях проекта студия теперь показывает узел "npm".
Если построить проект (А так же при открытии проекта, изменении файла package.json и т.д) начнется процесс восстановления зависимостей npm, в случае если они указаны (Сейчас их нет). Зависимости скачиваются в папку node_modules в папке проекта (Студия не воспринимает эту папку как часть проекта).
Добавляем Webpack
Webpack является зависимостью npm, по этому его нужно добавить в package.json как зависимость. Так как он не будет использоваться в клиентском JavaScript коде, он объявляется как dev dependency. Для нас это значит что он будет работать как дополнительный инструмент компиляции для Visual Studio, ни на сервере, ни на клиенте его не будет, на клиенте же будет тот контент (включая JavaScript код), который Webpack сгенерирует.
Кроме самого Webpack-а понадобятся также две вещи, облегчающие работу (Тем не менее они не обязательны)
Сначала скачаем и установим расширение для Visual Studio, его можно найти по названию "NPM Task Runner", либо скачать по этой ссылке.
Теперь добавим в package.json следующие строки (добавляем внутрь корневых фигурных скобок)
В "devDependencies" мы указали сам Webpack и плагин для очистки того, что он генерирует.
В "scripts" мы указали скрипт с названием "webpack-script" , который будет запускать Webpack (В этот момент он будет генерировать контент, транспилировать код и тд). Расширение Visual Studio, которое мы установили ранее делает так, что этот скрипт будет виден студии как задача, которую можно выполнить, таким образом мы можем запланировать эту задачу на выполнение при построении приложения.
В "-vs-binding" мы указали, что Visual Studio должна вызывать задачу "webpack-script" (Которую студия теперь видит, благодаря установленному расширению) каждый раз перед построением проекта.
Теперь нужно настроить сам Webpack. Он настраивается в с помощью JavaScript скрипта webpack.config.js, который будет выполняться через node.js в момент вызова задачи webpack-script . Добавим файл webpack.config.js в проект и заполним его содержимое следующим кодом
Тут мы настроили входной и выходной пути к JavaScript файлам, а также прописали ранее добавленный плагин для очистки выходной папки.
Со стороны клиента выходной файл будет находится по адресу ~/bundle/script.js, где ~ это адрес сайта, на котором работает веб-приложение.
Изменим файл Views/Home/Index.cshtml так, чтобы он включал выходной файл, и, чтобы скрипт мог менять текст на странице (по id элемента "helloworld").
Для этого заменим внутренности тега на следующее
В случае, если используется git, также следует исключить генерируемые Webpack-ом файлы. Для этого создадим еще один файл .gitignore, но теперь уже в папке проекта (Не путать с папкой solution-а)
Студия при этом будет показывать .gitignore файл в проекте, чтобы этого не происходило, в в файле проекта .csproj надо добавить следующие строки внутри корневого тега (Ну или через контекстное меню по файлу -> Exclude From Project)
Все, теперь проект полностью настроен под использование npm и Webpack. Если скомпилировать и запустить приложение, на странице должен отобразиться текст "Hello world from script"
На этом этапе уже можно устанавливать JavaScript библиотеки, объявляя их в разделе "dependencies" в package.json и использовать их в Scripts/main.js, подключая эти библиотеки как модули через функцию require("название библиотеки") . Например, если установить таким образом библиотеку "jquery", то файл Scripts/main.js можно переписать следующим образом (Примечание: это просто пример, для продолжения не обязательно ни устанавливать jquery, ни изменять main.js)
Добавляем TypeScript
Прежде всего, нужно отключить стандартную транспиляцию TypeScript. Для этого нужно в файле проекта .csproj добавить следующие строки внутри корневого тега
Далее, нужно добавить TypeScript как dev dependency для npm. Для этого в файл package.json в разделе "devDependencies" добавляем следующее
Теперь нужно создать файл конфигурации для компилятора TypeScript. Создаем файл tsconfig.json следующего содержания
Описание некоторых указанных в этом файле значений
- "allowJs": true — разрешаем транспиляцию из JavaScript в JavaScript (Из новой версии языка в старую. Расширение файлов .js)
- "target": "es5" — выходная версия JavaScript, в которую будет транспилиться TypeScript и входной JavaScrpt
- "module": "es2015" — синтакс для работы с модулями
- "moduleResolution": "node" — стратегия разрешения модулей — такая же как в node.js
- "sourceMap": true — включаем генерацию данных для отладки TypeScript
- "include": [ "./Scripts/*" ] — указываем, откуда брать исходники .ts и .js, которые надо транспилировать в выходной JavaScript
Далее нужно подружить TypeScript с Webpack-ом. Для этого заменяем файл скрипта для настройки конфигурации Webpack-а webpack.config.js на следующий (По сути мы меняем некоторые места, но чтобы не писать все изменения, выкладываю полный файл)
Тут мы поменяли расширение входного скрипта с .js на .ts, указали, что входной скрипт нужно пропускать через загрузчик TypeScript ( loader: "ts-loader" ) и сделали некоторые другие вещи.
И последний шаг — переименовываем файл входного скрипта с Scripts/main.js на Scripts/main.ts, внутренности можно оставить прежними.
Так же теперь доступна отладка TypeScript из Visual Studio, можно во входном .ts файле поставить точку останова, запустить проект в режиме отладки (Запускать при этом надо в браузерах chrome либо internet explorer, иначе отладка работать не будет, также в chrome у меня оно работает только когда я после загрузки страницы явно нажимаю refresh страницы, видимо отладчик к chrome подсоединяется не сразу). При этом обратите внимание что точки останова ставятся во входных файлах, но реално код работает выходной (В выходном коде в виде комментария webpack записывает информацию нужную для маппинга с выходного на входные файлы).
Можно создавать и другие входные файлы в папке Scripts, в виде .ts или .js и те и другие будут полностью поддерживать новый стандарт EcmaScript (Выходной файл же будет es5 стандарта). Для подключения дополнительных входных файлов нужно оформить их в виде модулей и подключать в main.ts через оператор import либо функцию require() .
Еще небольшое замечание — выходные файлы (те, что в папке wwwroot/bundle/) лучше не исключать из проекта через .csproj файл, так как если студия их не видит, отладка входных файлов работать перестает.
Введение
Описание
В этой статьей будем создавать следующий API:
API | Описание | Тело запроса | Тело ответа |
GET /api/todo | Получить все элементы списка дел | Нет | Массив элементов списка дел |
GET /api/todo/ | Получить элемент по идентификатору | Нет | Элемент списка дел |
POST /api/todo | Добавить новый элемент | Элемент списка дел | Элемент списка дел |
PUT /api/todo/ | Обновить существующий элемент | Элемент списка дел | Нет |
PATCH /api/todo/ | Обновить существующий элемент | Элемент списка дел | Нет |
DELETE /api/todo/ | Удалить элемент | Нет | Нет |
На диаграмме ниже показана архитектура приложения:
Создание проекта
Добавление класса модели
Модель — это объект, который представляет данные в нашем приложении. В данном случае единственная модель — это элемент списка дел.
Добавьте каталог с именем «Models». В обозревателе решений нажмите правую кнопку мыши на проекте. Выберите пункт Add > New Folder. Ведите имя каталога Models.
Примечание: классы модели могут находиться в любом месте проекта, но обычно их размещают в каталоге Models.
Добавьте класс TodoItem . Нажмите правую кнопку мыши на каталоге Models и выберите пункт Add > Class. Ведите имя класса TodoItem и нажмите Add.
Замените сформированный код следующим:
Добавление класса репозитория
Репозиторий — это объект, который инкапсулирует уровень данных и содержит логику для извлечения данных и направлениях их к модели. Хотя в данном приложении не используется база данных, имеет смысл показать, как можно внедрять репозитории в контроллеры. Создайте код репозитория в каталоге Models.
Начните с определения интерфейса репозитория с названием ITodoRepository . Используйте шаблон класса (Add New Item > Class).
Этот интерфейс определяет основные операции CRUD.
Затем добавьте класс TodoRepository , который реализует ITodoRepository :
Постройте приложение, чтобы убедиться, что компилятор не выдает ошибок.
Такой подход упрощает модульное тестирование контроллеров. Модульные тесты внедряют «фиктивную» или «имитационную» версию ITodoRepository . В этом случае тест нацелен на логику контроллера, а не на уровень доступа к данным.
Для внедрения репозитория в контроллер необходимо зарегистрировать его при помощи контейнеров DI. Откройте файл Startup.cs. Добавьте следующую директиву using:
В метод ConfigureServices добавьте выделенный код:
Добавление контроллера
В обозревателе решений нажмите правую кнопку мыши на каталоге Controllers. Выберите пункт Add > New Item. В окне Add New Item выберите шаблон Web API Controller Class. Введите имя класса TodoController .
Замените сформированный код следующим:
Таким образом определяется класс пустого контроллера. В следующих разделах описывается добавление методов для реализации API.
Получение элементов списка дел
Чтобы получить элементы списка дел, добавьте следующие методы в класс TodoController :
Эти методы реализуют два метода GET:
Маршрутизация и URL-пути
"" — это величина, заменяемая на идентификатор элемента todo . Когда GetById вызывается, значение “” в URL присваивается параметру id метода.
Возвращаемые значения
Метод GetAll возвращает IEnumerable . MVC автоматически сериализует объект в JSON и записывает JSON в тело ответа. Код ответа для этого метода — 200, в том случае если нет необработанных исключений (необработанные исключения переводятся в ошибки 5xx.)
В свою очередь метод GetById возвращает значение более общего типа IActionResult , который представлен большим количеством типов возвращаемых значений. GetById имеет два различных типа возвращаемых значений:
- Если нет соответствия запрашиваемому идентификатору, метод возвращает ошибку 404. Это происходит при возврате NotFound .
- В остальных случаях метод возвращает код 200 и тело ответа в формате JSON. Это происходит при возврате ObjectResult .
Запуск приложения
Реализация других операций CRUD
Добавим методы Create , Update и Delete . Этот процесс аналогичен тому, о чем речь шла ранее, поэтому здесь будет показан код и выделены основные отличия. Создайте проект после добавления или изменения кода.
Create
Использование Postman для отправки запроса Create
- Установите POST в качестве метода HTTP.
- Выберите переключатель Body.
- Выберите переключатель raw.
- Выберите тип JSON.
- В редакторе пар ключ-значение укажите элемент Todo следующим образом: "> .
- Нажмите Send.
Для доступа к ресурсу, который только что создан, можно использовать URL из заголовка Location. Повторно вызовите метод GetById , создавший именованный маршрут "GetTodo" :
Update
Update с использованием Patch
Читайте также: