🚰 👨‍👨‍👦‍👦 🧜🏿 API Web ASP.NET + Entity Framework + Microsoft SQL Server + Angular. Partie 1 👐🏼 🤱🏻 🏇🏾

introduction

Un court cours sur la création d'une application Web simple à l'aide des technologies ASP.NET Core, Entity Framework, Microsoft SQL Server SGBD et Angular Framework. Nous testerons l'API Web via l'application Postman .

Le cours se compose de plusieurs parties:

Créez des API Web avec l'API Web ASP.NET et Entity Framework Core.
Implémentation de l'interface utilisateur en Angular.
Ajout de l'authentification à l'application.
Étendez le modèle d'application et explorez les fonctionnalités supplémentaires d'Entity Framework.

Partie 1. Créer des API Web avec l'API Web ASP.NET et Entity Framework Core

A titre d'exemple, nous considérerons l'application désormais classique d'une liste de tâches. Pour développer l'application, j'utiliserai Visual Studio 2019 (le processus est similaire dans Visual Studio 2017).

Création de projet

Créez un nouveau projet d'application Web ASP.NET Core dans Visual Studio:

nommez l'application et spécifiez le chemin d'accès au répertoire avec le projet:

et sélectionnez le modèle d'application API:

Modèle

Créons un catalogue de modèles et ajoutons la première classe TodoItem.cs au nouveau catalogue, dont les objets décriront certaines tâches de la liste de tâches dans l'application:

public class TodoItem
{
    public int Id { get; set; }
    public string TaskDescription { get; set; }
    public bool IsComplete { get; set; }
}

Nous utiliserons Sql Server en tant que SGBD, et l'accès à la base de données sera effectué via Entity Framework Core et d'abord, nous installerons le framework via le gestionnaire de packages NuGet intégré:

Une approche pour travailler avec Entity Framework est l'approche «Code-First». L'essence de l'approche est que basée sur le modèle d'application (dans notre cas, le modèle représente une seule classe - TodoItem.cs), la structure de la base de données (tables, clés primaires, liens) est formée, tout ce travail se fait «en coulisses» et directement avec Nous ne travaillons pas avec SQL. Une condition préalable pour la classe de modèle est la présence d'un champ de clé primaire; par défaut, Entity Framework recherche un champ entier au nom duquel se trouve une sous-chaîne «id» et forme une clé primaire basée sur celui-ci. Vous pouvez remplacer ce comportement à l'aide d'attributs personnalisés ou à l'aide des fonctionnalités de l'API Fluent.

Le composant principal de l'utilisation d'Entity Framework est la classe de contexte de base de données, à travers laquelle les données des tables sont réellement accessibles:

public class EFTodoDBContext : DbContext
{
    public EFTodoDBContext(DbContextOptions<EFTodoDBContext> options) : base(options) 
    { }
    public DbSet<TodoItem> TodoItems{ get; set; }
}

La classe de base DbContext crée le contexte de la base de données et donne accès aux fonctionnalités d'Entity Framework.

Nous utiliserons SQL Server 2017 Express pour stocker les données d'application . Les chaînes de connexion sont stockées dans un fichier JSON appelé appsettings.json:

{
  "ConnectionStrings": {
    "DefaultConnection": "Server=.\\SQLEXPRESS;Database=Todo;Trusted_Connection=true"
  }
}

Ensuite, vous devez modifier la classe Startup.cs en ajoutant le code suivant à la méthode ConfigureServices ():

services.AddDbContext<EFTodoDBContext>(options => options.UseSqlServer(Configuration["ConnectionStrings:DefaultConnection"]));

La méthode AddDbContext () configure les services fournis par Entity Framework Core pour la classe de contexte de base de données EFTodoDBContext. L'argument de la méthode AddDbContext () est une expression lambda qui reçoit un objet options qui configure la base de données pour la classe de contexte. Dans ce cas, la base de données est configurée à l'aide de la méthode UseSqlServer () et en spécifiant une chaîne de connexion.

Définissons les opérations de base pour travailler avec des tâches dans l'interface ITodoRepository:

 public interface ITodoRepository
 {
    IEnumerable<TodoItem> Get();
    TodoItem Get(int id);
    void Create(TodoItem item);
    void Update(TodoItem item);
    TodoItem Delete(int id);
 }

Cette interface nous permet de ne pas penser à l'implémentation spécifique de l'entrepôt de données, peut-être n'avons-nous pas exactement décidé du choix d'un framework SGBD ou ORM, maintenant cela n'a pas d'importance, la classe décrivant l'accès aux données héritera de cette interface.

