1.名词释义
react
React 是一个用于构建用户界面的 JAVASCRIPT 库，主要用于构建UI。
学习链接

antd
Ant Design 是一个 UI 设计语言，是一套提炼和应用于企业级后台产品的交互语言和视觉体系。
学习链接

dvajs
dva 是一个基于 redux 和 redux-saga 的数据流方案，然后为了简化开发体验，dva 还额外内置了 react-router 和 fetch，所以也可以理解为一个轻量级的应用框架。
学习链接
abp
ABP是一个开源的且文档友好的应用框架，它不仅仅是一个框架，更提供了一个基于DDD和最佳实践的健壮的体系模型。基于.NET CORE。
学习链接

2.react+antd+dvajs表现层实现
参照umi + dva，完成用户管理的 CURD 应用 实现基本的CRUD操作。

3.实现ABP 服务端
实体模型：

using Abp.Domain.Entities;
using System;
using System.ComponentModel.DataAnnotations;

namespace ben.abpdemo.Entities
{
    public class DvaUser : Entity, ISoftDelete
    {
        public DvaUser()
        {
            this.CreateTime = DateTime.Now;
        } 
        [Required]
        public virtual string Name { get; set; }

        [Required]
        public virtual string Email { get; set; }
        [Required]
        public virtual string Website { get; set; }
        public virtual DateTime CreateTime { get; set; }
        public virtual bool IsDeleted { get; set; }
    }
}

DTOs:

using Abp.Application.Services.Dto;
using Abp.Runtime.Validation;
using System;

namespace ben.abpdemo.Common
{
    public class CreateDvaUserDto : IShouldNormalize
    {
        /// <summary>
        /// 创建时间
        /// </summary>
        public DateTime? CreateTime { get; set; } 
        public string Name { get; set; }
        public string Email { get; set; }
        public string Website { get; set; }

        public void Normalize()
        {
            if (!CreateTime.HasValue) CreateTime = DateTime.Now;
        }
    }
    /// <summary>
    /// 自动更新所传的数据
    /// </summary>
    public class UpdateDvaUserDto : EntityDto<int>
    {
        public string Name { get; set; }
        public string Email { get; set; }
        public string Website { get; set; }

    }
    /// 用于列表展示
    /// </summary>
    public class DvaUserDto : EntityDto<int>
    {
        public string Name { get; set; }
        public string Email { get; set; }
        public string Website { get; set; }
    }

    public class GetDvaUserListDto : PagedResultRequestDto
    {
        /// <summary>
        /// 用于搜索的关键字
        /// </summary>
        public string key { get; set; }
    }
}

WEBAPI:

using Abp.Application.Services;
using Abp.Application.Services.Dto;
using Abp.Collections.Extensions;
using Abp.Domain.Repositories;
using Abp.Linq.Extensions;
using Abp.Web.Models;
using ben.abpdemo.Entities;
using Microsoft.EntityFrameworkCore;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;

namespace ben.abpdemo.Common
{
    public class DvaUsersAppService : AsyncCrudAppService<DvaUser, DvaUserDto, int, GetDvaUserListDto,
         CreateDvaUserDto, UpdateDvaUserDto>, IDvaUsersAppService
    {
        public DvaUsersAppService(IRepository<DvaUser> repository)
              : base(repository)
        {

        }
          
        [DontWrapResult]
        public override async Task<PagedResultDto<DvaUserDto>> GetAll(GetDvaUserListDto input)
        {
            var data = Repository.GetAll().Where(m => !m.IsDeleted);
            data = data.WhereIf(!string.IsNullOrEmpty(input.key), m => m.Name.Contains(input.key));
            int count = await data.CountAsync();
            var notes = await data.OrderByDescending(q => q.CreateTime)
                            .PageBy(input)
                            .ToListAsync();
            return new PagedResultDto<DvaUserDto>()
            {
                TotalCount = count,
                Items = ObjectMapper.Map<List<DvaUserDto>>(notes)
            };
        } 
    }
}

4.react请求改造：

import { PAGE_SIZE,SERVICE_URL } from '../constants';
import request from '../../../utils/request';

export function fetch({ page = 1 }) { 
  var SkipCount = (page-1) * PAGE_SIZE;
  //console.log(SkipCount);
  var resp = request(SERVICE_URL + `/api/services/app/DvaUsers/GetAll?MaxResultCount=${PAGE_SIZE}&SkipCount=${SkipCount}`);  
  // var resp2 = request(`/api/users?_page=${page}&_limit=${PAGE_SIZE}`);
  // console.log(resp2); 
  return resp; 
}

export function remove(id) {
  return request(SERVICE_URL +`/api/services/app/DvaUsers/Delete?Id=${id}`, {
    method: 'DELETE',
  });
  // return request(`/api/users/${id}`, {
  //   method: 'DELETE',
  // });
}

export function patch(id, values) { 
    values.id=id;
    //console.log(values);
    return request(SERVICE_URL +`/api/services/app/DvaUsers/Update`, {
    method: 'PUT',
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify(values),
  });
  // return request(`/api/users/${id}`, {
  //   method: 'PATCH',
  //   body: JSON.stringify(values),
  // });
}

export function create(values) {
  return request(SERVICE_URL +`/api/services/app/DvaUsers/Create`, {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify(values),
  });
  // return request('/api/users', {
  //   method: 'POST',
  //   body: JSON.stringify(values),
  // });
}

效果图：