這是第三篇了，第一篇只是介紹，第二篇介紹了api專案的運行和啟動，如果api專案沒什么問題了，除錯都正常了，那基本上就沒什么事了，由于這一篇是講前端專案的，所以需要運行angular專案了，由于前端專案是需要呼叫介面的，好像要配置跨域，跨域這個東西，你可以在asp.net core專案上配置，這樣在本機5000埠運行時就可以直接呼叫了，也不會有跨域問題，也可以用nginx反向代理時配置跨域，由于我的專案要經常本地除錯，所以我在本地直接配置了跨域，這樣部署的時候 nginx就不用配置跨域了，具體的配置代碼如下，專案里其實已經配置好了，就貼下代碼看看吧，上一篇的最底部也已經寫上了，這次就再寫一次吧，
在startup類里的ConfigureServices方法里添加如下代碼
專案代碼鏈接在第一篇里
services.AddCors(options =>
{
options.AddPolicy("any", builder =>
{
builder.AllowAnyOrigin() //允許任何來源的主機訪問
.AllowAnyMethod()
.AllowAnyHeader()
.WithOrigins("http://192.168.1.109:4200", "http://localhost:4200", "http://192.168.1.103:4200",
"http://192.168.1.103:4200", "http://192.168.16.67:4200", "http://192.168.16.138:4200", "https://www.douwp.club")
.AllowCredentials()//指定處理cookie
.SetPreflightMaxAge(TimeSpan.FromSeconds(60));
});
});
在Configure方法里使用跨域 app.UseCors("any");
做到這些以后就可以愉快的玩耍了，所以來看看前端專案吧 下面是專案結構圖
標準的前端專案檔案結構 其實angular對于后端開發來說上手還是蠻快的 ts寫著很順手，就是前端擼起來比較蛋疼，好在第三方的ui庫挺多的，我用的主要就是螞蟻金服的 NG-ZORRO，對angular支持的還算可以，之前聽阿里的哥們說angular挺老了，感覺現在學起來好像有點不流行了，不過不管怎么說，也算是搞完了，其他的什么就以后再說吧，下面看看專案運行后的圖，我現在已經把它部署到自己的服務器上了，
ui有點簡陋 不過作為一個博客展示用的網站也夠了，域名我申請的是
www.douwp.club 意思是做UWP 不過do uwp好像沒分開很容易被誤解，我也很郁悶，不過無所謂了，大不了回頭再申請個，
命令列進入專案檔案夾，然后執行npm install npm start就可以運行了，當然你裝了angular一些東西，也可以直接使用ng serve什么的運行專案，運行之前建議先把api專案給運行起來，
如果是不了解這些的朋友沒關系，你可以先把angular的官方檔案給看一遍，下面是鏈接，
一套框架，多種平臺 移動端 & 桌面端 angular中文鏡像網站
這里基本上講述了所有的angular的知識
下面是TypeScript網站
TypeScript 相關介紹
當然還有es 6的一些知識 下面是一個同事推薦的一個人的博客
ES6 入門教程
最后就是我用到了ui框架的網站了
Ant Design of Angular
感覺這些對于angular 零基礎的的人應該很有幫助，看完以后應該就能使用angular做些東西了，
專案運行以后沒問題基本上就算是好了，這個博客是用qq登錄的，然后超級管理員可以進入博客后臺進行管理，動圖上面也有展示，下面還是貼上最后的網站地址吧，
實際專案運行地址
先寫到這里吧 回頭再潤色潤色
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/67204.html
標籤：.NET Core