这是一篇学习笔记. angular 5 正式版都快出了, 不过主要是性能升级.

我认为angular 4还是很适合企业的, 就像.net一样.

我用的是windows 10

安装工具:

git for windows: 官网很慢, 所以找一个镜像站下载: https://github.com/waylau/git-for-win, 淘宝镜像的速度还是蛮快的:

安装的时候, 建议选择这个, 会添加很多命令行工具:

nodejs: 去官网下载就行: https://nodejs.org/en/

正常安装即可. npm的版本不要低于5.0吧:

angular-cli, 官网: https://github.com/angular/angular-cli

  1. npm install -g @angular/cli

visual studio codehttps://code.visualstudio.com/

and visual studio 2017 of course.

建立angular项目

进入命令行在某个地方执行命令:

  1. ng new client-panel

这就会建立一个client-panel文件夹, 里面是该项目的文件, 然后它会立即执行npm install命令(这里不要使用淘宝的cnpm进行安装, 有bug), 稍等一会就会结束.

使用vscode打开该目录, 然后在vscode里面打开terminal:

terminal默认的可能是powershell, 如果你感觉powershell有点慢的话, 可以换成bash(安装git时候带的)或者windows command line等.

第一次打开terminal的时候, vscode上方会提示你配置terminal, 这时就可以更换默认的terminal. 否则的话, 你可以点击菜单file-reference-settings, 自己选择一个terminal应用:

同样可以安装几个vscode的插件:

然后试运行一下项目, 在terminal执行 ng serve, 如果没问题的话, 大概是这样:

浏览器运行: http://localhost:4200

安装bootstrap4等:

安装bootstrap4, tether, jquery等:

  1. npm install bootstrap@4.0.0-beta.2 tether jquery --save

安装成功后, 打开 .angular-cli.json, 把相关的css和js添加进去:

然后在运行试试 ng serve, 刷新:

字体已经改变, bootstrap起作用了.

建立Components

建立dashboard:

terminal执行

  1. ng g component components/dashboard

执行成功后会生成4个文件:

并且会自动在app.module.ts里面声明:

建立其他 components:

  1. ng g component components/clients
  2. ng g component components/clientDetails
  3. ng g component components/addClient
  4. ng g component components/editClient
  5. ng g component components/navbar
  6. ng g component components/sidebar
    ng g component components/login
    ng g component components/register
    ng g component components/settings
    ng g component components/pageNotFound

建立Route路由

  1. import { BrowserModule } from '@angular/platform-browser';
  2. import { NgModule } from '@angular/core';
  3. import { RouterModule, Routes } from '@angular/router';
  4.  
  5. import { AppComponent } from './app.component';
  6. import { DashboardComponent } from './components/dashboard/dashboard.component';
  7. import { ClientsComponent } from './components/clients/clients.component';
  8. import { ClientDetailsComponent } from './components/client-details/client-details.component';
  9. import { AddClientComponent } from './components/add-client/add-client.component';
  10. import { EditClientComponent } from './components/edit-client/edit-client.component';
  11. import { NavbarComponent } from './components/navbar/navbar.component';
  12. import { SidebarComponent } from './components/sidebar/sidebar.component';
  13. import { LoginComponent } from './components/login/login.component';
  14. import { RegisterComponent } from './components/register/register.component';
  15. import { SettingsComponent } from './components/settings/settings.component';
  16. import { PageNotFoundComponent } from './components/page-not-found/page-not-found.component';
  17.  
  18. const appRoutes: Routes = [
  19. { path: '', component: DashboardComponent },
  20. { path: 'register', component: RegisterComponent },
  21. { path: 'login', component: LoginComponent }
  22. ];
  23.  
  24. @NgModule({
  25. declarations: [
  26. AppComponent,
  27. DashboardComponent,
  28. ClientsComponent,
  29. ClientDetailsComponent,
  30. AddClientComponent,
  31. EditClientComponent,
  32. NavbarComponent,
  33. SidebarComponent,
  34. LoginComponent,
  35. RegisterComponent,
  36. SettingsComponent,
  37. PageNotFoundComponent
  38. ],
  39. imports: [
  40. BrowserModule,
  41. RouterModule.forRoot(appRoutes)
  42. ],
  43. providers: [],
  44. bootstrap: [AppComponent]
  45. })
  46. export class AppModule { }

添加router-outlet:

打开app.component.html, 清空内容, 添加一个div(可以输入div.container然后按tab健):

  1. <div class="container">
  2. <router-outlet></router-outlet>
  3. </div>

