用VSCode開發一個基於asp.net core 2.0/sql server linux(docker)/ng5/bs4的專案(1)

solenovex發表於2018-02-27
VSCodeASP.NETSQLServerLinuxDocker

最近使用vscode比較多. 學習了一下如何在mac上使用vscode開發asp.netcore專案.

這裡是我寫的關於vscode的一篇文章: 

https://www.cnblogs.com/cgzl/p/8450179.html

http://www.cnblogs.com/cgzl/p/8450409.html

這篇文章寫的是使用mac(linux)/win10開發一個基於asp.net core 2.0 web api, angular 5, bootstrap 4, sql server linux(使用到docker)的小專案.

該文章大約分這幾部分:

  • 開發環境的搭建
  • 建立和配置asp.net core 2.0 web api
  • 建立和配置angular5專案
  • 開發基本的CRUD功能
  • 基於Unit Of Work和Repository等Pattern對專案重構
  • 其他業務功能的實現, 例如檔案上傳等
  • 授權和驗證

該文章涉及到以下技術:

asp.net core, angular 5, vscode, docker, sql server on linux, bootstrap 4.

------------------------------------------------------------------------------------------------

專案需求:

開發一個電視劇管理程式, 資料表有:

TvNetworks(電視臺), TvShows(電視劇), TvShowSeasons(電視劇分季), Tags(分類標籤), TvShowTags(電視劇到分類標籤).

就是對電視臺, 電視劇等資訊進行CRUD維護的程式.

------------------------------------------------------------------------------------------------

開發環境配置

1. 安裝.net core sdk:

到官網下載並安裝相應平臺的.net core sdk: https://dotnet.github.io

安裝好之後, 開啟命令列: 執行dotnet --version, 可以看到版本號, 這就說明安裝成功了.

2. 安裝visual studio code:

官網: https://code.visualstudio.com/

安裝好之後, 可以選擇把vscode新增到Path: 

使用command+option+p(mac)或者ctrl+shift+p(win)開啟命令板, 輸入path, 選擇install code command in path.

然後開啟命令列 輸入 code . 如果vscode能開啟當前目錄, 那麼說明操作成功了.

我安裝瞭如下擴充套件:

當然python擴充套件可以不用安裝...?

3. Sql Server:

貌似目前沒有mac版本到sql server. 所以採用docker.

首先安裝docker: https://www.docker.com/docker-mac 這個是mac版本到下載地址, 下載後按照說明安裝即可.

對於windows 10版到, 首先要確保您到windows 10要高於Home版. 因為docker win 10版依賴於hyper-v, 而win10 home版沒有hyper-v.

安裝好之後, 需要調整以下docker的設定, 至少需要4G記憶體(sql server需要):

docker的簡介可以參考我寫的這片入門級文章: http://www.cnblogs.com/cgzl/p/8458926.html

然後下載sqlserver linux版的image (https://hub.docker.com/r/microsoft/mssql-server-linux/), 命令列輸入:

docker pull microsoft/mssql-server-linux

這個操作在國內可能會很慢, 請耐心...

下載好之後, 檢視本地的images, 使用命令:

docker images

接下來安裝並執行這個image:

docker run -e 'ACCEPT_EULA=Y' -e 'SA_PASSWORD=一個複雜的密碼' -p 1433:1433 -d microsoft/mssql-server-linux

成功後, 使用docker ps命令可以檢視正在執行的程式:

使用docker ps -a 可以檢視所有的程式, 包括已經停止的.

然後我們使用vscode測試以下這個sqlserver, 在vscode裡面新增一個xx.sql檔案, 待vscode自動安裝好相應的外掛後, 使用cmd+opt+p開啟命令板, 輸入mssql, 選擇mssql: connect:

如果以前沒有連線過的話, 就選擇 Create Connection Profile:

然後輸入server的名字localhost:

]

接下來輸入資料庫名, 因為還沒有建立任何資料庫, 所以就輸入master吧: 

選擇登陸型別 SQL Login(如果是win10的話, 也可以選擇integrated):

使用者名稱sa:

密碼:

然後選擇是否儲存密碼, 最後給這個連線起一個名字:

這些操作完成後, 就會嘗試連線master資料庫, 連線成功的話上面會有提示框, 右下角也可以看出來:

寫一個sql 語句測試以下:

SELECT * FROM dbo.sysdatabases;

點選右鍵(cmd+shift+e)執行sql:

ok, 資料庫安裝成功.

如果docker重啟後, 可以使用“docker start (容器ID的前兩位)”命令啟動這個sql容器.

4. 安裝angular cli:

首先安裝nodejs: https://nodejs.org/en/

然後執行命令安裝 angular cli:

npm install -g @angular-cli

------------------------------------------------------------------------------------------------

建立asp.net core專案

命令列執行命令, 建立資料夾和webapi專案:

mkdir Tv && cd Tv && dotnet new webapi

然後執行dotnet run:

瀏覽器訪問http://localhost:5000/api/values:

專案建立成功了.

然後在命令列輸入code . 就可以用vscode開啟該目錄了:

關於asp.net core 2.0的簡介可以參考我的文章: http://www.cnblogs.com/cgzl/p/7637250.html

環境變數:

執行dotnet run的時候, 可以看到這句話:

這表示當前的宿主環境變數為Production, 而我們可能需要用到Development或者Staging.

