Identity Server 4 原理和实战(完结)_建立Angular 客户端_数据



Identity Server 4 原理和实战(完结)_建立Angular 客户端_表单_02

​https://material.angular.io/​


第一部是安装angular cli

Identity Server 4 原理和实战(完结)_建立Angular 客户端_css_03



Identity Server 4 原理和实战(完结)_建立Angular 客户端_web服务_04

--prefix=ac:前缀

--routing:默认使用路由

style=scss:样式使用scss

--dry -run表示模拟这个流程,但是实际上不会生成这些文件


Identity Server 4 原理和实战(完结)_建立Angular 客户端_自定义_05


Identity Server 4 原理和实战(完结)_建立Angular 客户端_数据_06


不模拟就是把后面的  --dry -run去掉

Identity Server 4 原理和实战(完结)_建立Angular 客户端_数据_07

调整文字的大小

Identity Server 4 原理和实战(完结)_建立Angular 客户端_表单_08

-o就是打开浏览器

Identity Server 4 原理和实战(完结)_建立Angular 客户端_表单_09

使用npm run start也是可以的

Identity Server 4 原理和实战(完结)_建立Angular 客户端_数据_10

出现这个画面就是正常的

Identity Server 4 原理和实战(完结)_建立Angular 客户端_自定义_11

使用官方的ui

Identity Server 4 原理和实战(完结)_建立Angular 客户端_web服务_12

安装依赖的一些库

Identity Server 4 原理和实战(完结)_建立Angular 客户端_css_13

另外一种安装的方法,安装依赖 还会对项目有一些配置

Identity Server 4 原理和实战(完结)_建立Angular 客户端_数据_14

Identity Server 4 原理和实战(完结)_建立Angular 客户端_自定义_15

选择默认的样式

Identity Server 4 原理和实战(完结)_建立Angular 客户端_自定义_16

Identity Server 4 原理和实战(完结)_建立Angular 客户端_数据_17


material的依赖项也装上了

Identity Server 4 原理和实战(完结)_建立Angular 客户端_数据_18


Identity Server 4 原理和实战(完结)_建立Angular 客户端_自定义_19

默认已经配置好了

Identity Server 4 原理和实战(完结)_建立Angular 客户端_数据_20

步骤4已经加载了默认的样式文件

Identity Server 4 原理和实战(完结)_建立Angular 客户端_表单_21

10分20秒

Identity Server 4 原理和实战(完结)_建立Angular 客户端_表单_22

使用方法

Identity Server 4 原理和实战(完结)_建立Angular 客户端_数据_23


Identity Server 4 原理和实战(完结)_建立Angular 客户端_表单_24

就会在Components文件夹下生成一个文件夹navbar

Identity Server 4 原理和实战(完结)_建立Angular 客户端_web服务_25

所有的组件都以ac开头

Identity Server 4 原理和实战(完结)_建立Angular 客户端_web服务_26


Identity Server 4 原理和实战(完结)_建立Angular 客户端_表单_27


ng serve -o查看效果

Identity Server 4 原理和实战(完结)_建立Angular 客户端_css_28

右侧中间部分放路由的容器

Identity Server 4 原理和实战(完结)_建立Angular 客户端_web服务_29

给容器部分加一个样式

Identity Server 4 原理和实战(完结)_建立Angular 客户端_web服务_30


Identity Server 4 原理和实战(完结)_建立Angular 客户端_自定义_31

后缀名都改成scss

Identity Server 4 原理和实战(完结)_建立Angular 客户端_css_32


Identity Server 4 原理和实战(完结)_建立Angular 客户端_表单_33

没有什么可以路由的页面,这里再做一各组件

Identity Server 4 原理和实战(完结)_建立Angular 客户端_表单_34


Identity Server 4 原理和实战(完结)_建立Angular 客户端_css_35


Identity Server 4 原理和实战(完结)_建立Angular 客户端_web服务_36

都匹配不上也,跳转到Dashboard

Identity Server 4 原理和实战(完结)_建立Angular 客户端_自定义_37


Identity Server 4 原理和实战(完结)_建立Angular 客户端_自定义_38


Identity Server 4 原理和实战(完结)_建立Angular 客户端_css_39

使用angular访问web服务

web服务不需要授权

Identity Server 4 原理和实战(完结)_建立Angular 客户端_css_40

这里就先不是用数据库了,使用memory缓存

Identity Server 4 原理和实战(完结)_建立Angular 客户端_表单_41

ImemoryCache注入进来

Identity Server 4 原理和实战(完结)_建立Angular 客户端_web服务_42

新建实体类 就三个属性

Identity Server 4 原理和实战(完结)_建立Angular 客户端_数据_43



Identity Server 4 原理和实战(完结)_建立Angular 客户端_自定义_44


Identity Server 4 原理和实战(完结)_建立Angular 客户端_表单_45

Identity Server 4 原理和实战(完结)_建立Angular 客户端_自定义_46

Identity Server 4 原理和实战(完结)_建立Angular 客户端_数据_47

现在api1是不需要授权的


angular生成table的命令

Identity Server 4 原理和实战(完结)_建立Angular 客户端_css_48


Identity Server 4 原理和实战(完结)_建立Angular 客户端_表单_49

然后是路由的配置

Identity Server 4 原理和实战(完结)_建立Angular 客户端_web服务_50

添加菜单

