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没有定义的接口，本文的增删改查IRepository都已经定义了，

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

附IRepository定义的接口

  1 using System;
  2 using System.Collections.Generic;
  3 using System.Linq;
  4 using System.Linq.Expressions;
  5 using System.Threading.Tasks;
  6 using Abp.Dependency;
  7 using Abp.Domain.Entities;
  8 
  9 namespace Abp.Domain.Repositories
 10 {
 11     //
 12     // 摘要:
 13     //     This interface is implemented by all repositories to ensure implementation of
 14     //     fixed methods.
 15     //
 16     // 类型参数:
 17     //   TEntity:
 18     //     Main Entity type this repository works on
 19     //
 20     //   TPrimaryKey:
 21     //     Primary key type of the entity
 22     public interface IRepository : IRepository, ITransientDependency where TEntity : class, IEntity
 23     {
 24         //
 25         // 摘要:
 26         //     Gets count of all entities in this repository.
 27         //
 28         // 返回结果:
 29         //     Count of entities
 30         int Count();
 31         //
 32         // 摘要:
 33         //     Gets count of all entities in this repository based on given predicate.
 34         //
 35         // 参数:
 36         //   predicate:
 37         //     A method to filter count
 38         //
 39         // 返回结果:
 40         //     Count of entities
 41         int Count(Expressionbool>> predicate);
 42         //
 43         // 摘要:
 44         //     Gets count of all entities in this repository based on given predicate.
 45         //
 46         // 参数:
 47         //   predicate:
 48         //     A method to filter count
 49         //
 50         // 返回结果:
 51         //     Count of entities
 52         Task<int> CountAsync(Expressionbool>> predicate);
 53         //
 54         // 摘要:
 55         //     Gets count of all entities in this repository.
 56         //
 57         // 返回结果:
 58         //     Count of entities
 59         Task<int> CountAsync();
 60         //
 61         // 摘要:
 62         //     Deletes an entity.
 63         //
 64         // 参数:
 65         //   entity:
 66         //     Entity to be deleted
 67         void Delete(TEntity entity);
 68         //
 69         // 摘要:
 70         //     Deletes an entity by primary key.
 71         //
 72         // 参数:
 73         //   id:
 74         //     Primary key of the entity
 75         void Delete(TPrimaryKey id);
 76         //
 77         // 摘要:
 78         //     Deletes many entities by function. Notice that: All entities fits to given predicate
 79         //     are retrieved and deleted. This may cause major performance problems if there
 80         //     are too many entities with given predicate.
 81         //
 82         // 参数:
 83         //   predicate:
 84         //     A condition to filter entities
 85         void Delete(Expressionbool>> predicate);
 86         //
 87         // 摘要:
 88         //     Deletes an entity by primary key.
 89         //
 90         // 参数:
 91         //   id:
 92         //     Primary key of the entity
 93         Task DeleteAsync(TPrimaryKey id);
 94         //
 95         // 摘要:
 96         //     Deletes many entities by function. Notice that: All entities fits to given predicate
 97         //     are retrieved and deleted. This may cause major performance problems if there
 98         //     are too many entities with given predicate.
 99         //
100         // 参数:
101         //   predicate:
102         //     A condition to filter entities
103         Task DeleteAsync(Expressionbool>> predicate);
104         //
105         // 摘要:
106         //     Deletes an entity.
107         //
108         // 参数:
109         //   entity:
110         //     Entity to be deleted
111         Task DeleteAsync(TEntity entity);
112         //
113         // 摘要:
114         //     Gets an entity with given given predicate or null if not found.
115         //
116         // 参数:
117         //   predicate:
118         //     Predicate to filter entities
119         TEntity FirstOrDefault(Expressionbool>> predicate);
120         //
121         // 摘要:
122         //     Gets an entity with given primary key or null if not found.
123         //
124         // 参数:
125         //   id:
126         //     Primary key of the entity to get
127         //
128         // 返回结果:
129         //     Entity or null
130         TEntity FirstOrDefault(TPrimaryKey id);
131         //
132         // 摘要:
133         //     Gets an entity with given given predicate or null if not found.
134         //
135         // 参数:
136         //   predicate:
137         //     Predicate to filter entities
138         Task FirstOrDefaultAsync(Expressionbool>> predicate);
139         //
140         // 摘要:
141         //     Gets an entity with given primary key or null if not found.
142         //
143         // 参数:
144         //   id:
145         //     Primary key of the entity to get
146         //
147         // 返回结果:
148         //     Entity or null
149         Task FirstOrDefaultAsync(TPrimaryKey id);
150         //
151         // 摘要:
152         //     Gets an entity with given primary key.
153         //
154         // 参数:
155         //   id:
156         //     Primary key of the entity to get
157         //
158         // 返回结果:
159         //     Entity
160         TEntity Get(TPrimaryKey id);
161         //
162         // 摘要:
163         //     Used to get a IQueryable that is used to retrieve entities from entire table.
164         //
165         // 返回结果:
166         //     IQueryable to be used to select entities from database
167         IQueryable GetAll();
168         //
169         // 摘要:
170         //     Used to get a IQueryable that is used to retrieve entities from entire table.
171         //     One or more
172         //
173         // 参数:
174         //   propertySelectors:
175         //     A list of include expressions.
176         //
177         // 返回结果:
178         //     IQueryable to be used to select entities from database
179         IQueryable GetAllIncluding(params Expressionobject>>[] propertySelectors);
180         //
181         // 摘要:
182         //     Used to get all entities based on given predicate.
183         //
184         // 参数:
185         //   predicate:
186         //     A condition to filter entities
187         //
188         // 返回结果:
189         //     List of all entities
190         List GetAllList(Expressionbool>> predicate);
191         //
192         // 摘要:
193         //     Used to get all entities.
194         //
195         // 返回结果:
196         //     List of all entities
197         List GetAllList();
198         //
199         // 摘要:
200         //     Used to get all entities based on given predicate.
201         //
202         // 参数:
203         //   predicate:
204         //     A condition to filter entities
205         //
206         // 返回结果:
207         //     List of all entities
208         Task> GetAllListAsync(Expressionbool>> predicate);
209         //
210         // 摘要:
211         //     Used to get all entities.
212         //
213         // 返回结果:
214         //     List of all entities
215         Task> GetAllListAsync();
216         //
217         // 摘要:
218         //     Gets an entity with given primary key.
219         //
220         // 参数:
221         //   id:
222         //     Primary key of the entity to get
223         //
224         // 返回结果:
225         //     Entity
226         Task GetAsync(TPrimaryKey id);
227         //
228         // 摘要:
229         //     Inserts a new entity.
230         //
231         // 参数:
232         //   entity:
233         //     Inserted entity
234         TEntity Insert(TEntity entity);
235         //
236         // 摘要:
237         //     Inserts a new entity and gets it's Id. It may require to save current unit of
238         //     work to be able to retrieve id.
239         //
240         // 参数:
241         //   entity:
242         //     Entity
243         //
244         // 返回结果:
245         //     Id of the entity
246         TPrimaryKey InsertAndGetId(TEntity entity);
247         //
248         // 摘要:
249         //     Inserts a new entity and gets it's Id. It may require to save current unit of
250         //     work to be able to retrieve id.
251         //
252         // 参数:
253         //   entity:
254         //     Entity
255         //
256         // 返回结果:
257         //     Id of the entity
258         Task InsertAndGetIdAsync(TEntity entity);
259         //
260         // 摘要:
261         //     Inserts a new entity.
262         //
263         // 参数:
264         //   entity:
265         //     Inserted entity
266         Task InsertAsync(TEntity entity);
267         //
268         // 摘要:
269         //     Inserts or updates given entity depending on Id's value.
270         //
271         // 参数:
272         //   entity:
273         //     Entity
274         TEntity InsertOrUpdate(TEntity entity);
275         //
276         // 摘要:
277         //     Inserts or updates given entity depending on Id's value. Also returns Id of the
278         //     entity. It may require to save current unit of work to be able to retrieve id.
279         //
280         // 参数:
281         //   entity:
282         //     Entity
283         //
284         // 返回结果:
285         //     Id of the entity
286         TPrimaryKey InsertOrUpdateAndGetId(TEntity entity);
287         //
288         // 摘要:
289         //     Inserts or updates given entity depending on Id's value. Also returns Id of the
290         //     entity. It may require to save current unit of work to be able to retrieve id.
291         //
292         // 参数:
293         //   entity:
294         //     Entity
295         //
296         // 返回结果:
297         //     Id of the entity
298         Task InsertOrUpdateAndGetIdAsync(TEntity entity);
299         //
300         // 摘要:
301         //     Inserts or updates given entity depending on Id's value.
302         //
303         // 参数:
304         //   entity:
305         //     Entity
306         Task InsertOrUpdateAsync(TEntity entity);
307         //
308         // 摘要:
309         //     Creates an entity with given primary key without database access.
310         //
311         // 参数:
312         //   id:
313         //     Primary key of the entity to load
314         //
315         // 返回结果:
316         //     Entity
317         TEntity Load(TPrimaryKey id);
318         //
319         // 摘要:
320         //     Gets count of all entities in this repository based on given predicate (use this
321         //     overload if expected return value is greather than System.Int32.MaxValue).
322         //
323         // 参数:
324         //   predicate:
325         //     A method to filter count
326         //
327         // 返回结果:
328         //     Count of entities
329         long LongCount(Expressionbool>> predicate);
330         //
331         // 摘要:
332         //     Gets count of all entities in this repository (use if expected return value is
333         //     greather than System.Int32.MaxValue.
334         //
335         // 返回结果:
336         //     Count of entities
337         long LongCount();
338         //
339         // 摘要:
340         //     Gets count of all entities in this repository (use if expected return value is
341         //     greather than System.Int32.MaxValue.
342         //
343         // 返回结果:
344         //     Count of entities
345         Task<long> LongCountAsync();
346         //
347         // 摘要:
348         //     Gets count of all entities in this repository based on given predicate (use this
349         //     overload if expected return value is greather than System.Int32.MaxValue).
350         //
351         // 参数:
352         //   predicate:
353         //     A method to filter count
354         //
355         // 返回结果:
356         //     Count of entities
357         Task<long> LongCountAsync(Expressionbool>> predicate);
358         //
359         // 摘要:
360         //     Used to run a query over entire entities. Abp.Domain.Uow.UnitOfWorkAttribute
361         //     attribute is not always necessary (as opposite to Abp.Domain.Repositories.IRepository`2.GetAll)
362         //     if queryMethod finishes IQueryable with ToList, FirstOrDefault etc..
363         //
364         // 参数:
365         //   queryMethod:
366         //     This method is used to query over entities
367         //
368         // 类型参数:
369         //   T:
370         //     Type of return value of this method
371         //
372         // 返回结果:
373         //     Query result
374         T Query(Func, T> queryMethod);
375         //
376         // 摘要:
377         //     Gets exactly one entity with given predicate. Throws exception if no entity or
378         //     more than one entity.
379         //
380         // 参数:
381         //   predicate:
382         //     Entity
383         TEntity Single(Expressionbool>> predicate);
384         //
385         // 摘要:
386         //     Gets exactly one entity with given predicate. Throws exception if no entity or
387         //     more than one entity.
388         //
389         // 参数:
390         //   predicate:
391         //     Entity
392         Task SingleAsync(Expressionbool>> predicate);
393         //
394         // 摘要:
395         //     Updates an existing entity.
396         //
397         // 参数:
398         //   entity:
399         //     Entity
400         TEntity Update(TEntity entity);
401         //
402         // 摘要:
403         //     Updates an existing entity.
404         //
405         // 参数:
406         //   id:
407         //     Id of the entity
408         //
409         //   updateAction:
410         //     Action that can be used to change values of the entity
411         //
412         // 返回结果:
413         //     Updated entity
414         TEntity Update(TPrimaryKey id, Action updateAction);
415         //
416         // 摘要:
417         //     Updates an existing entity.
418         //
419         // 参数:
420         //   id:
421         //     Id of the entity
422         //
423         //   updateAction:
424         //     Action that can be used to change values of the entity
425         //
426         // 返回结果:
427         //     Updated entity
428         Task UpdateAsync(TPrimaryKey id, Func updateAction);
429         //
430         // 摘要:
431         //     Updates an existing entity.
432         //
433         // 参数:
434         //   entity:
435         //     Entity
436         Task UpdateAsync(TEntity entity);
437     }
438 }

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

 1 using Abp.Domain.Entities;
 2 using System;
 3 using System.Collections.Generic;
 4 using System.ComponentModel.DataAnnotations;
 5 using System.Text;
 6 
 7 namespace Ocean.Entities
 8 {
 9     public class User : Entity
10     {
11         /// 

12         /// 用户名
13         /// 
14         [MaxLength(500)]
15         public virtual string UserName { get; set; }
16 
17         /// 

18         /// 真实姓名
19         /// 
20         [MaxLength(500)]
21         public virtual string RealName { get; set; }
22 
23         /// 

24         /// 邮箱
25         /// 
26         [MaxLength(50)]
27         public virtual string Email { get; set; }
28 
29         /// 

30         /// 添加时间
31         /// 
32         public virtual DateTime CreationTime { get; set; } = DateTime.Now;
33 
34         /// 

35         /// 用户状态
36         /// 
37         public virtual int Status { get; set; } = 0;
38     }
39 }

 1 using Abp.Domain.Repositories;
 2 using System;
 3 using System.Collections.Generic;
 4 using System.Text;
 5 
 6 namespace Ocean.IRepositories
 7 {
 8     public interface IUserRepository : IRepository
 9     {
10         //自定义除增删改查基本操作之外的其余方法接口
11     }
12 }

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

 1 using Ocean.IRepositories;
 2 using System;
 3 using System.Collections.Generic;
 4 using System.Text;
 5 
 6 namespace Ocean.EntityFrameworkCore.Repositories
 7 {
 8     public class UserRepository : IUserRepository
 9     {
10         //
11     }
12 }

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

 1 using Abp.EntityFrameworkCore;
 2 using Microsoft.EntityFrameworkCore;
 3 using Ocean.Entities;
 4 
 5 namespace Ocean.EntityFrameworkCore
 6 {
 7     public class OceanDbContext : AbpDbContext
 8     {
 9         //Add DbSet properties for your entities...
10         public virtual DbSet User { get; set; }
11 
12         public OceanDbContext(DbContextOptions options) 
13             : base(options)
14         {
15             //
16         }
17     }
18 }

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

