ABP+NetCore+Vue.js实现增删改查

ABP我就不多介绍了，不知道的可以自己百度

本篇开发工具VS2017，数据库SQL SERVER2012，系统Win7

1、去ABP官网下载对应的模板，下载地址：https://aspnetboilerplate.com/Templates

2、用VS2017打开解压后的项目，找到src下web项目下appsettings.json文件。打开后修改数据库连接字符串

图我就不截了，涉及个人隐私

3、在Core项目下添加二个文件夹，一个Entities文件夹存放所有的实体，一个IRepositories文件夹存放所有的仓储接口

IRepositories文件夹里面的仓储接口主要是自己定义除IRepository<TEntity, TPrimaryKey>没有定义的接口，本文的增删改查IRepository<TEntity, TPrimaryKey>都已经定义了，

所以IRepositories文件夹里面东西对本文作用不大，但是作为一名高度强迫症患者，还是添加此文件夹以备不时之需

附IRepository<TEntity, TPrimaryKey>定义的接口

using System;
using System.Collections.Generic;
using System.Linq;
using System.Linq.Expressions;
using System.Threading.Tasks;
using Abp.Dependency;
using Abp.Domain.Entities;

namespace Abp.Domain.Repositories
{
    //
    // 摘要:
    //     This interface is implemented by all repositories to ensure implementation of
    //     fixed methods.
    //
    // 类型参数:
    //   TEntity:
    //     Main Entity type this repository works on
    //
    //   TPrimaryKey:
    //     Primary key type of the entity
    public interface IRepository<TEntity, TPrimaryKey> : IRepository, ITransientDependency where TEntity : class, IEntity<TPrimaryKey>
    {
        //
        // 摘要:
        //     Gets count of all entities in this repository.
        //
        // 返回结果:
        //     Count of entities
        int Count();
        //
        // 摘要:
        //     Gets count of all entities in this repository based on given predicate.
        //
        // 参数:
        //   predicate:
        //     A method to filter count
        //
        // 返回结果:
        //     Count of entities
        int Count(Expression<Func<TEntity, bool>> predicate);
        //
        // 摘要:
        //     Gets count of all entities in this repository based on given predicate.
        //
        // 参数:
        //   predicate:
        //     A method to filter count
        //
        // 返回结果:
        //     Count of entities
        Task<int> CountAsync(Expression<Func<TEntity, bool>> predicate);
        //
        // 摘要:
        //     Gets count of all entities in this repository.
        //
        // 返回结果:
        //     Count of entities
        Task<int> CountAsync();
        //
        // 摘要:
        //     Deletes an entity.
        //
        // 参数:
        //   entity:
        //     Entity to be deleted
        void Delete(TEntity entity);
        //
        // 摘要:
        //     Deletes an entity by primary key.
        //
        // 参数:
        //   id:
        //     Primary key of the entity
        void Delete(TPrimaryKey id);
        //
        // 摘要:
        //     Deletes many entities by function. Notice that: All entities fits to given predicate
        //     are retrieved and deleted. This may cause major performance problems if there
        //     are too many entities with given predicate.
        //
        // 参数:
        //   predicate:
        //     A condition to filter entities
        void Delete(Expression<Func<TEntity, bool>> predicate);
        //
        // 摘要:
        //     Deletes an entity by primary key.
        //
        // 参数:
        //   id:
        //     Primary key of the entity
        Task DeleteAsync(TPrimaryKey id);
        //
        // 摘要:
        //     Deletes many entities by function. Notice that: All entities fits to given predicate
        //     are retrieved and deleted. This may cause major performance problems if there
        //     are too many entities with given predicate.
        //
        // 参数:
        //   predicate:
        //     A condition to filter entities
        Task DeleteAsync(Expression<Func<TEntity, bool>> predicate);
        //
        // 摘要:
        //     Deletes an entity.
        //
        // 参数:
        //   entity:
        //     Entity to be deleted
        Task DeleteAsync(TEntity entity);
        //
        // 摘要:
        //     Gets an entity with given given predicate or null if not found.
        //
        // 参数:
        //   predicate:
        //     Predicate to filter entities
        TEntity FirstOrDefault(Expression<Func<TEntity, bool>> predicate);
        //
        // 摘要:
        //     Gets an entity with given primary key or null if not found.
        //
        // 参数:
        //   id:
        //     Primary key of the entity to get
        //
        // 返回结果:
        //     Entity or null
        TEntity FirstOrDefault(TPrimaryKey id);
        //
        // 摘要:
        //     Gets an entity with given given predicate or null if not found.
        //
        // 参数:
        //   predicate:
        //     Predicate to filter entities
        Task<TEntity> FirstOrDefaultAsync(Expression<Func<TEntity, bool>> predicate);
        //
        // 摘要:
        //     Gets an entity with given primary key or null if not found.
        //
        // 参数:
        //   id:
        //     Primary key of the entity to get
        //
        // 返回结果:
        //     Entity or null
        Task<TEntity> FirstOrDefaultAsync(TPrimaryKey id);
        //
        // 摘要:
        //     Gets an entity with given primary key.
        //
        // 参数:
        //   id:
        //     Primary key of the entity to get
        //
        // 返回结果:
        //     Entity
        TEntity Get(TPrimaryKey id);
        //
        // 摘要:
        //     Used to get a IQueryable that is used to retrieve entities from entire table.
        //
        // 返回结果:
        //     IQueryable to be used to select entities from database
        IQueryable<TEntity> GetAll();
        //
        // 摘要:
        //     Used to get a IQueryable that is used to retrieve entities from entire table.
        //     One or more
        //
        // 参数:
        //   propertySelectors:
        //     A list of include expressions.
        //
        // 返回结果:
        //     IQueryable to be used to select entities from database
        IQueryable<TEntity> GetAllIncluding(params Expression<Func<TEntity, object>>[] propertySelectors);
        //
        // 摘要:
        //     Used to get all entities based on given predicate.
        //
        // 参数:
        //   predicate:
        //     A condition to filter entities
        //
        // 返回结果:
        //     List of all entities
        List<TEntity> GetAllList(Expression<Func<TEntity, bool>> predicate);
        //
        // 摘要:
        //     Used to get all entities.
        //
        // 返回结果:
        //     List of all entities
        List<TEntity> GetAllList();
        //
        // 摘要:
        //     Used to get all entities based on given predicate.
        //
        // 参数:
        //   predicate:
        //     A condition to filter entities
        //
        // 返回结果:
        //     List of all entities
        Task<List<TEntity>> GetAllListAsync(Expression<Func<TEntity, bool>> predicate);
        //
        // 摘要:
        //     Used to get all entities.
        //
        // 返回结果:
        //     List of all entities
        Task<List<TEntity>> GetAllListAsync();
        //
        // 摘要:
        //     Gets an entity with given primary key.
        //
        // 参数:
        //   id:
        //     Primary key of the entity to get
        //
        // 返回结果:
        //     Entity
        Task<TEntity> GetAsync(TPrimaryKey id);
        //
        // 摘要:
        //     Inserts a new entity.
        //
        // 参数:
        //   entity:
        //     Inserted entity
        TEntity Insert(TEntity entity);
        //
        // 摘要:
        //     Inserts a new entity and gets it's Id. It may require to save current unit of
        //     work to be able to retrieve id.
        //
        // 参数:
        //   entity:
        //     Entity
        //
        // 返回结果:
        //     Id of the entity
        TPrimaryKey InsertAndGetId(TEntity entity);
        //
        // 摘要:
        //     Inserts a new entity and gets it's Id. It may require to save current unit of
        //     work to be able to retrieve id.
        //
        // 参数:
        //   entity:
        //     Entity
        //
        // 返回结果:
        //     Id of the entity
        Task<TPrimaryKey> InsertAndGetIdAsync(TEntity entity);
        //
        // 摘要:
        //     Inserts a new entity.
        //
        // 参数:
        //   entity:
        //     Inserted entity
        Task<TEntity> InsertAsync(TEntity entity);
        //
        // 摘要:
        //     Inserts or updates given entity depending on Id's value.
        //
        // 参数:
        //   entity:
        //     Entity
        TEntity InsertOrUpdate(TEntity entity);
        //
        // 摘要:
        //     Inserts or updates given entity depending on Id's value. Also returns Id of the
        //     entity. It may require to save current unit of work to be able to retrieve id.
        //
        // 参数:
        //   entity:
        //     Entity
        //
        // 返回结果:
        //     Id of the entity
        TPrimaryKey InsertOrUpdateAndGetId(TEntity entity);
        //
        // 摘要:
        //     Inserts or updates given entity depending on Id's value. Also returns Id of the
        //     entity. It may require to save current unit of work to be able to retrieve id.
        //
        // 参数:
        //   entity:
        //     Entity
        //
        // 返回结果:
        //     Id of the entity
        Task<TPrimaryKey> InsertOrUpdateAndGetIdAsync(TEntity entity);
        //
        // 摘要:
        //     Inserts or updates given entity depending on Id's value.
        //
        // 参数:
        //   entity:
        //     Entity
        Task<TEntity> InsertOrUpdateAsync(TEntity entity);
        //
        // 摘要:
        //     Creates an entity with given primary key without database access.
        //
        // 参数:
        //   id:
        //     Primary key of the entity to load
        //
        // 返回结果:
        //     Entity
        TEntity Load(TPrimaryKey id);
        //
        // 摘要:
        //     Gets count of all entities in this repository based on given predicate (use this
        //     overload if expected return value is greather than System.Int32.MaxValue).
        //
        // 参数:
        //   predicate:
        //     A method to filter count
        //
        // 返回结果:
        //     Count of entities
        long LongCount(Expression<Func<TEntity, bool>> predicate);
        //
        // 摘要:
        //     Gets count of all entities in this repository (use if expected return value is
        //     greather than System.Int32.MaxValue.
        //
        // 返回结果:
        //     Count of entities
        long LongCount();
        //
        // 摘要:
        //     Gets count of all entities in this repository (use if expected return value is
        //     greather than System.Int32.MaxValue.
        //
        // 返回结果:
        //     Count of entities
        Task<long> LongCountAsync();
        //
        // 摘要:
        //     Gets count of all entities in this repository based on given predicate (use this
        //     overload if expected return value is greather than System.Int32.MaxValue).
        //
        // 参数:
        //   predicate:
        //     A method to filter count
        //
        // 返回结果:
        //     Count of entities
        Task<long> LongCountAsync(Expression<Func<TEntity, bool>> predicate);
        //
        // 摘要:
        //     Used to run a query over entire entities. Abp.Domain.Uow.UnitOfWorkAttribute
        //     attribute is not always necessary (as opposite to Abp.Domain.Repositories.IRepository`2.GetAll)
        //     if queryMethod finishes IQueryable with ToList, FirstOrDefault etc..
        //
        // 参数:
        //   queryMethod:
        //     This method is used to query over entities
        //
        // 类型参数:
        //   T:
        //     Type of return value of this method
        //
        // 返回结果:
        //     Query result
        T Query<T>(Func<IQueryable<TEntity>, T> queryMethod);
        //
        // 摘要:
        //     Gets exactly one entity with given predicate. Throws exception if no entity or
        //     more than one entity.
        //
        // 参数:
        //   predicate:
        //     Entity
        TEntity Single(Expression<Func<TEntity, bool>> predicate);
        //
        // 摘要:
        //     Gets exactly one entity with given predicate. Throws exception if no entity or
        //     more than one entity.
        //
        // 参数:
        //   predicate:
        //     Entity
        Task<TEntity> SingleAsync(Expression<Func<TEntity, bool>> predicate);
        //
        // 摘要:
        //     Updates an existing entity.
        //
        // 参数:
        //   entity:
        //     Entity
        TEntity Update(TEntity entity);
        //
        // 摘要:
        //     Updates an existing entity.
        //
        // 参数:
        //   id:
        //     Id of the entity
        //
        //   updateAction:
        //     Action that can be used to change values of the entity
        //
        // 返回结果:
        //     Updated entity
        TEntity Update(TPrimaryKey id, Action<TEntity> updateAction);
        //
        // 摘要:
        //     Updates an existing entity.
        //
        // 参数:
        //   id:
        //     Id of the entity
        //
        //   updateAction:
        //     Action that can be used to change values of the entity
        //
        // 返回结果:
        //     Updated entity
        Task<TEntity> UpdateAsync(TPrimaryKey id, Func<TEntity, Task> updateAction);
        //
        // 摘要:
        //     Updates an existing entity.
        //
        // 参数:
        //   entity:
        //     Entity
        Task<TEntity> UpdateAsync(TEntity entity);
    }
}

