一步一步配置ABP Core Template with Angular

1、首先去https://aspnetboilerplate.com/Templates下載模板工程，按如下勾選

 

 

2、下載后打開工程如下圖，並設置Web.host 作為啟動項目，rebuild 還原nuget包

啟動前需修改按需要數據庫連接地址，文件為xxx.Web.Host\appsettings.json中的

"ConnectionStrings": {
"Default": "Server=localhost/EXPRESS; Database=EcolposcopeDb; Trusted_Connection=True;"
},

然后執行數據庫遷移，方法如下：

選擇web.host 工程，執行update-Database

 

 

此時你啟動項目，你可以通過訪問http://localhost:21021/swagger/ 查看到你服務端的api，表面服務端程序運行成功。

 

 

3、安裝nodejs 地址如下：https://nodejs.org/en/，使用管理員權限打開node.js command prompt 命令窗體

 4、執行CD /d “”目錄“  進入到 Web.Host的工程目錄里

5、執行npm install 命令

6、執行npm start命令，進行客戶端的工程的編譯，可是此時許多報錯如下：

解決方法：

打開xxxWeb.Host\src\assets\fonts\roboto\roboto.css ，檢查

src: local('Roboto'), local('Roboto-Regular'), url(‘mErvLBYg_cXG3rLvUsKT_fesZW2xOQ-xsNqO47m55DA.woff2‘’) ， format(woff2‘);

所有的src的url，format是否帶引號，並且format前有逗號，然后重新執行npm start

 

7、此時可以運行localhost:4200 ,顯示登錄頁面如下：

 

如果你使用127.0.0.1:4200 地址運行的話，會報跨域訪問錯誤，配置文件在xx.Web.Host\appsettings.json中

  "App": {
    "ServerRootAddress": "http://localhost:21021/",
    "ClientRootAddress": "http://localhost:4200/",
    "CorsOrigins": "http://localhost:4200"
  },

設置CorsOrigins即可　　。

使用賬戶admin，密碼123qwe登錄即可

 

8、 API的使用

     （1）首先獲取AccessToken， 點擊展開下圖api接口，model中填入密碼賬戶，點try it out，即可得到token

 

 

 

 （2）設置身份驗證

點擊Authorize 按下圖輸入你剛剛獲取的accessToken

 

 

 

 3、設置身份驗證后，就可以調用其他api接口了