Implémentons un référentiel qui, comme mentionné précédemment, héritera de ITodoRepository et utilisera EFTodoDBContext comme source de données:

public class EFTodoRepository : ITodoRepository
{
    private EFTodoDBContext Context;
    public IEnumerable<TodoItem> Get()
    {
        return Context.TodoItems;
    }
    public TodoItem Get(int Id)
    {
        return Context.TodoItems.Find(Id);
    }
    public EFTodoRepository(EFTodoDBContext context)
    {
        Context = context;
    }
    public void Create(TodoItem item)
    {
        Context.TodoItems.Add(item);
        Context.SaveChanges();
    }
    public void Update(TodoItem updatedTodoItem)
    {
        TodoItem currentItem = Get(updatedTodoItem.Id);
        currentItem.IsComplete = updatedTodoItem.IsComplete;
        currentItem.TaskDescription = updatedTodoItem.TaskDescription;

        Context.TodoItems.Update(currentItem);
        Context.SaveChanges();
        }

    public TodoItem Delete(int Id)
    {
        TodoItem todoItem = Get(Id);

        if (todoItem != null)
        {
            Context.TodoItems.Remove(todoItem);
            Context.SaveChanges();
        }

        return todoItem;
    }    
}

Manette

Le responsable du traitement, dont la mise en œuvre sera décrite ci-dessous, ne saura rien sur le contexte des données d'EFTodoDBContext, mais n'utilisera que l'interface ITodoRepository dans son travail, ce qui vous permet de changer la source de données sans changer le contrôleur. Cette approche Adam Freeman dans son livre «Entity Framework Core 2 pour ASP.NET Core MVC pour les professionnels» a appelé le modèle «Stockage».

Le contrôleur implémente des gestionnaires pour les méthodes de requête HTTP standard: GET, POST, PUT, DELETE, qui changeront l'état de nos tâches décrites dans la classe TodoItem.cs.

Ajoutez la classe TodoController.cs au répertoire Controllers avec le contenu suivant:

[Route("api/[controller]")]
public class TodoController : Controller
{
    ITodoRepository TodoRepository;

    public TodoController(ITodoRepository todoRepository)
    {
        TodoRepository = todoRepository;
    }

    [HttpGet(Name = "GetAllItems")]
    public IEnumerable<TodoItem> Get()
    {
        return TodoRepository.Get();
    }

    [HttpGet("{id}", Name = "GetTodoItem")]
    public IActionResult Get(int Id)
    {
        TodoItem todoItem = TodoRepository.Get(Id);

        if (todoItem == null)
        {
            return NotFound();
        }

        return new ObjectResult(todoItem);
    }

    [HttpPost]
    public IActionResult Create([FromBody] TodoItem todoItem)
     {
        if (todoItem == null)
        {
            return BadRequest();
        }
        TodoRepository.Create(todoItem);
        return CreatedAtRoute("GetTodoItem", new { id = todoItem.Id }, todoItem);
    }

    [HttpPut("{id}")]
    public IActionResult Update(int Id, [FromBody] TodoItem updatedTodoItem)
    {
        if (updatedTodoItem == null || updatedTodoItem.Id != Id)
        {
            return BadRequest();
        }

        var todoItem = TodoRepository.Get(Id);
        if (todoItem == null)
        {
            return NotFound();
        }

        TodoRepository.Update(updatedTodoItem);
        return RedirectToRoute("GetAllItems");
    }

    [HttpDelete("{id}")]
    public IActionResult Delete(int Id)
    {
        var deletedTodoItem = TodoRepository.Delete(Id);

        if (deletedTodoItem == null)
        {
            return BadRequest();
        }

        return new ObjectResult(deletedTodoItem);
    }
 }

Avant la définition de classe, un attribut décrivant le modèle de route pour accéder au contrôleur est spécifié: [Route ("api / [controller]")]. Le TodoController sera accessible via la route suivante: https: // <ip hôte>: <port> / api / todo. [Controller] spécifie le nom de la classe de contrôleur en minuscules, en omettant la partie "Controller".

Avant chaque définition de méthode dans TodoController, un attribut spécial de la forme: [<HTTP method> ("parameter", Name = "method alias")] est spécifié. L'attribut détermine quelle requête HTTP sera traitée par cette méthode, le paramètre qui est passé dans l'URI de la requête et l'alias de la méthode avec laquelle la requête peut être renvoyée. Si vous ne spécifiez pas l'attribut, le framework MVC essaiera par défaut de trouver la méthode la plus appropriée dans le contrôleur pour traiter la requête en fonction du nom de la méthode et des paramètres spécifiés dans la requête, donc si vous ne spécifiez pas d'attribut pour la méthode Get () dans le contrôleur TodoController, alors dans une requête HTTP en utilisant la méthode GET: https: // <ip hôte>: <port> / api / todo, l'infrastructure définira la méthode Get () du contrôleur pour traiter la requête.