执行命令 Add-Migration InitialCreate

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

然后执行命令 Update-Database

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

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

 1 using Abp.Application.Services;
 2 using System;
 3 using System.Collections.Generic;
 4 using System.Text;
 5 
 6 namespace Ocean.User
 7 {
 8     public interface IUserAppService : IApplicationService
 9     {
10         List GetUsers();
11 
12         void UpdateUser(Entities.User entity);
13 
14         void CreateUser(Entities.User entity);
15 
16         void DeleteUser(int Id);
17     }
18 }

 1 using Abp.Domain.Repositories;
 2 using Ocean.Entities;
 3 using System;
 4 using System.Collections.Generic;
 5 using System.Linq;
 6 using System.Text;
 7 
 8 namespace Ocean.User
 9 {
10     public class UserAppService : OceanAppServiceBase, IUserAppService
11     {
12         private readonly IRepository _UserRepository;
13         public UserAppService(IRepository userRepository)
14         {
15             _UserRepository = userRepository;
16         }
17 
18         public void CreateUser(Entities.User entity)
19         {
20             Logger.Info($"Created a User for entity at:{DateTime.Now}");
21             try
22             {
23                 _UserRepository.Insert(entity);
24             }
25             catch (Exception ex)
26             {
27                 Logger.Error(ex.ToString());
28             }
29         }
30 
31         public void DeleteUser(int Id)
32         {
33             Logger.Info($"Deleted a User for Id at:{DateTime.Now}");
34             try
35             {
36                 _UserRepository.Delete(Id);
37             }
38             catch (Exception ex)
39             {
40                 Logger.Error(ex.ToString());
41             }
42         }
43 
44         public List GetUsers()
45         {
46             List list = new List();
47             Logger.Info($"Get Users List at:{DateTime.Now}");
48             try
49             {
50                 list = _UserRepository.GetAll().ToList();
51             }
52             catch (Exception ex)
53             {
54                 Logger.Error(ex.ToString());
55             }
56             return list;
57         }
58 
59         public void UpdateUser(Entities.User entity)
60         {
61             Logger.Info($"Updated a User for entity at:{DateTime.Now}");
62             try
63             {
64                 _UserRepository.Update(entity);
65             }
66             catch (Exception ex)
67             {
68                 Logger.Error(ex.ToString());
69             }
70         }
71     }
72 }

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

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

 1 public override void SetNavigation(INavigationProviderContext context)
 2         {
 3             context.Manager.MainMenu
 4                 .AddItem(
 5                     new MenuItemDefinition(
 6                         PageNames.Home,
 7                         L("HomePage"),
 8                         url: "",
 9                         icon: "fa fa-home"
10                         )
11                 ).AddItem(
12                     new MenuItemDefinition(
13                         PageNames.About,
14                         L("About"),
15                         url: "Home/About",
16                         icon: "fa fa-info"
17                         )
18                 ).AddItem(
19                     new MenuItemDefinition(
20                         PageNames.User,
21                         L("User"),
22                         url: "User/Index",
23                         icon: "fa fa-user"
24                         )
25                 );
26         }

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

