В моем предыдущем посте я объяснил, как создать угловую 5 приложений в Visual Studio 2017, используя шаблоны ядра .NET, которые вы можете найти здесь Отказ
Если вы хотите узнать больше о угловом ядре .NET, мой пост может помочь вам получить базовый, который вы можете найти здесь И если вы хотите посмотреть, как мы можем развернуть угловые приложения на Azure, а затем посмотрите на мой пост здесь Отказ
В этой серии постов я объясню Создать, прочитать, обновлять, удалить (CRUD) Использование угловых 5 с API .NET CORE 2.
В этой части я пост, мы увидим, как сделать База данных сначала настроить в угловом углу (проект .NET CORE 2.0) и установит API сотрудника.
Пререквизит:
- Visual Studio 2017 Сообщество, Скачать здесь
- .NET CORE 2.0 SDK от здесь (Я написал сообщение для установки SDK здесь )
Создайте угловое приложение с использованием шаблона .NET CORE 2.0 в VS 2017
Как только у вас есть все эти установленные, откройте свою Visual Studio 2017 -> Создать новый проект -> Выберите Core Web Application:
Нажмите OK и в следующем окне, выберите угловую, как показано ниже:
Visual Studio создаст для вас хорошо структурированное приложение (обратите внимание, что я добавил вручную папку моделей, поскольку нам потребуется в будущем):
Я не буду идти в глубокую угловую структуру в этом посте, но если вам требуется больше подробностей, я написал подробный пост на угловой и .NET CORE 2.0, который вы найдете здесь Отказ
Как только вы запускаете приложение на Iisexpress У него будет посадочная страница, как показано ниже:
Создание базы данных сотрудников
Создайте базу данных сотрудников в SQL, вы можете использовать ниже запросы для создания базы данных и таблицы:
CREATE DATABASE AngularCRUDTest; CREATE TABLE Employees
( StudentId [bigint] IDENTITY(1,1) NOT NULL, EmpName varchar(50), EmpAge int, EmpCity varchar(50), EmpCountry varchar(50), CONSTRAINT [PK_Student] PRIMARY KEY CLUSTERED ( [StudentId] ASC
)
); INSERT INTO Employees
(EmpName, EmpAge, EmpCity, EmpCountry)
VALUES
('Neel', 27, 'Pune', 'India'); INSERT INTO Employees
(EmpName, EmpAge, EmpCity, EmpCountry)
VALUES
('Neel2', 27, 'Pune', 'India'); INSERT INTO Employees
(EmpName, EmpAge, EmpCity, EmpCountry)
VALUES
('Neel3', 27, 'Pune', 'India');
Как только база данных будет создана успешно. Это будет выглядеть как ниже:
Добавьте ссылки на EntityFramework
Как только база данных создана, будем добавлять EntityFrameworkcore.sqlserver (поставщик баз данных базы данных Microsoft SQL Server для ядра Framework Entity) Это поможет нам пойти дальше с помощью операций EntityFramework.
Ищите с ” microsoft.entityframeworkcore.sqlserver ” В Nuget Package Manager и нажмите «Установить:
Как мы собираемся использовать Первая база данных Подход для разработки, нам нужно также установить дополнительные пакеты ниже:
- Microsoft.entityframeworkcore.tools (включает в себя Scaffold-DBContext, Add-Migragration и Update-база данных)
- Microsoft.entityframeworkcore.sqlserver.design (Функциональность основных функций объекта Design-Time Framework для Microsoft SQL Server)
Создание модели сущности
Как только мы установили все необходимые ссылки, давайте добавим Требуемые контекстные и модели классов из существующих баз данных.
Команда .NET сделала этот шаг проще, и теперь нам просто нужно запустить ниже линии Консоль менеджера пакетов :
SCAFFOLD-DBCONTEXT; «Microsoft.entityFrameworkcore.sqlserver -outputdir models
Здесь используйте строку подключения согласно вашей базе данных и -Упутдир Атрибут позволяет указать местоположение сгенерированного файлов. В этом случае мы установили его на Модели (Папка, которую мы добавили ранее).
После того, как вы запустите вышеуказанный код, это создаст Класс контекста и класс сотрудников в папку моделей, как показано ниже:
Angularcrudtestcontext.cs Класс ** ( https://github.com/neelbhatt/angular4_2_5crud/blob/master/neelangular4crud/models/neelangular4crudestcontext.cs ) *
Сотрудники .cs Класс представляет таблицу сотрудников ** ( https://github.com/neelbhatt/angular4_2_5crud/blob/master/neelangular4crud/models/emoblaces.cs ) *
Как только это будет сделано, мы добавим строку подключения в Appsettings.json file, в Core .Net у нас есть файл json вместо файлов web.config ( https://github.com/neelbhatt/angular4_2_5crud/blob/master/2_5crud/blob/master/2_5crud/blob/angulare/Neelangular4crud/appsettings.json ):
Следующий шаг – добавить контекст БД в класс StartUp.cs.
Добавьте ниже ссылки на Startup.cs класс:
using NeelAngular5CRUD.Models; using Microsoft.EntityFrameworkCore;
Добавьте ниже строки в Configureservice Метод:
services.AddDbContext(options => options.UseSqlServer(Configuration.GetConnectionString("AngularCRUDTestDatabase")));
Stutup.cs Класс выглядит как ниже ( https://github.com/neelbhatt/angular4_2_5crud/blob/master/neelangular4crud/startup.cs ):
Как показано в вышеуказанном коде, мы передаем конфигурацию в Adddbcontext поэтому мы обязаны добавить конструктор в Angularcrudtestcontext который принимает DBContextoptions
За это идти в Angularcrudtestcontext класс и удалить Onconfigurging Метод, поскольку нам это не нужно, и добавьте конструктор, чтобы позволить конфигурации в контексте введении зависимости:
public AngularCRUDTestContext(DbContextOptionsoptions) : base(options) { }
После внесения изменений Angularcrudtestcontext Класс выглядит как ниже ( https://github.com/neelbhatt/angular4_2_5crud/blob/master/neelangular4crud/models/angularcrudtestcontext.cs ):
Если мы не добавим выше Конструктор Затем после запуска мы получим ниже исключение:
Вот и все. Мы завершили все необходимые код.
Добавить API контроллер с действиями с использованием структуры сущности
Щелкните правой кнопкой мыши на папке контроллеров -> Добавить новый контроллер -> Выберите контроллер API с действиями с использованием структуры объекта:
В следующем окне выберите Сотрудники в модели выпадают и Angularcrudtestcontext В раскрывании контекста данных:
Как только вы нажмете на Add, An PhoteEController API класс будет создан со всеми операциями CRUD, как показано ниже:
Давайте проверим нашу API, запустите приложение:
http://localhost:53008/api/Employees
Как вы можете видеть всех сотрудников, которые мы добавили в базу данных, возвращаются, что показывает, что наш код работает нормально.
В моем следующем посте мы добавим разные Угловой класс компонентов сделать Crud Работа с использованием API Мы создали в этом посте и покажут детали на UI.
Надеюсь, поможет.