现在刷新浏览器, 大约这样:

添加navbar:

修改navbar.component.html:

  1. <nav class="navbar navbar-expand-md navbar-light bg-light">
  2. <div class="container">
  3. <a class="navbar-brand" href="#">Client Panel</a>
  4. <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault"
  5. aria-expanded="false" aria-label="Toggle navigation">
  6. <span class="navbar-toggler-icon"></span>
  7. </button>
  8.  
  9. <div class="collapse navbar-collapse" id="navbarsExampleDefault">
  10. <ul class="navbar-nav mr-auto">
  11. <li class="nav-item">
  12. <a class="nav-link" href="#" routerLink="/">Dashboard </a>
  13. </li>
  14. </ul>
  15. <ul class="navbar-nav ml-auto">
  16. <li class="nav-item">
  17. <a class="nav-link" href="#" routerLink="/register">Register </a>
  18. </li>
  19. <li class="nav-item">
  20. <a class="nav-link" href="#" routerLink="/login">Login </a>
  21. </li>
  22. </ul>
  23. </div>
  24. </div>
  25. </nav>

修改app.component.html:

  1. <app-navbar></app-navbar>
  2. <div class="container">
  3. <router-outlet></router-outlet>
  4. </div>

运行:

建立Service

建立一个client.service:

  1. ng g service services/client

然后在app.module.ts添加引用:

  1. // Services Imports
  2. import { ClientService } from "./services/client.service";

并添加在providers里:

  1. providers: [
  2. ClientService
  3. ],

前端先暂时到这, 现在开始搞后端 web api.

建立asp.net core 2.0 的 Web api项目

web api项目源码: https://github.com/solenovex/asp.net-core-2.0-web-api-boilerplate

项目列表如图:

AspNetIdentityAuthorizationServer是一个单独的authorization server, 这里暂时还没用到, 它的端口是5000, 默认不启动.

CoreApi.Infrastructure 里面有一些基类和接口, 还放了一个公共的工具类等.

CoreApi.Models就是 models/entities

CoreApi.DataContext 里面就是DbContext相关的

CoreApi.Repositories 里面是Repositories

CoreApi.Services 里面就是各种services

CoreApi.ViewModels 里面就是各种ViewModels或者叫Dtos

CoreApi.Web是web启动项目.

SharedSettings是横跨authorization server和 web api的一些公共设置.

上面说的这些都没什么用, 下面开始建立Client的api.

建立Client Model(或者叫Entity)

在CoreApi.Models建立文件夹Angular, 然后建立Client.cs:

  1. using CoreApi.Infrastructure.Features.Common;
  2. using Microsoft.EntityFrameworkCore;
  3. using Microsoft.EntityFrameworkCore.Metadata.Builders;
  4.  
  5. namespace CoreApi.Models.Angular
  6. {
  7. public class Client : EntityBase
  8. {
  9. public decimal Balance { get; set; }
  10. public string Email { get; set; }
  11. public string FirstName { get; set; }
  12. public string LastName { get; set; }
  13. public string Phone { get; set; }
  14. }
  15.  
  16. public class ClientConfiguration : EntityBaseConfiguration<Client>
  17. {
  18. public override void ConfigureDerived(EntityTypeBuilder<Client> builder)
  19. {
  20. builder.Property(x => x.Balance).HasColumnType("decimal(18,2)");
  21. builder.Property(x => x.Email).IsRequired().HasMaxLength();
  22. builder.Property(x => x.FirstName).IsRequired().HasMaxLength();
  23. builder.Property(x => x.LastName).IsRequired().HasMaxLength();
  24. builder.Property(x => x.Phone).HasMaxLength();
  25. }
  26. }
  27. }

其中父类EntityBase里面含有一些通用属性,Id, CreateUser, UpdateUser, CreateTime, UpdateTime, LastAction, 这些是我公司做项目必须的, 你们随意.