Dans son constructeur, le contrôleur reçoit une référence à un objet de type ITodoRepository, mais jusqu'ici l'infrastructure MVC ne sait pas quel objet substituer lors de la création du contrôleur. Nous devons créer un service qui résout de manière unique cette dépendance, pour cela, nous apporterons des modifications à la classe Startup.cs en ajoutant le code suivant à la méthode ConfigureServices ():

services.AddTransient<ITodoRepository, EFTodoRepository>();

La méthode AddTransient <ITodoRepository, EFTodoRepository> () définit un service qui crée une nouvelle instance de la classe EFTodoRepository chaque fois qu'une instance de type ITodoRepository est requise, par exemple dans un contrôleur.

Code complet de la classe Startup.cs:

public class Startup
{
    public Startup(IConfiguration configuration)
    {
        Configuration = configuration;
    }

    public IConfiguration Configuration { get; }

    public void ConfigureServices(IServiceCollection services)
    {
        services.AddControllers();
        services.AddMvc().SetCompatibilityVersion(CompatibilityVersion.Version_3_0);
        services.AddDbContext<EFTodoDBContext>(options => options.UseSqlServer(Configuration["ConnectionStrings:DefaultConnection"]));
        services.AddTransient<ITodoRepository, EFTodoRepository>();
    }

    public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
    {
        if (env.IsDevelopment())
        {
            app.UseDeveloperExceptionPage();
        }

        app.UseHttpsRedirection();
        app.UseRouting();
        app.UseAuthorization();
        app.UseEndpoints(endpoints =>
        {
            endpoints.MapControllers();
        });
    }
 }

Migrations

Pour que Entity Framework génère la base de données et les tables à partir du modèle, vous devez utiliser le processus de migration de base de données. Les migrations sont un groupe de commandes qui prépare la base de données à fonctionner avec Entity Framework. Ils sont utilisés pour créer et synchroniser la base de données. Les commandes peuvent être exécutées à la fois dans la console du gestionnaire de package et dans Power Shell (Developer Power Shell). Nous utiliserons la console du gestionnaire de package, pour travailler avec Entity Framework, nous devons installer le package Microsoft.EntityFrameworkCore.Tools:

Lancez la console du gestionnaire de package et exécutez la commande Add-Migration Initial :

Un nouveau répertoire apparaîtra dans le projet - Migrations, dans lequel les classes de migration seront stockées, sur la base des objets de la base de données qui seront créés après l'exécution de la commande Update-Database: L'

API Web est prête, en exécutant l'application sur IIS Express local, nous pouvons tester le contrôleur.

Tester WebAPI

Créons une nouvelle collection de requêtes dans Postman appelée TodoWebAPI:

Puisque notre base de données est vide, testons d'abord la création d'une nouvelle tâche. Dans le contrôleur, la méthode Create () est responsable de la création de tâches, qui traiteront une requête HTTP envoyée par la méthode POST et contiendra un objet TodoItem sérialisé au format JSON dans le corps de la requête. L'attribut [FromBody] avant le paramètre todoItem dans la méthode Create () indique au framework MVC de désérialiser l'objet TodoItem du corps de la requête et de le transmettre en tant que paramètre à la méthode. Créons une requête dans Postman qui enverra une requête à la webAPI pour créer une nouvelle tâche:

La méthode Create () après la création réussie de la tâche redirige la demande vers la méthode Get () avec l'alias "GetTodoItem" et transmet l'ID de la tâche nouvellement créée en tant que paramètre, à la suite de quoi nous recevrons l'objet de tâche créé au format JSON en réponse à la demande.

En envoyant une requête HTTP à l'aide de la méthode PUT et en spécifiant un objet déjà créé dans l'URI Id (https: // localhost: 44370 / api / todo / 1), et en passant un objet avec quelques modifications au format JSON dans le corps de la requête, nous modifierons cet objet dans la base de données :

Avec une requête HTTP avec la méthode GET sans spécifier de paramètres, nous recevrons tous les objets de la base de données:

Une requête HTTP avec la méthode DELETE et en spécifiant l'ID de l'objet dans l'URI (https: // localhost: 44370 / api / todo / 2), supprimera l'objet de la base de données et retournera JSON avec tâche distante:

C'est tout, dans la partie suivante, nous implémenterons l'interface utilisateur en utilisant le framework Angular JavaScript.

API Web ASP.NET + Entity Framework + Microsoft SQL Server + Angular. Partie 1