1 public class PageNames
2     {
3         public const string Home = "Home";
4         public const string About = "About";
5         public const string User = "User";
6     }

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

 1 namespace Ocean.Web.Controllers
 2 {
 3     public class UserController : OceanControllerBase
 4     {
 5         // GET: //
 6         public ActionResult Index()
 7         {
 8             return View();
 9         }
10     }
11 }

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

 1 @using Ocean.Web.Startup
 2 @{
 3     ViewBag.ActiveMenu = PageNames.User;
 4 }
 5 
 6 
"userApp">
 7     
class="row">
 8         
class="col-md-12">
 9             "modal" data-target="#userModal" class="btn btn-primary pull-right">class="fa fa-plus">添加用户
10         
11     
12     
class="row">
13         class="table">
14151617181920212223for="user in userList">
24252627282930
             

                 

                     
用户Id
                     
用户名
                     
真实姓名
                     
用户邮箱
                 
             
             

                 
                     
"javascript:void(0)" v-on:click="updateUser(user)">{{user.id}}
                     
{{user.userName}}
                     
{{user.realName}}
                     
{{user.email}}
                 
             
         
31     
32 
33     
class="modal fade" id="userModal" tabindex="-1" role="dialog" data-backdrop="static">
34         
class="modal-dialog" role="document">
35             
class="modal-content">
36                 
"userForm" role="form" novalidate class="form-validation">
37                     
class="modal-header">
38                         
class="modal-title">
39                             if="userModel.id">编辑用户
40                             if="!userModel.id">添加用户
41                         
42                     
43                     
class="modal-body">
44                         "hidden" v-model="userModel.id" />
45                         
class="form-group">
46                             用户名
47                             class="form-control" type="text" v-model="userModel.userName" required>
48                         
49                         
class="form-group">
50                             真实姓名
51                             class="form-control" type="text" v-model="userModel.realName" required>
52                         
53                         
class="form-group">
54                             用户邮箱
55                             class="form-control" type="text" v-model="userModel.email" required>
56                         
57                     
58                     
class="modal-footer">
59                         "button" class="btn btn-default" data-dismiss="modal">@L("Cancel")
60                         "button" class="btn btn-primary blue" v-on:click="createUser">class="fa fa-save"> @L("Save")
61                     
62                 
63             
64         
65     
66 
67 
68 @section scripts{
69     
70     
71 } 

对应位置添加js文件

 1 //abp的调用接口abp.services.app.user
 2 var _userService = abp.services.app.user;
 3 var appVue = new Vue({
 4     el: "#userApp",
 5     data: {
 6         userModel: {
 7             id: 0,
 8             userName: '',
 9             realName: '',
10             email: ''
11         },
12         userList: []
13     },
14     methods: {
15         getUsers: function () {
16             var own = this;
17             _userService.getUsers().done(function (result) {
18                 own.userList = result;
19             });
20         },
21         createUser: function () {
22             var own = this;
23             if (own.userModel.id > 0) {
24                 _userService.updateUser(own.userModel).done(function () {
25                     location.reload();
26                 })
27             }
28             else {
29                 _userService.createUser(own.userModel).done(function () {
30                     location.reload();
31                 });
32             }
33         },
34         updateUser: function (user) {
35             var own = this;
36             own.userModel = user;
37             $('#userModal').modal();
38         }
39     }
40 });
41 appVue.getUsers();

最终效果图

 

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

转载于:https://www.cnblogs.com/wangyulong/p/7154116.html