下面ClientConfiguration是针对Client的fluent api配置类. 他的父类EntityBaseConfiguration实现了EF的IEntityTypeConfiguration接口, 并在父类里面针对EntityBase那些属性使用fluent api做了限制:

  1. namespace CoreApi.Infrastructure.Features.Common
  2. {
  3. public abstract class EntityBaseConfiguration<T> : IEntityTypeConfiguration<T> where T : EntityBase
  4. {
  5. public virtual void Configure(EntityTypeBuilder<T> builder)
  6. {
  7. builder.HasKey(e => e.Id);
  8. builder.Property(x => x.CreateTime).IsRequired();
  9. builder.Property(x => x.UpdateTime).IsRequired();
  10. builder.Property(x => x.CreateUser).IsRequired().HasMaxLength();
  11. builder.Property(x => x.UpdateUser).IsRequired().HasMaxLength();
  12. builder.Property(x => x.LastAction).IsRequired().HasMaxLength();
  13.  
  14. ConfigureDerived(builder);
  15. }
  16.  
  17. public abstract void ConfigureDerived(EntityTypeBuilder<T> b);
  18. }
  19. }

弄完Model和它的配置之后, 就添加到DbContext里面. 打开CoreApi.DataContext的CoreContext, 添加Model和配置:

  1. protected override void OnModelCreating(ModelBuilder modelBuilder)
  2. {
  3. base.OnModelCreating(modelBuilder);
  4. modelBuilder.HasDefaultSchema(AppSettings.DefaultSchema);
  5.  
  6. modelBuilder.ApplyConfiguration(new UploadedFileConfiguration());
  7. modelBuilder.ApplyConfiguration(new ClientConfiguration());
  8. }
  1. public DbSet<UploadedFile> UploadedFiles { get; set; }
  2. public DbSet<Client> Clients { get; set; }

然后建立ClientRepository

在CoreApi.Repositories里面建立Angular目录, 建立ClientRepository.cs:

  1. namespace CoreApi.Repositories.Angular
  2. {
  3. public interface IClientRepository : IEntityBaseRepository<Client> { }
  4.  
  5. public class ClientRepository : EntityBaseRepository<Client>, IClientRepository
  6. {
  7. public ClientRepository(IUnitOfWork unitOfWork) : base(unitOfWork)
  8. {
  9. }
  10. }
  11. }

图省事, 我把repository和它的interface放在一个文件了.

IEntityBaseRepository<T>定义了一些常用的方法:

  1. namespace CoreApi.DataContext.Infrastructure
  2. {
  3. public interface IEntityBaseRepository<T> where T : class, IEntityBase, new()
  4. {
  5. IQueryable<T> All { get; }
  6. IQueryable<T> AllIncluding(params Expression<Func<T, object>>[] includeProperties);
  7.  
  8. int Count();
  9. Task<int> CountAsync();
  10. T GetSingle(int id);
  11. Task<T> GetSingleAsync(int id);
  12. T GetSingle(Expression<Func<T, bool>> predicate);
  13. Task<T> GetSingleAsync(Expression<Func<T, bool>> predicate);
  14. T GetSingle(Expression<Func<T, bool>> predicate, params Expression<Func<T, object>>[] includeProperties);
  15. Task<T> GetSingleAsync(Expression<Func<T, bool>> predicate, params Expression<Func<T, object>>[] includeProperties);
  16. IQueryable<T> FindBy(Expression<Func<T, bool>> predicate);
  17. void Add(T entity);
  18. void Update(T entity);
  19. void Delete(T entity);
  20. void DeleteWhere(Expression<Func<T, bool>> predicate);
  21. void AddRange(IEnumerable<T> entities);
  22. void DeleteRange(IEnumerable<T> entities);
  23. void Attach(T entity);
  24. void AttachRange(IEnumerable<T> entities);
  25. void Detach(T entity);
  26. void DetachRange(IEnumerable<T> entities);
  27. void AttachAsModified(T entity);
  28. }
  29. }