4、自定义实体类User和仓储接口IUserRepository

using Abp.Domain.Entities;
using System;
using System.Collections.Generic;
using System.ComponentModel.DataAnnotations;
using System.Text;

namespace Ocean.Entities
{
    public class User : Entity
    {
        /// <summary>
        /// 用户名
        /// </summary>
        [MaxLength(500)]
        public virtual string UserName { get; set; }

        /// <summary>
        /// 真实姓名
        /// </summary>
        [MaxLength(500)]
        public virtual string RealName { get; set; }

        /// <summary>
        /// 邮箱
        /// </summary>
        [MaxLength(50)]
        public virtual string Email { get; set; }

        /// <summary>
        /// 添加时间
        /// </summary>
        public virtual DateTime CreationTime { get; set; } = DateTime.Now;

        /// <summary>
        /// 用户状态
        /// </summary>
        public virtual int Status { get; set; } = 0;
    }
}

using Abp.Domain.Repositories;
using System;
using System.Collections.Generic;
using System.Text;

namespace Ocean.IRepositories
{
    public interface IUserRepository : IRepository
    {
        //自定义除增删改查基本操作之外的其余方法接口
    }
}

5、去EntityFrameworkCore下EntityFrameworkCore文件夹里添加个Repositories文件夹，里面主要存放实现自定义仓储接口的方法