有幾種辦法可以更改這個環境變數的值:

1. 在執行dotnet run之前設定環境變數:

mac: export ASPNETCORE_ENVIRONMENT=Development

windows: set ASPNETCORE_ENVIRONMENT="Development"

2. windows下可以在控制皮膚--系統--高階設定裡面設定環境變數的值

3. mac下, 進入使用者的home目錄, 然後執行

code .bash_profile

在該檔案後面加上:

export ASPNETCORE_ENVIRONMENT=Development

這樣也可以.

4. 在專案的appSettings.json檔案裡面設定也可以:

使用visual studio 2017的話, 可以在專案的launchSettings.json設定.

使用vscode的話, 可以在專案目錄的launch.json進行設定.

不過這就需要使用vscode來啟動專案了.

安裝.net watch tool

經常開發前端的都知道, 前端專案開發的時候一般都採用hot module replacement技術, 就是檔案有變化的時候, 自動重新編譯並重新整理瀏覽器.

預設情況下dotnet run沒有這個功能, 所以需要新增dotnet watch tool來實現類似的功能: https://github.com/aspnet/DotNetTools/blob/dev/src/dotnet-watch/README.md

開啟Tv.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

您可以隨便修改一點程式碼, 然後就可以看到專案被重新編譯並執行了.

Debugging asp.net core

參考我這篇文章: http://www.cnblogs.com/cgzl/p/8450179.html

切換到Debug畫面, 然後注意選擇到是.net core attach, 因為我們之前執行著dotnet watch run, 所以只能附加著去除錯.

點選綠色到除錯箭頭, 或者按F5, 需要選擇相應到命令:

由於dotnet watch run隨時會build出新到Tv.dll, 所以attach到dotnet Tv.dll即可. (dotnet watch run 和 dotnet exec是兩個不同到程式).

整合Git

在專案目錄執行git init之後, 左邊到Git選單就會起作用了:

常用都git命令都有對應的選單. 不過這篇文章裡, 其實並沒有使用到git.

-----------------------------------------------------------------------------------------------------

配置asp.net core 2.0 web api

這一部分, 主要做以下幾方面工作:

  • 建立api
  • 配置和使用entity framework core 2.0
  • 配置asp.net core
  • 使用automapper

建立domain models:

這裡有一些快捷操作, 如果是新手的話可能不知道, 那麼這一段我使用視訊. 

視訊好像釋出不出來, 請看連線:

http://v.qq.com/x/page/u0560t3iwef.html

http://v.qq.com/x/page/w05600dxo8j.html

這兩個model的程式碼如下, 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; }
    }
}

 

注意建立屬性的快捷鍵是prop, 建立建構函式的快捷鍵是ctor.

為了避免使用TvShows屬性時出現NullReference Exception, 所以建議在建構函式裡面初始化集合導航屬性.

 

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; }
    }
}

新增Entity Framework Core

這裡需要使用到dotnet ef 命令, 在專案目錄下執行命令:

dotnet ef

 

沒有找到這個命令, 這是因為還沒有新增ef到tools到專案.

參考官方文件: https://docs.microsoft.com/en-us/ef/core/miscellaneous/cli/dotnet

執行命令: 

dotnet add package Microsoft.EntityFrameworkCore.Design
dotnet restore

 

然後開啟Tv.csproj新增一個引用:

  <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>

 

再執行dotnet restore即可. 這時再執行dotnet ef命令, 就可以使用了:

建立DbContext

建立一個資料夾叫做Database, 然後在裡面建立一個檔案TvContext.cs:

using Microsoft.EntityFrameworkCore;

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

        }
    }
}

 

根據官方文件, 就是這樣建立dbcontext的.

使用dbcontext的時候, 是需要依賴注入的. 所以需要在Startup.cs的ConfigureServices把TvContext註冊到容器:

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

http://v.qq.com/x/page/f056037xm2q.html

通常我們是在appSettings.json裡面新增資料庫連線字串:

{
  "ConnectionStrings": {
    "Default": "server=localhost; database=tvdb; user id=sa; password=Bx@steel1;"
  },
  "Logging": {
    "IncludeScopes": false,
    "Debug": {
      "LogLevel": {
        "Default": "Warning"
      }
    },
    "Console": {
      "LogLevel": {
        "Default": "Warning"
      }
    }
  }
}

回到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();
        }

 

下面, 就可以建立資料庫了.

建立資料庫

首先新增migrations:

dotnet ef migrations add Initial

 

執行成功後, 會在專案裡生成一個Migrations資料夾:

可以看到Initial Migration檔案裡面什麼也沒有, 因為我忘記把Domain Model新增到TvContext裡面了.

所以使用命令:

dotnet ef migrations remove

 

來移除上一次新增並且還未更新到資料庫的migration, 注意這時候需要停止dotnet watch等操作, 還要注意的是, 在ef core裡千萬不要手動刪除遷移檔案, 因為這裡多出了一個Snapshot檔案, 它和所有的遷移是同步的.

相應的遷移檔案也被刪除了.

修改TvContext:

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; }
    }
}

然後重新執行dotnet ef migrations add Initial:

最後執行生成資料庫的命令:

dotnet ef database update

 

資料庫生成成功:

 

 

今天先寫到這, 過幾天會繼續寫. 

相關文章