EntityBaseRepository<T>是它的实现:

  1. namespace CoreApi.DataContext.Infrastructure
  2. {
  3. public class EntityBaseRepository<T> : IEntityBaseRepository<T>
  4. where T : class, IEntityBase, new()
  5. {
  6. #region Properties
  7. protected CoreContext Context { get; }
  8.  
  9. public EntityBaseRepository(IUnitOfWork unitOfWork)
  10. {
  11. Context = unitOfWork as CoreContext;
  12. }
  13. #endregion
  14.  
  15. public virtual IQueryable<T> All => Context.Set<T>();
  16.  
  17. public virtual IQueryable<T> AllIncluding(params Expression<Func<T, object>>[] includeProperties)
  18. {
  19. IQueryable<T> query = Context.Set<T>();
  20. foreach (var includeProperty in includeProperties)
  21. {
  22. query = query.Include(includeProperty);
  23. }
  24. return query;
  25. }
  26.  
  27. public virtual int Count()
  28. {
  29. return Context.Set<T>().Count();
  30. }
  31.  
  32. public async Task<int> CountAsync()
  33. {
  34. return await Context.Set<T>().CountAsync();
  35. }
  36.  
  37. public T GetSingle(int id)
  38. {
  39. return Context.Set<T>().FirstOrDefault(x => x.Id == id);
  40. }
  41.  
  42. public async Task<T> GetSingleAsync(int id)
  43. {
  44. return await Context.Set<T>().FirstOrDefaultAsync(x => x.Id == id);
  45. }
  46.  
  47. public T GetSingle(Expression<Func<T, bool>> predicate)
  48. {
  49. return Context.Set<T>().FirstOrDefault(predicate);
  50. }
  51.  
  52. public async Task<T> GetSingleAsync(Expression<Func<T, bool>> predicate)
  53. {
  54. return await Context.Set<T>().FirstOrDefaultAsync(predicate);
  55. }
  56.  
  57. public T GetSingle(Expression<Func<T, bool>> predicate, params Expression<Func<T, object>>[] includeProperties)
  58. {
  59. IQueryable<T> query = Context.Set<T>();
  60. foreach (var includeProperty in includeProperties)
  61. {
  62. query = query.Include(includeProperty);
  63. }
  64. return query.Where(predicate).FirstOrDefault();
  65. }
  66.  
  67. public async Task<T> GetSingleAsync(Expression<Func<T, bool>> predicate, params Expression<Func<T, object>>[] includeProperties)
  68. {
  69. IQueryable<T> query = Context.Set<T>();
  70. foreach (var includeProperty in includeProperties)
  71. {
  72. query = query.Include(includeProperty);
  73. }
  74.  
  75. return await query.Where(predicate).FirstOrDefaultAsync();
  76. }
  77.  
  78. public virtual IQueryable<T> FindBy(Expression<Func<T, bool>> predicate)
  79. {
  80. return Context.Set<T>().Where(predicate);
  81. }
  82.  
  83. public virtual void Add(T entity)
  84. {
  85. Context.Set<T>().Add(entity);
  86. }
  87.  
  88. public virtual void Update(T entity)
  89. {
  90. EntityEntry<T> dbEntityEntry = Context.Entry(entity);
  91. dbEntityEntry.State = EntityState.Modified;
  92.  
  93. dbEntityEntry.Property(x => x.Id).IsModified = false;
  94. dbEntityEntry.Property(x => x.CreateUser).IsModified = false;
  95. dbEntityEntry.Property(x => x.CreateTime).IsModified = false;
  96. }
  97.  
  98. public virtual void Delete(T entity)
  99. {
  100. Context.Set<T>().Remove(entity);
  101. }
  102.  
  103. public virtual void AddRange(IEnumerable<T> entities)
  104. {
  105. Context.Set<T>().AddRange(entities);
  106. }
  107.  
  108. public virtual void DeleteRange(IEnumerable<T> entities)
  109. {
  110. foreach (var entity in entities)
  111. {
  112. Context.Set<T>().Remove(entity);
  113. }
  114. }
  115.  
  116. public virtual void DeleteWhere(Expression<Func<T, bool>> predicate)
  117. {
  118. IEnumerable<T> entities = Context.Set<T>().Where(predicate);
  119.  
  120. foreach (var entity in entities)
  121. {
  122. Context.Entry<T>(entity).State = EntityState.Deleted;
  123. }
  124. }
  125. public void Attach(T entity)
  126. {
  127. Context.Set<T>().Attach(entity);
  128. }
  129.  
  130. public void AttachRange(IEnumerable<T> entities)
  131. {
  132. foreach (var entity in entities)
  133. {
  134. Attach(entity);
  135. }
  136. }
  137.  
  138. public void Detach(T entity)
  139. {
  140. Context.Entry<T>(entity).State = EntityState.Detached;
  141. }
  142.  
  143. public void DetachRange(IEnumerable<T> entities)
  144. {
  145. foreach (var entity in entities)
  146. {
  147. Detach(entity);
  148. }
  149. }
  150.  
  151. public void AttachAsModified(T entity)
  152. {
  153. Attach(entity);
  154. Update(entity);
  155. }
  156.  
  157. }
  158. }

建立Client的ViewModels

在CoreApi.ViewModels建立Angular文件夹, 分别针对查询, 新增, 修改建立3个ViewModel(Dto):

