從零開始一個個人博客 by asp.net core and angular（三)

這是第三篇了，第一篇只是介紹，第二篇介紹了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登錄的，然后超級管理員可以進入博客后台進行管理，動圖上面也有展示，下面還是貼上最后的網站地址吧。

實際項目運行地址

先寫到這里吧 回頭再潤色潤色