Identity Server 4 原理和实战(完结)_建立Angular 客户端_web服务_51

Identity Server 4 原理和实战(完结)_建立Angular 客户端_自定义_52

 生成Angular的Service

Identity Server 4 原理和实战(完结)_建立Angular 客户端_表单_53


Identity Server 4 原理和实战(完结)_建立Angular 客户端_web服务_54

先看一下效果,会生成两个文件。Spec是用于测试的

Identity Server 4 原理和实战(完结)_建立Angular 客户端_表单_55


Identity Server 4 原理和实战(完结)_建立Angular 客户端_css_56

这也是Ctrl+.有一个快捷键

Identity Server 4 原理和实战(完结)_建立Angular 客户端_表单_57

Identity Server 4 原理和实战(完结)_建立Angular 客户端_css_58

使用这个组件,必须现在Modules引入。app.modules.ts

Identity Server 4 原理和实战(完结)_建立Angular 客户端_自定义_59

写一个方法来查询所有的Todo

Identity Server 4 原理和实战(完结)_建立Angular 客户端_数据_60

新建Models类来接受api返回的数据

Identity Server 4 原理和实战(完结)_建立Angular 客户端_数据_61

这里是定义接口的形式

Identity Server 4 原理和实战(完结)_建立Angular 客户端_css_62


设置了返回类型,Ctrl+. 导入了引用

Identity Server 4 原理和实战(完结)_建立Angular 客户端_数据_63


todos变量实现了IToDo的接口

Identity Server 4 原理和实战(完结)_建立Angular 客户端_数据_64


Identity Server 4 原理和实战(完结)_建立Angular 客户端_web服务_65


重新编译代码


页面上线都注释掉,只看控制台的输出

Identity Server 4 原理和实战(完结)_建立Angular 客户端_自定义_66

跨域的错误

Identity Server 4 原理和实战(完结)_建立Angular 客户端_css_67

在api1里面添加一个策略

Identity Server 4 原理和实战(完结)_建立Angular 客户端_自定义_68

然后再使用mvc的Filter 添加一个Filter。针对所有的controller的都使用这个策略

Identity Server 4 原理和实战(完结)_建立Angular 客户端_表单_69

然后在config里面

Identity Server 4 原理和实战(完结)_建立Angular 客户端_数据_70

这句话漏了加上了 在这里重新加上

Identity Server 4 原理和实战(完结)_建立Angular 客户端_表单_71

再次运行,已经可以看到前端的数据了

Identity Server 4 原理和实战(完结)_建立Angular 客户端_自定义_72

前端的代码简单的写写

Identity Server 4 原理和实战(完结)_建立Angular 客户端_web服务_73

我们是把数据放在todos这个变量上了。所以前台把数据源源改一下

Identity Server 4 原理和实战(完结)_建立Angular 客户端_css_74

Identity Server 4 原理和实战(完结)_建立Angular 客户端_表单_75

设置只有有数据才去显示table

Identity Server 4 原理和实战(完结)_建立Angular 客户端_表单_76


自定义列

Identity Server 4 原理和实战(完结)_建立Angular 客户端_表单_77

Identity Server 4 原理和实战(完结)_建立Angular 客户端_web服务_78

添加操作

生成一个form

Identity Server 4 原理和实战(完结)_建立Angular 客户端_自定义_79

Identity Server 4 原理和实战(完结)_建立Angular 客户端_css_80

添加一个菜单先

Identity Server 4 原理和实战(完结)_建立Angular 客户端_web服务_81

Identity Server 4 原理和实战(完结)_建立Angular 客户端_自定义_82

增加路由

Identity Server 4 原理和实战(完结)_建立Angular 客户端_表单_83

看一下生成的表单的样式效果

Identity Server 4 原理和实战(完结)_建立Angular 客户端_表单_84


修改form表单的样式

Identity Server 4 原理和实战(完结)_建立Angular 客户端_css_85

ts内线保留就一个字段

Identity Server 4 原理和实战(完结)_建立Angular 客户端_数据_86


Service内添加一个

Identity Server 4 原理和实战(完结)_建立Angular 客户端_css_87

再建一个add的model类

Identity Server 4 原理和实战(完结)_建立Angular 客户端_数据_88

这里只需要一个title属性就可以了。

Identity Server 4 原理和实战(完结)_建立Angular 客户端_web服务_89


Identity Server 4 原理和实战(完结)_建立Angular 客户端_自定义_90

页面的ts内具体的代码

Identity Server 4 原理和实战(完结)_建立Angular 客户端_css_91


Identity Server 4 原理和实战(完结)_建立Angular 客户端_数据_92


使用这个snackBar,需要在模块里面引入

Identity Server 4 原理和实战(完结)_建立Angular 客户端_css_93


Identity Server 4 原理和实战(完结)_建立Angular 客户端_数据_94

提交一条数据 成功了。

Identity Server 4 原理和实战(完结)_建立Angular 客户端_web服务_95


Identity Server 4 原理和实战(完结)_建立Angular 客户端_css_96


api的action写上 formBody

Identity Server 4 原理和实战(完结)_建立Angular 客户端_web服务_97


Identity Server 4 原理和实战(完结)_建立Angular 客户端_自定义_98

修改页面操作成功后来个跳转

Identity Server 4 原理和实战(完结)_建立Angular 客户端_表单_99


完活2019年6月1日12:54:20