.NET 理解ABP项目

新建ABP项目

1. 通过控制台abp new TodoApp 新建项目，控制台目录为当前新建项目目录
2. 右击TodoApp.DbMigrator设置为启动项，点击运行创建数据库和初始数据
3. 右击TodoApp.Web设置为启动项，点击运行可以看到初始UI

环境

1. 开发环境：Visual Studio 2019

Coding

1. 在类库TodoApp.Domain新建类TodoItem

   public class TodoItem : BasicAggregateRoot<Guid>
       {
           public string Text { get; set; }
       }
   

   BasicAggregateRoot是创建实体Entity最简单的一个基类，Guid是这里实体的主键(Id)
2. 在类库TodoApp.EntityFrameworkCore中打开类TodoAppDbContext添加

   public DbSet<TodoItem> TodoItems { get; set; }
   

   打开类TodoAppDbContextModelCreatingExtensions 在其中添加代码

   public static void ConfigureTodoApp(this ModelBuilder builder)
   {
       Check.NotNull(builder, nameof(builder));
       /*这一段
       builder.Entity<TodoItem>(b =>
       {
           b.ToTable("TodoItems");
       });
       */
   }
   

   将Entity实体类TodoItem变成数据库的table TodoItems
3. 在nuget里执行命令EntityFrameworkCore\Add-Migration freeName(自定义名) -Context TodoAppDbContext和update-database -Context TodoAppDbContext生成对应的数据库表，默认项目为TodoApp.EntityFrameworkCore。数据库连接可在TodoApp.Web的appsettings.json的文件中找到。
4. 在类库TodoApp.Application.Contracts中添加新建项interface ITodoAppService，添加以下代码：

       public interface ITodoAppService : IApplicationService
       {
           Task<List<TodoItemDto>> GetListAsync();
           Task<TodoItemDto> CreateAsync(string text);
           Task DeleteAsync(Guid id);
       }
   

5. 在类库TodoApp.Application.Contracts新建类TodoItemDto

       public class TodoItemDto
       {
           public Guid Id { get; set; }
           public string Text { get; set; }
       }
   

   这个DTO匹配我们的类TodoItem
6. 在类库TodoApp.Application实现类ITodoAppService

   public class TodoAppService : ApplicationService, ITodoAppService
   {
       private readonly IRepository<TodoItem, Guid> _todoItemRepository;
   
       public TodoAppService(IRepository<TodoItem, Guid> todoItemRepository)
       {
           _todoItemRepository = todoItemRepository;
       }
       
       //查询
       public async Task<List<TodoItemDto>> GetListAsync()
       {
           var items = await _todoItemRepository.GetListAsync();
           return items
               .Select(item => new TodoItemDto
               {
                   Id = item.Id,
                   Text = item.Text
               }).ToList();
       }
       
       //添加
       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);
       }
   }
   

7. 在类库TodoApp.Web的文件夹Pages打开Index.cshtml.cs添加以下代码：

   using System.Collections.Generic;
   using System.Threading.Tasks;
   
   namespace TodoApp.Web.Pages
   {
       public class IndexModel : TodoAppPageModel
       {
           public List<TodoItemDto> TodoItems { get; set; }
   
           private readonly ITodoAppService _todoAppService;
   
           public IndexModel(ITodoAppService todoAppService)
           {
               _todoAppService = todoAppService;
           }
   
           public async Task OnGetAsync()
           {
               TodoItems = await _todoAppService.GetListAsync();
           }
       }
   }
   

   注入ITodoAppService获取todoItem和分配TodoItems属性
8. 在类库TodoApp.Web的文件夹Pages打开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>
   

9. 通过js进行查询和删除操作,在类库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('');
           });
       });
   });
   

10. 在类库TodoApp.Web的文件夹Pages打开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;
    }
    

11. 类库TodoApp.Web为启动项，运行程序。