ClientViewModel:

  1. namespace CoreApi.ViewModels.Angular
  2. {
  3. public class ClientViewModel : EntityBase
  4. {
  5. public decimal Balance { get; set; }
  6. public string Email { get; set; }
  7. public string FirstName { get; set; }
  8. public string LastName { get; set; }
  9. public string Phone { get; set; }
  10. }
  11. }

ClientCreationViewModel:

  1. namespace CoreApi.ViewModels.Angular
  2. {
  3. public class ClientCreationViewModel
  4. {
  5. public decimal Balance { get; set; }
  6.  
  7. [Required]
  8. [MaxLength()]
  9. public string Email { get; set; }
  10.  
  11. [Required]
  12. [MaxLength()]
  13. public string FirstName { get; set; }
  14.  
  15. [Required]
  16. [MaxLength()]
  17. public string LastName { get; set; }
  18.  
  19. [Required]
  20. [MaxLength()]
  21. public string Phone { get; set; }
  22. }
  23. }

ClientModificationViewModel:

  1. namespace CoreApi.ViewModels.Angular
  2. {
  3. public class ClientModificationViewModel
  4. {
  5. public decimal Balance { get; set; }
  6.  
  7. [Required]
  8. [MaxLength()]
  9. public string Email { get; set; }
  10.  
  11. [Required]
  12. [MaxLength()]
  13. public string FirstName { get; set; }
  14.  
  15. [Required]
  16. [MaxLength()]
  17. public string LastName { get; set; }
  18.  
  19. [Required]
  20. [MaxLength()]
  21. public string Phone { get; set; }
  22. }
  23. }

配置AutoMapper

针对Client和它的Viewmodels, 分别从两个方向进行配置:

DomainToViewModelMappingProfile:

  1. namespace CoreApi.Web.MyConfigurations
  2. {
  3. public class DomainToViewModelMappingProfile : Profile
  4. {
  5. public override string ProfileName => "DomainToViewModelMappings";
  6.  
  7. public DomainToViewModelMappingProfile()
  8. {
  9. CreateMap<UploadedFile, UploadedFileViewModel>();
  10. CreateMap<Client, ClientViewModel>();
  11. CreateMap<Client, ClientModificationViewModel>();
  12. }
  13. }
  14. }

ViewModelToDomainMappingProfile:

  1. namespace CoreApi.Web.MyConfigurations
  2. {
  3. public class ViewModelToDomainMappingProfile : Profile
  4. {
  5. public override string ProfileName => "ViewModelToDomainMappings";
  6.  
  7. public ViewModelToDomainMappingProfile()
  8. {
  9. CreateMap<UploadedFileViewModel, UploadedFile>();
  10. CreateMap<ClientViewModel, Client>();
  11. CreateMap<ClientCreationViewModel, Client>();
  12. CreateMap<ClientModificationViewModel, Client>();
  13. }
  14. }
  15. }

注册Repository的DI:

在web项目的StartUp.cs的ConfigureServices里面为ClientRepository注册DI:

  1. services.AddScoped<IClientRepository, ClientRepository>();

建立Controller

