從零開始一個我的博客 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登陸的，而後超級管理員能夠進入博客後臺進行管理，動圖上面也有展現，下面仍是貼上最後的網站地址吧。

實際項目運行地址

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