Abp 入门教程 Day03

小丫头呀

已于 2022-06-08 13:53:43 修改

阅读量1.4k

点赞数

分类专栏： Abp入门文章标签： mvc asp.net

于 2022-05-26 23:09:36 首次发布

未经作者授权，禁止转载

本文链接：https://blog.csdn.net/weixin_39237340/article/details/124991590

版权

Abp入门专栏收录该内容

12 篇文章 6 订阅

订阅专栏

基于Day02,能正常运行Abp应用程序后，接下来使用该框架实现一个简单的待办事项应用程序

1.要实现的待办事项应用程序功能

获取待办事项列表
创建新的待办事项
删除现有的待办事项

2. 首先，需要创建应用程序使用到的实体(数据库字段)，那么，这个实体应该放在领域层（也就是放在.Domin项目里面）

在Abp中，每一个项目做什么，实现什么样的功能或接口服务，Abp已经规定好了。详细可以参考官网介绍，也可以参考 Apb 入门教程 Day02

2.1 接下来，在 TodoApp.Domain 项目中创建一个新的TotoItem类。该应用程序只需要用一个实体 (根据需求添加实体)。

1. BasicAggregateRoot 是创建根实体最简单的基础类,Guid 是这个实体的主键(Id)

2. 生成封装字段的快捷键，输入 prop ，接着按两次Tab 键即可快速生成封装字段

2.2 实体建立好后，我们是不是还得进行数据库集成 (生成数据库表)。那接着就需要进行实体映射配置。

1.实体映射配置，需要在 TodoApp.EntityFramewrokCore 项目的EntityFrameworkCore 文件夹中的TodoAppDbContext 类中添加一个DbSet 属性。

2. DbSet 这个写法是EF固定的(不要想那么多)~~，通过调用这个DbSet里面的方法实现对数据库的CRUD~~

2.3 实体映射也配置好了，是不是还得持久化到数据库中(在这里它被叫迁移)

1.如果不进行迁移，在数据库中是不存在该表的。

2.每一次在项目中添加了新的实体后，都得需要进行迁移。(每一次的迁移，项目中都会自动添加一个新的迁移类,该类存于Migrations 文件夹中)

3.每一次执行完迁移后，还必须执行update 命令，不然实体不会实际更新到数据库中。(也就是不会生成表)

2.4 接下来执行迁移操作 (有两种方式)

第一种，使用程序包管理控制台：工具--Nuget包管理--程序包管理器控制台，打开一个终端。

选择 TodoApp.EntityFrameworkCore 项目，因为Abp已经规定好的。执行数据库迁移必须是在这个项目中。

1.如上图，选择使用包管理器控制台执行迁移命令 .执行该命令前：需确保.Web 项目是设置成了启动项目，并且当前终端选择的项目是 .EntityFrameworkCore

Add-Migration addAdded_TodoItem

回车等待执行完成

这个时候，虽然执行成功了。但还未真正提交到数据库。接着需要执行更新命令，持久化到数据库中。

Update-Database

数据库中，已经成功生成了该数据表(其他数据表，是在数据化数据库的时候，Abp 自动生成的)

第二种方式，选择.EntityFrameworkCore 打开一个命令行终端工具

2. 如下图，直接选择当前 .EntityFrameworkCore 项目，右键。选择在终端打开

则需要输入以下命令进行迁移。

dotnet ef migrations add Added_TodoItem

使用该种命令方式，进行更新实体到数据库

dotnet ef datbase update

两种迁移方式效果一样，按需所取。

3. 数据表也创建了，接下来就需要编写应用服务接口了

3.1 根据要求，应该要有3个应用服务接口。

获取待办事项列表
创建新的待办事项
删除现有的待办事项

1.根据Abp 约定，应用程序接口的定义，需要在.Application.Contracts 项目中定义服务接口。

2.按照规约，应用程序服务接口返回的应该是Dto（数据传输对象）而不是把真正的实体返回去。所以我们还需要定义一个Dto 类。（Dto的作用就是前端想要什么，我就只定义前端想要的字段返回给前端，不会把真正的实体返回去）

3.所以Dto的定义也是在当前这个.Application.Contracts 项目中.

3.2 定义Dto类

3.3 接着定义应用程序服务接口

注意：应用服务接口的定义，需要继承自 IApplicationService 这个基类

4. 服务接口也创建了，那是不是还要实现这个服务接口。所以接着是应用服务的实现

1.根据Abp 约定，应用服务接口的实现是要在.Application 项目中

2. 应用服务接口实现类，需要继承自Abp 框架的 ApplicationService 类，然后紧跟着实现我们定义的 ITodoAppService 接口。

4.1 接着，需要使用Abp 为实体提供的默认泛型仓储。通过仓储，实现对数据库的CRUD(增删改查)。

1.首先需要通过构造函数注入 IRepository<TodoItem, Guid> ，它就是 TodoItem 实体的默认存储库。

2. 快速生成构造函数的快捷键，键入 ctor ，按一次Tab按键即可生成无参构造函数。