using Ocean.IRepositories;
using System;
using System.Collections.Generic;
using System.Text;

namespace Ocean.EntityFrameworkCore.Repositories
{
    public class UserRepository : IUserRepository
    {
        //
    }
}

6、EntityFrameworkCore下找到 DbContext文件打开，添加对应的DbSet

using Abp.EntityFrameworkCore;
using Microsoft.EntityFrameworkCore;
using Ocean.Entities;

namespace Ocean.EntityFrameworkCore
{
    public class OceanDbContext : AbpDbContext
    {
        //Add DbSet properties for your entities...
        public virtual DbSet<User> User { get; set; }

        public OceanDbContext(DbContextOptions<OceanDbContext> options) 
            : base(options)
        {
            //
        }
    }
}

7、打开工具--Nuget包管理器--程序包管理器控制台，默认项目选择EntityFrameworkCore并设定Web为解决方案的启动项目

执行命令 Add-Migration InitialCreate

成功后看Migrations文件夹里面生成的文件

然后执行命令 Update-Database

成功后就可以看到在数据库中生成的数据库和表了

8、来到Application项目中，添加一个定义的实体类文件夹，并在文件夹中添加一个IAppservice接口和一个AppService类

using Abp.Application.Services;
using System;
using System.Collections.Generic;
using System.Text;

namespace Ocean.User
{
    public interface IUserAppService : IApplicationService
    {
        List<Entities.User> GetUsers();

        void UpdateUser(Entities.User entity);

        void CreateUser(Entities.User entity);

        void DeleteUser(int Id);
    }
}

using Abp.Domain.Repositories;
using Ocean.Entities;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;

namespace Ocean.User
{
    public class UserAppService : OceanAppServiceBase, IUserAppService
    {
        private readonly IRepository<Entities.User> _UserRepository;
        public UserAppService(IRepository<Entities.User> userRepository)
        {
            _UserRepository = userRepository;
        }

        public void CreateUser(Entities.User entity)
        {
            Logger.Info($"Created a User for entity at:{DateTime.Now}");
            try
            {
                _UserRepository.Insert(entity);
            }
            catch (Exception ex)
            {
                Logger.Error(ex.ToString());
            }
        }

        public void DeleteUser(int Id)
        {
            Logger.Info($"Deleted a User for Id at:{DateTime.Now}");
            try
            {
                _UserRepository.Delete(Id);
            }
            catch (Exception ex)
            {
                Logger.Error(ex.ToString());
            }
        }

        public List<Entities.User> GetUsers()
        {
            List<Entities.User> list = new List<Entities.User>();
            Logger.Info($"Get Users List at:{DateTime.Now}");
            try
            {
                list = _UserRepository.GetAll().ToList();
            }
            catch (Exception ex)
            {
                Logger.Error(ex.ToString());
            }
            return list;
        }

        public void UpdateUser(Entities.User entity)
        {
            Logger.Info($"Updated a User for entity at:{DateTime.Now}");
            try
            {
                _UserRepository.Update(entity);
            }
            catch (Exception ex)
            {
                Logger.Error(ex.ToString());
            }
        }
    }
}

