Angular学习

搜索要点:直接Google搜英文temple例子来看,百度太菜了.

路由守卫，通过一个实现了路由守卫相关接口，并实现其方法的ts类实现，并且在路由页里面声明这个类的支持.简单的用法直接看官方文档.

注册的验证用户名，异步验证器，和邮箱， 异步验证器例子,非常详细,需要翻墙
实现方法为向formcontrol里面传入异步处理器，异步处理器为一个返回值为AsyncValidatorFn的函数，定义这个函数，在里面写出对服务的调用，返回一个string（作为这个错误的名字，其中可以放一些错误信息）。
异步处理器写法：

private isExistedValidator(check: string): AsyncValidatorFn {
    // 这是一个匿名函数.传入一个control,返回类型为 后面那一堆.
    // 服务类只用来进行得到数据.
    return (control: AbstractControl): Promise<ValidationErrors | null> | Observable<ValidationErrors | null> => {
      // return this.userService.checkIfExist(control.value).pipe(
      //   // 既然这里应该是一个boolean,那么应该是远程访问服务器里面的一个数据,在服务器处理才对.
      //   map(users => {
      //     console.log(control.value + '' + users);
      //     return (users && users.length > 0) ? {'usernameExists': true} : null;
      //   }
      // )
      // );
      // 函数式编程的过程不太懂,应该就是从最里层向外抛出一个结果,一直返回到最顶层.
      return timer(500).pipe(
        distinctUntilChanged(),
        switchMap(() => this.userService.checkIfExist(control.value, check).pipe(
          // 这里return的时候竟然直接返回了带有密码的整个user值,这是不对的.
          map(users => {
            console.log('返回值为'  + '\n' + JSON.stringify(users));
            return (users && users.length > 0) ? {'isExisted': true} : null;
          })
        )),
      );

服务器的UserService写法:

  // 注册时候需要做的事包括各种验证.传入两个参数就可以了.第一个参数传入表单的值,第二个参数传入要查询的属性.
  checkIfExist(controlValue: string, check: string, ): Observable<User[]> {
    // 如果没有输入用户名,则返回false,前台异步传给后台一个数据,查看后台是否已经存在,存在则返回一个布尔值.
    controlValue = '^' + controlValue.trim() + '$';
    console.log(' api/home_carousel/?' + check + '=' + controlValue);
    // 这里返回的结果是错误的,因为返回的是整个User的信息,应该在服务器那里滤去密码等信息?
    return this.http.get<User[]>( ' api/home_carousel/?' + check + '=' + controlValue);
    // 下面这个写法是错误的,没有加正则.
    // return this.http.get<User[]>(`api/home_carousel/?username=${username}`);
  }

UserService里面写的时候要注意大坑,其实就是传参时候的问题.

1.要对传进参数进行正则表达式的处理,比如这里的api/users/?username=name需要写成api/users/username=^name$,要使用正则的说法,否则进行全匹配查找的结果就是不正确的.
2.url传入参数的时候不能使用特殊字符,所以在验证email的时候就会出错,因为email里面有@符号,所以需要进行处理.参考资料,不全
3. 以上方法全部为使用官方所给的In-memory-http-service的方法,当使用java等语言,tomcat等作为服务器的时候,这么写是不行的,查到的资料显示SpringMVC的请求的Context-type和angular的无法匹配,则不能进行传递(post方法).
4. 重要,使用Angular的方式进行传递的时候,默认的请求头的Context-type都为json格式,但是SpringMVC处理post的时候只接受Context-type为form的格式,所以无法进行传递,前端会报500的错误,另外也会报Access-Control-Allow-Origin,需要在后端进行设置response的请求头.Angular SpringMVC post
参考资料2解决方法
5. 搜了一圈没找到答案.这里好像有用
参考1
参考2
从这里得知当浏览器请求的内容为Ajax + json的数据的时候,因为是复杂型请求,所以浏览器先发出了一个OPTIONS请求到服务器,此时服务器内的定义的方法里面的request.setHeaders{Access-ControlXXX}这个方法还没有进行到(其只有在正式的response里面才会添加这个头),而另一方面,SpringMVC又禁止了OPTIONS的请求,所以默认会有错误,需要在web.xml文件里面将其限制解除
大致流程为 客户端发起JSON+Ajax(post)请求 > 发送OPTIONS预请求 > SpringMVC默认关闭OPTIONS > 返回错误值 > 配置SpringMVC,解除其限制之后 > 客户端发送OPTIONS > 返回允许访问 > 传递JSON参数 > 返回数据.
自己写拦截器 这个比较高大上,忽略不看先.
关于简单请求和复杂型请求的说明
非常棒和详细的解决办法 SpringMVC
使用简单的Servlet的方法进行配置的时候不使用SpringMVC
同源策略
CROS
讲解CORS的配置的意思
6. 最终,问题已经解决,首先,配置了cors > 使用了 <mvc:annotation-driven />注解而不是视频教程中的自己加入的handler,原因为请求的数据并不是json的时候,会出现别的错误,而这个注解默认就配置了数个handler可以满足请求的数据的处理. > 去除 RequestBody,因为我这里问题比较多一点,不是单纯的json数据.提交图片的时候需要修改form表单的contentType为另一种而不是json.
7. request获取请求的body需要注意的.注意在request里面调用了getparameter之后request的body就得不到了.
8.

在此期间学习到了几个东西，

1，若想在HTML里面直接使用某个实体类，需要在组件类里面添加一个 get fn()并返回这个实体类。

2，formarray内部是匿名的，使用formarray.get（[0]）时需要注意往里面传入的是索引

3，return方法多重嵌套的时候，一层层往外抛出。

新建用户，

新建用户的时候是否依然使用token对数据进行保护？

登陆验证token，

新建文章

markdown编辑器，定时保存。

新建评论，

回复评论。