在controllers目录建立Angular/ClientController.cs:

  1. namespace CoreApi.Web.Controllers.Angular
  2. {
  3. [Route("api/[controller]")]
  4. public class ClientController : BaseController<ClientController>
  5. {
  6. private readonly IClientRepository _clientRepository;
  7. public ClientController(ICoreService<ClientController> coreService,
  8. IClientRepository clientRepository) : base(coreService)
  9. {
  10. _clientRepository = clientRepository;
  11. }
  12.  
  13. [HttpGet]
  14. public async Task<IActionResult> GetAll()
  15. {
  16. var items = await _clientRepository.All.ToListAsync();
  17. var results = Mapper.Map<IEnumerable<ClientViewModel>>(items);
  18. return Ok(results);
  19. }
  20.  
  21. [HttpGet]
  22. [Route("{id}", Name = "GetClient")]
  23. public async Task<IActionResult> Get(int id)
  24. {
  25. var item = await _clientRepository.GetSingleAsync(id);
  26. if (item == null)
  27. {
  28. return NotFound();
  29. }
  30. var result = Mapper.Map<ClientViewModel>(item);
  31. return Ok(result);
  32. }
  33.  
  34. [HttpPost]
  35. public async Task<IActionResult> Post([FromBody] ClientCreationViewModel clientVm)
  36. {
  37. if (clientVm == null)
  38. {
  39. return BadRequest();
  40. }
  41.  
  42. if (!ModelState.IsValid)
  43. {
  44. return BadRequest(ModelState);
  45. }
  46.  
  47. var newItem = Mapper.Map<Client>(clientVm);
  48. newItem.SetCreation(UserName);
  49. _clientRepository.Add(newItem);
  50. if (!await UnitOfWork.SaveAsync())
  51. {
  52. return StatusCode(, "保存客户时出错");
  53. }
  54.  
  55. var vm = Mapper.Map<ClientViewModel>(newItem);
  56.  
  57. return CreatedAtRoute("GetClient", new { id = vm.Id }, vm);
  58. }
  59.  
  60. [HttpPut("{id}")]
  61. public async Task<IActionResult> Put(int id, [FromBody] ClientModificationViewModel clientVm)
  62. {
  63. if (clientVm == null)
  64. {
  65. return BadRequest();
  66. }
  67.  
  68. if (!ModelState.IsValid)
  69. {
  70. return BadRequest(ModelState);
  71. }
  72. var dbItem = await _clientRepository.GetSingleAsync(id);
  73. if (dbItem == null)
  74. {
  75. return NotFound();
  76. }
  77. Mapper.Map(clientVm, dbItem);
  78. dbItem.SetModification(UserName);
  79. _clientRepository.Update(dbItem);
  80. if (!await UnitOfWork.SaveAsync())
  81. {
  82. return StatusCode(, "保存客户时出错");
  83. }
  84.  
  85. return NoContent();
  86. }
  87.  
  88. [HttpPatch("{id}")]
  89. public async Task<IActionResult> Patch(int id, [FromBody] JsonPatchDocument<ClientModificationViewModel> patchDoc)
  90. {
  91. if (patchDoc == null)
  92. {
  93. return BadRequest();
  94. }
  95. var dbItem = await _clientRepository.GetSingleAsync(id);
  96. if (dbItem == null)
  97. {
  98. return NotFound();
  99. }
  100. var toPatchVm = Mapper.Map<ClientModificationViewModel>(dbItem);
  101. patchDoc.ApplyTo(toPatchVm, ModelState);
  102.  
  103. TryValidateModel(toPatchVm);
  104. if (!ModelState.IsValid)
  105. {
  106. return BadRequest(ModelState);
  107. }
  108.  
  109. Mapper.Map(toPatchVm, dbItem);
  110.  
  111. if (!await UnitOfWork.SaveAsync())
  112. {
  113. return StatusCode(, "更新的时候出错");
  114. }
  115.  
  116. return NoContent();
  117. }
  118.  
  119. [HttpDelete("{id}")]
  120. public async Task<IActionResult> Delete(int id)
  121. {
  122. var model = await _clientRepository.GetSingleAsync(id);
  123. if (model == null)
  124. {
  125. return NotFound();
  126. }
  127. _clientRepository.Delete(model);
  128. if (!await UnitOfWork.SaveAsync())
  129. {
  130. return StatusCode(, "删除的时候出错");
  131. }
  132. return NoContent();
  133. }
  134. }
  135. }

首先, Controller继承了ControllerBase这个类, ControllerBase是自己写的类, 里面可以放置一些公用的方法或属性, 目前里面的东西都没用:

  1. namespace CoreApi.Web.Controllers.Bases
  2. {
  3. public abstract class BaseController<T> : Controller
  4. {
  5. protected readonly IUnitOfWork UnitOfWork;
  6. protected readonly ILogger<T> Logger;
  7. protected readonly IFileProvider FileProvider;
  8. protected readonly ICoreService<T> CoreService;
  9.  
  10. protected BaseController(ICoreService<T> coreService)
  11. {
  12. CoreService = coreService;
  13. UnitOfWork = coreService.UnitOfWork;
  14. Logger = coreService.Logger;
  15. FileProvider = coreService.FileProvider;
  16. }
  17.  
  18. #region Current Information
  19.  
  20. protected DateTime Now => DateTime.Now;
  21. protected string UserName => User.Identity.Name ?? "Anonymous";
  22.  
  23. #endregion
  24.  
  25. }
  26. }

由于父类构造函数依赖的类太多了, 所以我建立了一个CoreService, 里面包含着这些依赖, 然后用一个变量就注入进去了, 这种写法不一定正确:

  1. public interface ICoreService<out T> : IDisposable
  2. {
  3. IUnitOfWork UnitOfWork { get; }
  4. ILogger<T> Logger { get; }
  5. IFileProvider FileProvider { get; }
  6. }

