ANCWEB - 基于 ASP.NET CORE 2.0 的 WEB 开发

李郑

发布于 2019-12-12 16:35:42

9980

发布于 2019-12-12 16:35:42

文章被收录于专栏：漫漫全栈路

ASP.NET Core 2 开发实战练习，基于 ASP.NET Core 2.0 + MSSQL + Angular 5 + Bootstrap 4 的 WEB 项目实例，项目内容开源于 raphaelli/ANCWEB - Github

项目说明

本项目参考 - 草根专栏 - 系列文章教材，并以此为基础调整。

技术栈说明

参考技术文章，使用如下技术：

ASP.NET Core 2.0 Web API
MSSQL
Angular 5
Bootstrap 4

开发环境说明

使用VS Code 开发，插件列表：

环境搭建

.NET CORE 环境安装 .NET Core 实战笔记1-介绍和安装
Visual Studio Code 即上述插件列表的插件安装
SqlServer 2017 on linux SQL Server on Linux by Docker
angular cli - npm 安装： npm install -g @angular/cli

创建项目

指令创建

VS code 中使用终端，并执行dotnet new webapi 指令创建 ASP.NET CORE WEB API 项目。

运行项目

创建成功后会自动生成项目，执行 dotnet run 试着运行下。

注意：这里的 Hosting environment 为 Production 即生产环境，我们可以切换到 development和Staging模式。

有几种办法可以更改这个环境变量的值:

在执行dotnet run之前设置环境变量:

mac: export ASPNETCORE_ENVIRONMENT=Development

windows: set ASPNETCORE_ENVIRONMENT="Development"

windows下可以在控制面板–系统–高级设置里面设置环境变量的值
在项目的appSettings.json文件里面设置也可以:

使用visual studio 2017的话, 可以在项目的launchSettings.json设置.

使用vscode的话, 可以在项目目录的launch.json进行设置.

注意：在VS Code 中使用lanch.json 设置后，只有使用VS Code启动项目才能生效。

安装 `.net watch tool`

打开.csproj添加此行:

<ItemGroup>
    <DotNetCliToolReference Include="Microsoft.VisualStudio.Web.CodeGeneration.Tools" Version="2.0.2" />
    <DotNetCliToolReference Include="Microsoft.DotNet.Watcher.Tools" Version="2.0.0" />
  </ItemGroup>

然后执行命令:

dotnet restore

这样就使用下面的命令来代替dotnet run:

dotnet watch run

您可以随便修改一点代码, 然后就可以看到项目被重新编译并运行了。

配置ASP.NET Core 2.0 Web API

刚才已经创建好了 WEB API 的项目，接下来开始配置WEB API 。

分为下面四个步骤：

建立API
配置和使用Entity Framework Core 2.0
配置ASP.NET Core
使用automapper

添加模型（Models）

参考学习项目，建立模型如下：

Models/TvNetwork.cs:

using System.Collections.Generic;
using System.Collections.ObjectModel;

namespace Tv.Models
{
    public class TvNetwork
    {
        public TvNetwork()
        {
            TvShows = new Collection<TvShow>();
        }
        public int Id { get; set; }
        public string Name { get; set; }
        public ICollection<TvShow> TvShows { get; set; }
    }
}

Models/TvShow.cs:

namespace Tv.Models
{
    public class TvShow
    {
        public int Id { get; set; }
        public string Name { get; set; }
        public int TvNetworkId { get; set; }
        public TvNetwork TvNetwork { get; set; }
    }
}

VS Code 使用 C# 开发时，安装插件后实际效率非常高，使用 prop 和代码块功能能快速创建实体类和属性。

添加Entity Framework Core

使用指令直接添加：

dotnet add package Microsoft.EntityFrameworkCore.Design
dotnet restore

先添加NUGET包，还原，添加应用：

<ItemGroup>
  <DotNetCliToolReference Include="Microsoft.VisualStudio.Web.CodeGeneration.Tools" Version="2.0.2" />
  <DotNetCliToolReference Include="Microsoft.DotNet.Watcher.Tools" Version="2.0.0" />
  <DotNetCliToolReference Include="Microsoft.EntityFrameworkCore.Tools.DotNet" Version="2.0.0" />
</ItemGroup>

然后使用 EF。

dotnet ef

创建 `DbContext` 上下文

创建一个文件夹叫做Database, 然后在里面建立一个文件TvContext.cs:

using Microsoft.EntityFrameworkCore;

namespace Tv.Database
{
    public class TvContext : DbContext
    {
        public TvContext(DbContextOptions<TvContext> options):base(options)
        {
        }
    }
}

使用Dbcontext时需要依赖注入，因此需要在 Startup.cs的ConfigureServices中把TvContext 注册到容器：

public void ConfigureServices(IServiceCollection services)
{
    services.AddDbContext<TvContext>(opt => opt.UseSqlServer(""));
    services.AddMvc();
}

注意：此处需要添加 Database文件夹 的引用和 EntityFrameworkCore 的引用。

在appSettings.json中添加数据库连接字符串：

"ConnectionStrings": {
    "Default": "server=localhost; database=tvdb; user id=sa; password=password;"
  },

注意:这里使用了实例字符串，按实际连接字符串修改。

回到Startup.cs, 可以使用这两种方式取得连接字符串:

public void ConfigureServices(IServiceCollection services)
{
    // services.AddDbContext<TvContext>(opt => opt.UseSqlServer(Configuration["ConnectionStrings:Default"]));
    services.AddDbContext<TvContext>(opt => opt.UseSqlServer(Configuration.GetConnectionString("Default")));
    services.AddMvc();
}

创建数据库

为 TvContext添加 DbSet数据集：

using Microsoft.EntityFrameworkCore;
using Tv.Models;

namespace Tv.Database
{
    public class TvContext : DbContext
    {
        public TvContext(DbContextOptions<TvContext> options)
            : base(options)
        {

        }

        public DbSet<TvNetwork> TvNetworks { get; set; }
        public DbSet<TvShow> TvShows { get; set; }
    }
}

然后添加migrations: