当前位置：Gxlcms > 数据库问题 > 用VSCode开发一个基于asp.net core 2.0/sql server linux(docker)/ng5/bs4的项目(2)

用VSCode开发一个基于asp.net core 2.0/sql server linux(docker)/ng5/bs4的项目(2)

时间：2021-07-01 10:21:17 帮助过：8人阅读

前一部分, 我们已经把数据库创建出来了. 那么我们先看看这个数据库.

可以在项目里面建立一个database.sql, 并且建立一个数据库连接的profile(参考上一篇文章), 连接成功后执行下面语句:

SELECT TABLE_NAME FROM tvdb.INFORMATION_SCHEMA.TABLES WHERE TABLE_TYPE = ‘BASE TABLE‘;

技术分享图片

右侧结果可以看到建立的table, 其中一个是迁移表, 另外两个是Domain Model所对应的业务表.

使用下面的sql语句查询表的字段定义:

select * from information_schema.columns where table_name = ‘TvNetworks‘;
select * from information_schema.columns where table_name = ‘TvShows‘;

技术分享图片

从结果的CHARACTER_MAXIMUM_LENGTH字段可以看出, 目前name字段的类型都是nvarchar(max):

技术分享图片

这可能不是我们想要的, 所以就需要为Domain Model的相应属性添加一些约束.

打开TvNetwork和TvShow, 为name属性添加约束:

using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.ComponentModel.DataAnnotations;

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

using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.ComponentModel.DataAnnotations;

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

EF Core其他的约束属性请参考文档, 这里就不介绍了.

这种对Domain Model进行约束的方法使用的是DataAnnotation, 而我个人更喜欢使用FluetApi, 不过在这篇文章里这个不是重点.

然后添加migrations:

dotnet ef migrations add AddConstraints

看一下生成的migration文件:

技术分享图片

没问题, 可以执行dotnet ef database update了. 执行成功后, 可以看到表的字段约束已经添加成功了:

技术分享图片

为数据库添加种子数据.

添加种子数据的方法有很多, 可以写一个方法然后在Startup里面调用. 这里我使用添加migration的方式:

命令行添加一个空的migration:

dotnet ef migrations add SeedData

打开这个migration文件, 添加如下代码:

using Microsoft.EntityFrameworkCore.Migrations;
using System;
using System.Collections.Generic;

namespace Tv.Migrations
{
    public partial class SeeData : Migration
    {
        protected override void Up(MigrationBuilder migrationBuilder)
        {
            migrationBuilder.Sql("INSERT INTO TvNetworks (Name) VALUES (‘Netflix‘)");
            migrationBuilder.Sql("INSERT INTO TvNetworks (Name) VALUES (‘HBO‘)");
            migrationBuilder.Sql("INSERT INTO TvNetworks (Name) VALUES (‘CBS‘)");
            migrationBuilder.Sql("INSERT INTO TvNetworks (Name) VALUES (‘NBC‘)");

            migrationBuilder.Sql("INSERT INTO TvShows (Name, TvNetworkId) VALUES (‘House of Cards‘, (SELECT Id FROM TvNetworks WHERE Name=‘Netflix‘))");
            migrationBuilder.Sql("INSERT INTO TvShows (Name, TvNetworkId) VALUES (‘Altered Carbon‘, (SELECT Id FROM TvNetworks WHERE Name=‘Netflix‘))");
            migrationBuilder.Sql("INSERT INTO TvShows (Name, TvNetworkId) VALUES (‘Marvel‘‘s Daredevil‘, (SELECT Id FROM TvNetworks WHERE Name=‘Netflix‘))");

            migrationBuilder.Sql("INSERT INTO TvShows (Name, TvNetworkId) VALUES (‘Game of Thrones‘, (SELECT Id FROM TvNetworks WHERE Name=‘HBO‘))");
            migrationBuilder.Sql("INSERT INTO TvShows (Name, TvNetworkId) VALUES (‘Silicon Valley‘, (SELECT Id FROM TvNetworks WHERE Name=‘HBO‘))");
            migrationBuilder.Sql("INSERT INTO TvShows (Name, TvNetworkId) VALUES (‘Veep‘, (SELECT Id FROM TvNetworks WHERE Name=‘HBO‘))");

            migrationBuilder.Sql("INSERT INTO TvShows (Name, TvNetworkId) VALUES (‘NCIS‘, (SELECT Id FROM TvNetworks WHERE Name=‘CBS‘))");
            migrationBuilder.Sql("INSERT INTO TvShows (Name, TvNetworkId) VALUES (‘The Big Bang Theory‘, (SELECT Id FROM TvNetworks WHERE Name=‘CBS‘))");
            migrationBuilder.Sql("INSERT INTO TvShows (Name, TvNetworkId) VALUES (‘Criminal Minds‘, (SELECT Id FROM TvNetworks WHERE Name=‘CBS‘))");

            migrationBuilder.Sql("INSERT INTO TvShows (Name, TvNetworkId) VALUES (‘Friends‘, (SELECT Id FROM TvNetworks WHERE Name=‘NBC‘))");
            migrationBuilder.Sql("INSERT INTO TvShows (Name, TvNetworkId) VALUES (‘Chicago Fire‘, (SELECT Id FROM TvNetworks WHERE Name=‘NBC‘))");
            migrationBuilder.Sql("INSERT INTO TvShows (Name, TvNetworkId) VALUES (‘Will & Grace‘, (SELECT Id FROM TvNetworks WHERE Name=‘NBC‘))");
        }

        protected override void Down(MigrationBuilder migrationBuilder)
        {
            migrationBuilder.Sql("DELETE FROM TvNetworks WHERE Name IN (‘Netflix‘, ‘HBO‘, ‘CBS‘, ‘NBC‘)");
        }
    }
}

然后执行 dotnet ef database update. 成功后可以查看到数据:

技术分享图片

建立Web Api

在Controllers文件夹下建立TvController.cs.

需要注入TvContext, 这时候聚焦到context变量上使用cmd+. 这个快捷键生成一个field:

技术分享图片

随后, 就会生成一个field:

技术分享图片

完成后到代码如下:

using System.Collections.Generic;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using Microsoft.EntityFrameworkCore;
using Tv.Database;
using Tv.Models;

namespace Tv.Controllers
{
    public class TvController : Controller
    {
        private readonly TvContext context;

        public TvController(TvContext context)
        {
            this.context = context;
        }

        [HttpGet("/api/tvnetworks")]
        public async Task<IEnumerable<TvNetwork>> GetTvNetworks()
        {
            return await context.TvNetworks.Include(x => x.TvShows).ToListAsync();
        }
    }
}

这部分代码所涉及到的asp.net core的知识请参考我写的这个系列文章: http://www.cnblogs.com/cgzl/p/7637250.html

运行项目: dotnet watch run, 这时我们需要使用postman来测试这个api.

以前postman是chrome浏览器的一个扩展应用, 由于被墙, 可能会安装不上, 而现在postman是一个独立的应用了, 应该都能下载安装了: https://www.getpostman.com/

由于以前讲过postman, 所以这里我就不用postman了.

Rest Client

我使用vscode扩展rest client来测试api. rest client简介部分可以参考这个文章: http://www.cnblogs.com/cgzl/p/8450409.html

建立一个httptest文件, 打开文件, 使用命令面板输入查找这个命令:

技术分享图片

然后选择http:

技术分享图片

在文件中写下api的uri:

http://localhost:5000/api/tvnetworks

然后你会发现, 该uri的上方有一个send request 按钮:

技术分享图片

点击这个按钮, 发送请求.

技术分享图片

尽管请求返回结果是200, 但是你也可以发现结果并不正确, 看一下终端命令行:

技术分享图片

确实是发生了异常, 因为一个Tvnetwork有个导航属性是多个TvShow, 而一个TvShow还有一个反向导航属性是TvNetwork, 所以dbcontext查询出来在进行json转化的时候, 会无限循环下去, 就引起了self referencing loop.

所以web api 不应该把Domain Model直接暴露出去, 应该使用ViewModel或者叫Dto...

建立ViewModel

建立ViewModels/TvNetworkViewModel.cs 和 TvShowViewModel.cs:

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

namespace Tv.ViewModels
{
    public class TvNetworkViewModel
    {
        public TvNetworkViewModel()
        {
            TvShows = new Collection<TvShowViewModel>();
        }
        public int Id { get; set; }
        public string Name { get; set; }
        public ICollection<TvShowViewModel> TvShows { get; set; }
    }
}

namespace Tv.ViewModels
{
    public class TvShowViewModel
    {
        public int Id { get; set; }
        public string Name { get; set; }
        public int TvNetworkId { get; set; }
    }
}

注意TvShowViewModel里面并没有反向的TvNetWork属性, 这也保证了不会发生上面的自身循环引用异常.

接下来需要做的就是在Controller里面把Domain Model的属性传递给ViewModel, 没人会去手写这个映射的过程, 所以应该使用AutoMapper等类似的库

AutoMapper

首先添加AutoMapper, 一共有两个包:

dotnet add package AutoMapper
dotnet add package AutoMapper.Extensions.Microsoft.DependencyInjection

别忘了还要执行dotnet restore.

安装成功后, 在Startup.cs里面注册AutoMapper:

技术分享图片

此外, AutoMapper还需要知道Domain Model和ViewModel的对应关系和方向.

建立Mapping/MappingProfile.cs:

using AutoMapper;
using Tv.Models;
using Tv.ViewModels;

namespace Tv.Mapping
{
    public class MappingProfile : Profile
    {
        public MappingProfile()
        {
            CreateMap<TvNetwork, TvNetworkViewModel>();
            CreateMap<TvShow, TvShowViewModel>();
        }
    }
}

然后在Controller里面需要注入AutoMapper:

using System.Collections.Generic;
using System.Threading.Tasks;
using AutoMapper;
using Microsoft.AspNetCore.Mvc;
using Microsoft.EntityFrameworkCore;
using Tv.Database;
using Tv.Models;
using Tv.ViewModels;

namespace Tv.Controllers
{
    public class TvController : Controller
    {
        private readonly TvContext context;
        private readonly IMapper mapper;

        public TvController(TvContext context, IMapper mapper)
        {
            this.context = context;
            this.mapper = mapper;
        }

        [HttpGet("/api/tvnetworks")]
        public async Task<IEnumerable<TvNetworkViewModel>> GetTvNetworks()
        {
            var models = await context.TvNetworks.Include(x => x.TvShows).ToListAsync();
            var vms = mapper.Map<List<TvNetwork>, List<TvNetworkViewModel>>(models);
            return vms;
        }
    }
}

差不多了, 再次测试一下这个api:

技术分享图片

没毛病!!!

建立Angular5项目

按照第一部分的操作安装好angular cli之后 (https://github.com/angular/angular-cli), 就可以打开命令行建立angular 客户端项目了. 使用:

ng new tv-client

创建一个名字为tv-client的angular项目. 此时, cli会通过npm自动安装依赖的包.

安装好所有的包之后, 就可以进入该目录 cd tv-client 并用 vscode打开该目录: code+.

技术分享图片

这个项目里面, 我们主要是在src/app里面写代码, 也会简单修改一下angular-cli.json文件.

运行angular项目:

可以使用ng server或者npm start命令运行angular项目:

技术分享图片

最好还是使用npm start, 因为ng server以后会需要添加一些参数.

所以npm start, 看看效果:

技术分享图片

打开浏览器 http://localhost:4200,

技术分享图片

ok, 项目建立成功了.

由于已经存在种子数据了, 那么就可以查询列表了.

创建TvNetwork列表:

首先把当前目录切换到app下:

技术分享图片

根据文档, 使用下面命令创建一个名为tv-network-list.ts的component, 并且在app模块进行注册, 如果不存在components文件夹则创建这个文件夹.

ng g c components/TvNetworkList -m=app

生成文件如下:

并且已经在app.module进行了注册:

然后我们再创建两个component.

创建TvNetwork表单:

根据文档, 使用下面命令创建一个名为tv-network-form.ts的component, 并且在app模块进行注册, 如果不存在components文件夹则创建这个文件夹.

ng g c components/TvNetworkForm -m=app

上面这个命令使用的都是缩写. 完整的写法如下:

ng generate component components/TvNetworkForm --module=app

生成的文件如下:

技术分享图片

再建立一个home component:

ng g c components/home -m=app

那么, 如何访问这个form? 这就需要建立路由了, 不过首先先把bootstrap 4 安装上, 项目根目录执行以下命令:

npm install --save bootstrap jquery popper.js

安装好之后, 需要把bootstrap的css文件添加到angular-cli.json文件里:

技术分享图片

下面添加导航栏, 请参考bootstrap4文档: http://getbootstrap.com/docs/4.0/components/navbar/

修改app.component.html如下:

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <a class="navbar-brand" href="#">Tv</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
    aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home
          <span class="sr-only">(current)</span>
        </a>
      </li>
    </ul>
  </div>
</nav>

然后运行npm start, 结果如下图就说明bootstrap4安装好了:

技术分享图片

建立angular 路由:

参考官方文档: https://angular.io/tutorial/toh-pt5

执行命令:

ng g m appRouting -flat -m=app

这会建立一个app-routing.module.ts模块, 并且不会创建自己的文件夹, 同样也会注册到app模块.

技术分享图片

修改app-routing到代码如下:

import { NgModule } from ‘@angular/core‘;
import { RouterModule, Routes } from ‘@angular/router‘;
import { HomeComponent } from ‘./components/home/home.component‘;
import { TvNetworkFormComponent } from ‘./components/tv-network-form/tv-network-form.component‘;
import { TvNetworkListComponent } from ‘./components/tv-network-list/tv-network-list.component‘;

const ROUTES: Routes = [
  { path: ‘‘, redirectTo: ‘/home‘, pathMatch: ‘full‘ },
  { path: ‘home‘, component: HomeComponent },
  { path: ‘tvnetworks‘, component: TvNetworkListComponent },
  { path: ‘tvnetworks/new‘, component: TvNetworkFormComponent },
  { path: ‘**‘, component: HomeComponent }
];

@NgModule({
  imports: [ RouterModule.forRoot(ROUTES) ],
  exports: [RouterModule]
})
export class AppRoutingModule { }

在编写angular的ts代码时, 由于安装了angular插件, 所以智能提示和自动补全和自动引用都是相当好的.

分别设置了5个路由, 默认路由直接跳转到home, 如果没有匹配路由到话也是跳转到home.

然后需要在app.component.html里面加上router-outlet, 并修改navbar里面到链接:

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <a class="navbar-brand" href="#">Tv</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
    aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item">
        <a class="nav-link" routerLinkActive="active" routerLink="/home">Home
          <span class="sr-only">(current)</span>
        </a>
      </li>
      <li class="nav-item">
        <a class="nav-link" routerLinkActive="active" routerLink="/tvnetworks">Tv Network
          <span class="sr-only">(current)</span>
        </a>
      </li>
      <li class="nav-item">
        <a class="nav-link" routerLinkActive="active" routerLink="/tvnetworks/new">Add Tv Network
          <span class="sr-only">(current)</span>
        </a>
      </li>
    </ul>
  </div>
</nav>
<div class="container">
  <router-outlet></router-outlet>
</div>

查看浏览器, 应该是这个效果:

技术分享图片

建立Service

为了使用asp.net core到web api, 需要在angular客户端建立http的service. 这里我使用HttpClient.

首先在app.module里面添加引用:

import { BrowserModule } from ‘@angular/platform-browser‘;
import { NgModule } from ‘@angular/core‘;
import { HttpClientModule } from ‘@angular/common/http‘;


import { AppComponent } from ‘./app.component‘;
import { TvNetworkFormComponent } from ‘./components/tv-network-form/tv-network-form.component‘;
import { HomeComponent } from ‘./components/home/home.component‘;
import { AppRoutingModule } from ‘.//app-routing.module‘;


@NgModule({
  declarations: [
    AppComponent,
    TvNetworkFormComponent,
    HomeComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    HttpClientModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

然后使用命令生成service:

ng g s services/TvNetwork -m=app

技术分享图片

然后编辑tv-network.service.ts, 添加一个获得所有tv network的方法, 返回类型是Observable:

import { Injectable } from ‘@angular/core‘;
import { HttpClient, HttpHeaders } from ‘@angular/common/http‘;

@Injectable()
export class TvNetworkService {

  constructor(
    private http: HttpClient
  ) { }

  getTvNetworks () {
    return this.http.get<any[]>(‘api/tvnetworks‘);
  }

}

随后我们在tv-netowrk-list.component.ts里的ngOnInit方法调用它, 并把结果打印出来:

import { Component, OnInit } from ‘@angular/core‘;
import { TvNetworkService } from ‘../../services/tv-network.service‘;

@Component({
  selector: ‘app-tv-network-list‘,
  templateUrl: ‘./tv-network-list.component.html‘,
  styleUrls: [‘./tv-network-list.component.css‘]
})
export class TvNetworkListComponent implements OnInit {

  tvNetworks: any[];

  constructor(
    private tvNetworkServices: TvNetworkService
  ) { }

  ngOnInit() {
    this.tvNetworkServices.getTvNetworks().subscribe(result => {
      this.tvNetworks = result;
      console.log(this.tvNetworks);
    }, err => {
      console.error(err);
    });
  }

}

然后让我们运行试试:

技术分享图片

可以看到发生了错误404, angular客户端并没有找到这个api. 这是因为angular运行的是自己的web服务器端口4200, 而asp.net core也是运行自己服务器端口为5000.

那么可以有多种解决办法:

1. 可以在angular的service的url写成完整的地址, 但是, 由于开发时和生产时的api地址很有可能不一样, 那么这就意味着发布到正式环境之前要把所有services的url地址全部修改一遍, 显然, 这时不可取的. (也许可以定义一个前缀变量, 随着环境改变它的值).
2. 由于angular cli其实使用的是webpack, 那么就可以使用proxy.

我们就使用proxy, 参考官方文档: https://github.com/angular/angular-cli/wiki/stories-proxy

在项目根目录建立一个proxy.conf.json文件:

{
  "/api": {
    "target": "http://localhost:5000",
    "secure": false
  }
}

这表示所有的以/api开头的请求将会被转发到http://localhost:5000/api这个地址上.

此外还需要修改package.json里面到npm start部分, 把上面的proxy文件添加为参数:

技术分享图片

然后重新运行angular项目, 这时只能使用 npm start这个命令, 如果想使用ng serve 命令则必须把后边的参数加上.

重新访问TvNetworks菜单:

技术分享图片

这次读取api成功了. 那么接下来我们来完成这个列表页面.

cmd+p, 输入 tv list html 打开tv-network-list.component.html.

这里需要画一个table, 别忘了使用zencoding.

表头部分, 按照下面输入然后按Tab:

技术分享图片

Tbody部分:

技术分享图片

最后代码:

<table class="table">
  <thead class="thead-dark">
    <tr>
      <th scope="col">#</th>
      <th scope="col">名称</th>
      <th scope="col">操作</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let t of tvNetworks; let i = index">
      <th scope="row">{{i+1}}</th>
      <td>{{t.name}}</td>
      <td></td>
    </tr>
  </tbody>
</table>

运行页面:

技术分享图片

Beautiful.

继续编写表单:

打开tv-network-form.component.html, 请看视频:

最终代码如下:

<h1>添加电视台</h1>
<form>
  <div class="form-group">
    <label for="name">名称</label>
    <input type="text" name="name" id="name" class="form-control">
  </div>
  <button class="btn btn-primary">提交</button>
</form>

效果如图:

技术分享图片

如果您跟着这两篇文章做到现在, 肯定可以感觉到vscode到强大和不同, 它绝不仅仅是个编辑器. 我一直在使用vscode编写前台和python等, 现在也习惯使用vscode编写.net core项目了, Awesome.

今天先写到这, 下一篇是CRUD部分.

用VSCode开发一个基于asp.net core 2.0/sql server linux(docker)/ng5/bs4的项目(2)

标签：安装 show car data- jquer 命令行 conf 请求 work

用VSCode开发一个基于asp.net core 2.0/sql server linux(docker)/ng5/bs4的项目(2)

建立Web Api

建立Angular5项目

人气教程排行