从零开始一个我的博客 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登陆的，而后超级管理员能够进入博客后台进行管理，动图上面也有展现，下面仍是贴上最后的网站地址吧。

实际项目运行地址

先写到这里吧 回头再润色润色