新建ABP项目
通过控制台abp new TodoApp
新建项目,控制台目录为当前新建项目目录- 右击
TodoApp.DbMigrator
设置为启动项,点击运行创建数据库和初始数据 - 右击
TodoApp.Web
设置为启动项,点击运行可以看到初始UI
环境
- 开发环境:Visual Studio 2019
Coding
- 在类库
TodoApp.Domain
新建类TodoItem
public class TodoItem : BasicAggregateRoot<Guid> { public string Text { get; set; } }
BasicAggregateRoot
是创建实体Entity最简单的一个基类,Guid
是这里实体的主键(Id) - 在类库
TodoApp.EntityFrameworkCore
中打开类TodoAppDbContext
添加
打开类public DbSet<TodoItem> TodoItems { get; set; }
TodoAppDbContextModelCreatingExtensions
在其中添加代码
将Entity实体类public static void ConfigureTodoApp(this ModelBuilder builder) { Check.NotNull(builder, nameof(builder)); /*这一段 builder.Entity<TodoItem>(b => { b.ToTable("TodoItems"); }); */ }
TodoItem
变成数据库的tableTodoItems
- 在nuget里执行命令
EntityFrameworkCore\Add-Migration freeName(自定义名) -Context TodoAppDbContext
和update-database -Context TodoAppDbContext
生成对应的数据库表,默认项目为TodoApp.EntityFrameworkCore
。数据库连接可在TodoApp.Web
的appsettings.json
的文件中找到。 - 在类库
TodoApp.Application.Contracts
中添加新建项interfaceITodoAppService
,添加以下代码:public interface ITodoAppService : IApplicationService { Task<List<TodoItemDto>> GetListAsync(); Task<TodoItemDto> CreateAsync(string text); Task DeleteAsync(Guid id); }
- 在类库
TodoApp.Application.Contracts
新建类TodoItemDto
这个DTO匹配我们的类public class TodoItemDto { public Guid Id { get; set; } public string Text { get; set; } }
TodoItem
- 在类库
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); } }
- 在类库
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属性 - 在类库
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>
- 通过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(''); }); }); });
- 在类库
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; }
- 类库
TodoApp.Web
为启动项,运行程序。