9、来到Web目录下，找到brower.json文件，右击选择管理Brower程序包，然后搜索Vue添加，这样就把Vue.js添加到项目中了

10、修改Startup下的OceanNavigationProvider文件，添加代码

public override void SetNavigation(INavigationProviderContext context)
        {
            context.Manager.MainMenu
                .AddItem(
                    new MenuItemDefinition(
                        PageNames.Home,
                        L("HomePage"),
                        url: "",
                        icon: "fa fa-home"
                        )
                ).AddItem(
                    new MenuItemDefinition(
                        PageNames.About,
                        L("About"),
                        url: "Home/About",
                        icon: "fa fa-info"
                        )
                ).AddItem(
                    new MenuItemDefinition(
                        PageNames.User,
                        L("User"),
                        url: "User/Index",
                        icon: "fa fa-user"
                        )
                );
        }

别忘了打开PageNames文件，添加代码

public class PageNames
    {
        public const string Home = "Home";
        public const string About = "About";
        public const string User = "User";
    }

11、在Controller文件夹添加控制器UserController

namespace Ocean.Web.Controllers
{
    public class UserController : OceanControllerBase
    {
        // GET: /<controller>/
        public ActionResult Index()
        {
            return View();
        }
    }
}

并在Views文件夹添加User文件夹并添加Index.cshtml

@using Ocean.Web.Startup
@{
    ViewBag.ActiveMenu = PageNames.User;
}

<div id="userApp">
    <div class="row">
        <div class="col-md-12">
            <button data-toggle="modal" data-target="#userModal" class="btn btn-primary pull-right"><i class="fa fa-plus"></i>添加用户</button>
        </div>
    </div>
    <div class="row">
        <table class="table">
            <thead>
                <tr>
                    <th>用户Id</th>
                    <th>用户名</th>
                    <th>真实姓名</th>
                    <th>用户邮箱</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="user in userList">
                    <td><a href="javascript:void(0)" v-on:click="updateUser(user)">{{user.id}}</a></td>
                    <td>{{user.userName}}</td>
                    <td>{{user.realName}}</td>
                    <td>{{user.email}}</td>
                </tr>
            </tbody>
        </table>
    </div>

    <div class="modal fade" id="userModal" tabindex="-1" role="dialog" data-backdrop="static">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <form name="userForm" role="form" novalidate class="form-validation">
                    <div class="modal-header">
                        <h4 class="modal-title">
                            <span v-if="userModel.id">编辑用户</span>
                            <span v-if="!userModel.id">添加用户</span>
                        </h4>
                    </div>
                    <div class="modal-body">
                        <input type="hidden" v-model="userModel.id" />
                        <div class="form-group">
                            <label>用户名</label>
                            <input class="form-control" type="text" v-model="userModel.userName" required>
                        </div>
                        <div class="form-group">
                            <label>真实姓名</label>
                            <input class="form-control" type="text" v-model="userModel.realName" required>
                        </div>
                        <div class="form-group">
                            <label>用户邮箱</label>
                            <input class="form-control" type="text" v-model="userModel.email" required>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">@L("Cancel")</button>
                        <button type="button" class="btn btn-primary blue" v-on:click="createUser"><i class="fa fa-save"></i> <span>@L("Save")</span></button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

@section scripts{
    <script src="~/lib/vue/dist/vue.js"></script>
    <script src="~/js/views/user/index.js"></script>
} 

对应位置添加js文件

//abp的调用接口abp.services.app.user
var _userService = abp.services.app.user;
var appVue = new Vue({
    el: "#userApp",
    data: {
        userModel: {
            id: 0,
            userName: '',
            realName: '',
            email: ''
        },
        userList: []
    },
    methods: {
        getUsers: function () {
            var own = this;
            _userService.getUsers().done(function (result) {
                own.userList = result;
            });
        },
        createUser: function () {
            var own = this;
            if (own.userModel.id > 0) {
                _userService.updateUser(own.userModel).done(function () {
                    location.reload();
                })
            }
            else {
                _userService.createUser(own.userModel).done(function () {
                    location.reload();
                });
            }
        },
        updateUser: function (user) {
            var own = this;
            own.userModel = user;
            $('#userModal').modal();
        }
    }
});
appVue.getUsers();

最终效果图

最后：增改查都实现了，就是删除没有实现。删除的实现就靠你们了。我要去巩固Vue.js了