Controller里面的方法应该都能看明白吧. 需要提一下的是UnitOfWork.

Unit Of Work

我才用的是UnitOfWork和Repository模式, 多个Repository挂起的数据库操作, 可以使用一个UnitOfWork一次性提交.

由于DBContext已经实现了UnitOfWork模式, 所以可以直接在Controller里面使用DbContext, 但是我还是做了一个接口 IUnitOfWork:

  1. namespace CoreApi.DataContext.Infrastructure
  2. {
  3. public interface IUnitOfWork: IDisposable
  4. {
  5. int SaveChanges();
  6. int SaveChanges(bool acceptAllChangesOnSuccess);
  7. Task<int> SaveChangesAsync(bool acceptAllChangesOnSuccess, CancellationToken cancellationToken = default(CancellationToken));
  8. Task<int> SaveChangesAsync(CancellationToken cancellationToken = default(CancellationToken));
  9.  
  10. bool Save();
  11. bool Save(bool acceptAllChangesOnSuccess);
  12. Task<bool> SaveAsync(bool acceptAllChangesOnSuccess, CancellationToken cancellationToken = default(CancellationToken));
  13. Task<bool> SaveAsync(CancellationToken cancellationToken = default(CancellationToken));
  14. }
  15. }

里面前4个方法就是DbContext内置的方法, 后面4个方法可有可无, 就是上面4个方法的简单变形.

看一下CoreContext:

  1. namespace CoreApi.DataContext.Core
  2. {
  3. public class CoreContext : DbContext, IUnitOfWork
  4. {
  5. public CoreContext(DbContextOptions<CoreContext> options)
  6. : base(options)
  7. {
  8. }
  9.  
  10. protected override void OnModelCreating(ModelBuilder modelBuilder)
  11. {
  12. base.OnModelCreating(modelBuilder);
  13. modelBuilder.HasDefaultSchema(AppSettings.DefaultSchema);
  14.  
  15. modelBuilder.ApplyConfiguration(new UploadedFileConfiguration());
  16. modelBuilder.ApplyConfiguration(new ClientConfiguration());
  17. }
  18.  
  19. public DbSet<UploadedFile> UploadedFiles { get; set; }
  20. public DbSet<Client> Clients { get; set; }
  21.  
  22. public bool Save()
  23. {
  24. return SaveChanges() >= ;
  25. }
  26.  
  27. public bool Save(bool acceptAllChangesOnSuccess)
  28. {
  29. return SaveChanges(acceptAllChangesOnSuccess) >= ;
  30. }
  31.  
  32. public async Task<bool> SaveAsync(bool acceptAllChangesOnSuccess, CancellationToken cancellationToken = default(CancellationToken))
  33. {
  34. return await SaveChangesAsync(acceptAllChangesOnSuccess, cancellationToken) >= ;
  35. }
  36.  
  37. public async Task<bool> SaveAsync(CancellationToken cancellationToken = default(CancellationToken))
  38. {
  39. return await SaveChangesAsync(cancellationToken) >= ;
  40. }
  41. }
  42. }

差不多了, 开始

迁移数据库

在Package Manager Console分别执行 Add-Migration XXX和 Update-database命令.

注意这个时候 解决方案的启动项目必须是Web项目, 如果设置了多个启动项目, 迁移命令会不太好用.

然后运行一下: 选择CoreApi.Web而不是IISExpress, 这样的话端口应该是 http://localhost:5001/api/values

到Swagger里简单测试下

然后进入swagger简单测试一下ClientController: http://localhost:5001/swagger/

先添加数据 POST:

先点击右侧, 然后会把数据的json模板复制到左边的框里, 然后修改值, 然后点击try It out, 结果如下:

然后两个Get, Delete, Put您都应该会测试.

这里试一下 Patch:

再查询一下, 应该没有什么问题.

先写到这, 明天就能差不多写完了吧.