3. 如输入一些IRepository仓储的时候，报错了，是由于还没有导入命名空间。我们只需要把鼠标选中到放到报错的上面，按Alt+Enter。会提示要导入的命名空间，导入即可。

创建构造函数进行注入

选择第二项，创建字段并赋值

回车后，会自动创建一个只读的仓储字段，我们就通过它来实现对数据库的CRUD

4.2 接着实现方法

public class TodoAppService : ApplicationService, ITodoAppService
    {
        private readonly IRepository<TodoItem, Guid> todoItemRepository;

        public TodoAppService(IRepository<TodoItem,Guid> todoItemRepository)
        {
            this.todoItemRepository = todoItemRepository;
        }
        public async Task<TodoItemDto> CreateAsync(string text)
        {
           var todoItem= await todoItemRepository.InsertAsync(
                new TodoItem { Text = text });
            return new TodoItemDto
            {
                Id = todoItem.Id,
                Text = todoItem.Text
            };
        }

        public async Task DeleteAsync(Guid id)
        {
            await todoItemRepository.DeleteAsync(id);
        }

        public async Task<List<TodoItemDto>> GetListtAsync()
        {
            var items =await todoItemRepository.GetListAsync();
            return items.Select(item => new TodoItemDto
            {
                Id = item.Id,
                Text = item.Text
            }).ToList();
        }
    }

到这里，应用程度服务基本已经准备好了，接着就需要让.Web UI层来调用了。

5. 用户界面层实现

打开 TodoApp.Web 项目的 Pages 文件夹中 Index.cshtml.cs 类。在该类中需要调用 ITodoAppService 应用服务接口来获取待办事项列表，并将它赋值 TodoItems 属性。然后用它来渲染razor 页面的待办事项目列表。

5.1 修改 Index.cshtml 页面

@page
@model TodoApp.Web.Pages.IndexModel
@section styles {
    <abp-style src="/Pages/Index.css" />
}
@section scripts {
    <abp-script src="/Pages/Index.js" />
}
<div class="container">
    <abp-card>
        <abp-card-header>
            <abp-card-title>
                TODO LIST
            </abp-card-title>
        </abp-card-header>
        <abp-card-body>            
            <!-- FORM FOR NEW TODO ITEMS -->
            <form id="NewItemForm" class="form-inline">
                <input id="NewItemText" 
                       type="text" 
                       class="form-control mr-2" 
                       placeholder="enter text...">
                <button type="submit" class="btn btn-primary">Submit</button>
            </form>

            <!-- TODO ITEMS LIST -->
            <ul id="TodoList">
                @foreach (var todoItem in Model.TodoItems)
                {
                    <li data-id="@todoItem.Id">
                        <i class="fa fa-trash-o"></i> @todoItem.Text
                    </li>
                }
            </ul>
        </abp-card-body>
    </abp-card>
</div>

当前这个Index.cshtml 页面，还引入了一个css 和java Script 文件，所以还需要创建他们。该文件只要作用是执行响应用户的操作。

5.2 打开 TodoApp.Web 项目中 Pages 文件夹下的Index.js

$(function () {

    // DELETING ITEMS /
    $('#TodoList').on('click', 'li i', function(){
        var $li = $(this).parent();
        var id = $li.attr('data-id');

        todoApp.todo.delete(id).then(function(){
            $li.remove();
            abp.notify.info('Deleted the todo item.');
        });
    });

    // CREATING NEW ITEMS /
    $('#NewItemForm').submit(function(e){
        e.preventDefault();

        var todoText = $('#NewItemText').val();        
        todoApp.todo.create(todoText).then(function(result){
            $('<li data-id="' + result.id + '">')
                .html('<i class="fa fa-trash-o"></i> ' + result.text)
                .appendTo($('#TodoList'));
            $('#NewItemText').val('');
        });
    });
});

在 Index.js 文件中，我们使用了 todoApp.todo.delete(...) 和 todoApp.todo.create(...) 方法来与服务器通信。这些函数是Abp 框架动态创建的。主要归功于动态Java Script 客户端代理系统。它们执行 HTTP API 到服务器调用并返回一个Promise 对象。这样就可以使用 then 函数注册一个回调。

但是, 你可能会注意到我们还没有创建任何API控制器, 所以服务器如何处理这些请求? 这个问题为我们引出了ABP 框架的自动API控制器功能. 它通过约定自动将应用程序服务转换为 API 控制器.

如果你在应用程序URL中输入 /swagger 来打开 Swagger UI , 就会看到Todo API:

5.3 最后，修改Index.css 文件

#TodoList{
    list-style: none;
    margin: 0;
    padding: 0;
}

#TodoList li {
    padding: 5px;
    margin: 5px 0px;
    border: 1px solid #cccccc;
    background-color: #f5f5f5;
}

#TodoList li i
{
    opacity: 0.5;
}

#TodoList li i:hover
{
    opacity: 1;
    color: #ff0000;
    cursor: pointer;
}