最近使用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
數據庫生成成功:
今天先寫到這, 過幾天會繼續寫.