歡迎光臨
每天分享高質量文章

仿B站(一) 目的分析以及創建 WebAPI + Angular7 專案

前言:

本系列文章主要為對所學 Angular 框架的一次微小的實踐,對 b站頁面作簡單的模仿。

本系列文章主要參考資料:

微軟文件:    https://docs.microsoft.com/zh-cn/aspnet/core/getting-started/?view=aspnetcore-2.1&tabs;=windows

Angular 文件:   https://angular.cn/tutorial

Typescript 文件: https://www.typescriptlang.org/docs/home.html

此系列皆使用 VSCode+C#+Typescript+Angular+EF Core 作為開發環境。如果有什麼問題或者意見歡迎在留言區進行留言。

如果圖片看不清的話請在新視窗打開圖片或儲存本地查看。

專案 github 地址:https://github.com/NanaseRuri/FakeBilibili

 本章內容:頁面分析、創建 WebAPI + Angular7 專案

 一、頁面分析

首先分析我大概要做些什麼效果:

  二、創建 WebApi + Angular 7 專案

 首先運行命令創建一個新專案:

    dotnet new angular -o FakeBilibili

由於 ASP.NET Core 的預設 Angular 專案使用的是 Angular6 框架,在此將命令列工作目錄轉移到當前目錄,將當前 Angular 專案刪除並使用 Angular CLI 創建新的 Angular 專案:

可選擇使用 –skipGit 跳過 Git 安裝。

    ng new ClientApp --skipGit

Angular 7中,當運行 ng new 命令時,若沒有指定樣式表型別或是否使用預設路由,會額外在命令列出現選擇項。在此為更方便地編寫樣式表選擇使用 scss。

在 Angular.json  檔案中更改 styles 屬性使用 scss,這裡影響的只是 Angular CLI 創建組件時的選項:

由於在一個 Angular+WebAPI 專案中同時存在後臺服務器以及 Angular 服務器,修改 Configure方法使其外部使用 Angular CLI 實體,而不是啟動它自己的實體。

          spa.UseProxyToSpaDevelopmentServer("http://localhost:4200");

此處指定端口號為 4200 是因為 Angular 應用預設端口號為 4200,可以在 package.json 檔案中對端口號進行修改:

 

三、啟動服務器

在 ClientApp 工作目錄中運行 npm start 命令(PS:使用 npm start 是約定,本質上運行的是 ng serve),然後在 ASP.NET Core 專案檔案夾中運行 dotnet run 命令:

當第一次運行 dotnet run 命令時會提醒創建 .vscode 檔案夾,其中的 launch.json 可以配置啟動環境,預設為 development 環境。

當使用 spa.UseProxyToSpaDevelopmentServer 方法後,如果在 Angular 專案未編譯完成啟動 https://localhost:5001/5000 會發生錯誤。

ClientApp 工作目錄中:

ASP.NET Core 專案工作目錄中:

第一次運行 npm start 命令可能會等待很長時間,Angular 專案編譯完成後如下:

 

 等待 Angular 專案編譯完成後打開 localhost:5000或5001,出現的是預設的 Angular 專案的模板:

如果沒有改寫原 Angular 專案的話,出現的是微軟專案的模板:


已同步到看一看
赞(0)

分享創造快樂