使用angular4和asp.net core 2 web api做个练习项目(一)的更多相关文章

  1. 使用angular4和asp.net core 2 web api做个练习项目(四)

    第一部分: http://www.cnblogs.com/cgzl/p/7755801.html 第二部分: http://www.cnblogs.com/cgzl/p/7763397.html 第三 ...

  2. 使用angular4和asp.net core 2 web api做个练习项目(二), 这部分都是angular

    上一篇: http://www.cnblogs.com/cgzl/p/7755801.html 完成client.service.ts: import { Injectable } from '@an ...

  3. 使用angular4和asp.net core 2 web api做个练习项目(三)

    第一部分: http://www.cnblogs.com/cgzl/p/7755801.html 第二部分: http://www.cnblogs.com/cgzl/p/7763397.html 后台 ...

  4. angular4和asp.net core 2 web api

    angular4和asp.net core 2 web api 这是一篇学习笔记. angular 5 正式版都快出了, 不过主要是性能升级. 我认为angular 4还是很适合企业的, 就像.net ...

  5. 温故知新,使用ASP.NET Core创建Web API,永远第一次

    ASP.NET Core简介 ASP.NET Core是一个跨平台的高性能开源框架,用于生成启用云且连接Internet的新式应用. 使用ASP.NET Core,您可以: 生成Web应用和服务.物联 ...

  6. 基于ASP.NET Core 创建 Web API

    使用 Visual Studio 创建项目. 文件->新建->项目,选择创建 ASP.NET Core Web 应用程序. 基于 ASP.NET Core 2.0 ,选择API,身份验证选 ...

  7. ASP.NET Core Restful Web API 相关资源索引

    GraphQL 使用ASP.NET Core开发GraphQL服务器 -- 预备知识(上) 使用ASP.NET Core开发GraphQL服务器 -- 预备知识(下) [视频] 使用ASP.NET C ...

  8. 使用 ASP.NET Core 创建 Web API及链接sqlserver数据库

    创建 Web API https://docs.microsoft.com/zh-cn/aspnet/core/tutorials/first-web-api?view=aspnetcore-3.0& ...

  9. ASP.NET Core 中基于 API Key 对私有 Web API 进行保护

    这两天遇到一个应用场景,需要对内网调用的部分 web api 进行安全保护,只允许请求头账户包含指定 key 的客户端进行调用.在网上找到一篇英文博文 ASP.NET Core - Protect y ...

随机推荐

  1. JavaEE成长之路

    前言 学习Java已经有一段时间了,在学习的过程中也走过了不少弯路. 写下这篇博文,主要是想记录下自己学习编程之路,以及反思自己在学习的时候出现的问题,下面也会给出我自认为学习JavaEE的路线,想要 ...

  2. Ningx集群环境搭建

    Ningx集群环境搭建 Nginx是什么? Nginx ("engine x") 是⼀个⾼性能的 HTTP 和 反向代理 服务器,也是⼀个 IMAP/ POP3/SMTP 代理服务 ...

  3. S3C2440 时钟设置分析(FCLK, HCLK, PCLK)

    时钟对于一个系统的重要性不言而喻,时钟决定了系统发送数据的快慢,高性能的芯片往往能支持更快速度的时钟,从而提供更好的体验. S3C2440的输入时钟频率是12MHZ,对于这款芯片,显然速度是不够的,所 ...

  4. AngularJS -- Module (模块)

    点击查看AngularJS系列目录 转载请注明出处:http://www.cnblogs.com/leosx/ 什么是AngularJS的模块 我们所说的模块,是你的AngularJS应用程序的一个组 ...

  5. JSP内置对象的实验报告,页面登陆设计

    JSP内置对象的实验报告 一.实验目的: 本实验的目的是让学生掌握怎样在JSP中使用内置对象request.page.response等. 二.实验要求: 编写四个JSP 页面login.jsp.Re ...

  6. java从命令行接收多个数字,求和程序分析

    问题:编写一个程序,此程序从命令行接收多个数字,求和之后输出结果. 1.设计思想 (1)声明两个变量接收输入的字符串 (2)将字符串转换成int类型 (3)输出求和 2.程序流程图 3.源程序代码 i ...

  7. Max Consecutive Ones

    Given a binary array, find the maximum number of consecutive 1s in this array. Example 1: Input: [1, ...

  8. Day2 python基础学习

    http://www.pythondoc.com/ Python中文学习大本营 本节内容: 一.字符串操作 二.列表操作 三.元组操作 四.字典操作 五.集合操作 六.字符编码操作 一.字符串操作 1 ...

  9. Python文件读写模式

    r 打开只读文件,该文件必须存在. r+ 打开可读写的文件,该文件必须存在.可读,可写,可追加. w 打开只写文件,若文件存在则文件长度清为0,即该文件内容会消失.若文件不存在则建立该文件. w+ 打 ...

  10. JS表单提交的几种方式

    第一种方式 : 表单提交,在 form 标签中增加 onsubmit 事件来判断表单是否提交成功 <script type="text/javascript"> fun ...