angular学习笔记（3

HTTP请求，get

首先说因为我的作业现在也是改的别人的，所以这个地方，说实话，我还有很多地方不懂，我也是尽可能把我理解的地方进行一个简单的记录，防止下次忘记：
我们的作业要求是用一个nodejs写的api文档，利用angular框架进行访问！同时对数据库进行增删改查！
api文档还是很好改的，同时angular框架的搭建，可以看前面的笔记，基本上大大小小都写了不少，足够搭建一个前端的框架了！但是最难的是关于前端递交http请求到后端的这个让我不知所措！
首先：前端angular项目发送http请求，api文档将请求转为sql去查询数据库，然后数据库返回给前端数据，然后api中定义放回为json文档；

angular配置http请求

首先最先开始的就是angular如何去发送http请求，其实前端不用下什么插件，只需要发送声明就行了，就是引用http请求的声明，
首先在app-moudle.ts中写上如下的语句：

import { BrowserModule } from '@angular/platform-browser';

import { HttpClientJsonpModule, HttpClientModule } from '@angular/common/http';

然后再@NgModule中添加这个部分

 imports: [
    HttpClientModule, 
    HttpClientJsonpModule,],

这里是全局的配置，然后你要在你需要进行对后端访问的组件的ts文件中加入如下的代码：

import {HttpClient} from '@angular/common/http'

http请求使用方法

首先先看一下成品：

这是直接通过table输出的，先从ts上说一下弄成这个样子的方法吧：
首先显示定义了movie的类，这个类是关于表中的各个条目中的属性：

export class Movie {
  constructor(
    public movie_ID: number,//返回数字
    public title: string,//返回字符串
    public genre: string,//返回字符串
    public rating: string,//返回字符串
    public description: string,//返回字符串
  ){}
}

然后再组件的实现方法中对Movie类的使用：

export class MovieComponent implements OnInit {
	 movie: Movie[];
 .....
 .....
 ....
 }

之后在构造方法中声明请求：

constructor(private httpClient: HttpClient) {
    this.movie = [];//熟悉java的应该对这个很有感觉，调用方法实现
  }

然后是声明要调用的方法；如果学过java可能比较好理解这个地方；首先看我们的这个实现类：

export class MovieComponent implements OnInit 

这是一个去实现OnInit的类，也就是说OnInit是个类似接口一样的东西（当然我对这个理解不是很深刻，但是目前如果你可以跟的上我的理解思路，你应该能理解我的意思），所以onInit中只会有方法的声明，
一般如果你学到oop的话，你会知道，java的接口实在文件外的另一个定义为interface的文件，这个文件里面只有声明，但是angular中他的接口是定义在这个实现类中的：

ngOnInit(): void {
    this.getMovies();
  }

他在这里相当于声明或者说调用了一个叫getMovies的类，这个类的实现，写在了接口的外面。

 getMovies(){
    this.httpClient.get<any>('http://localhost:3080/api/cinema/movie').subscribe(
    //发出http申请，申请的方式是get，
    //调用的http接口是http://localhost:3080/api/cinema/movie
    //subscirbe是订阅，
      response => {
        this.movie = response;
        //响应到前端的页面，把movie中定义的属性展示出来
      }
    );
  }

前端的请求发送以及方法实现就是这样完成的。
同时他的html页面是使用的ng-for进行的遍历输出

<tbody>
        <tr *ngFor="let movie of movie">
            <td><span>{{movie.movie_ID}}</span></td>
            <td><span>{{movie.title}}</span></td>
            <td><span>{{movie.genre}}</span></td>
            <td><span>{{movie.rating}}</span></td>
            <td><span>{{movie.description}}</span></td>
        </tr>
        </tbody>

加入适当的css修饰：

table {
    border-collapse: collapse;
    margin: 0 auto;
    text-align: center;
}

table td,
table th {
    border: 1px solid #cad9ea;
    color: #666;
    height: 40px;
}

table thead th {
    background-color: #CCE8EB;
    width: 250px;
}

table tr:nth-child(odd) {
    background: rgb(255, 222, 222);
}

table tr:nth-child(even) {
    background: #c9ffff;
}

基本上前端就算完成了

跨域cors解决

这个对于一些有经验的来说是肯定知道的，但是我第一次做发现了这个让我很头疼的事情，那就是跨域请求错误；当然报错的地方你去百度上查就知道了，我这边说一下怎么解决；
原理其实我不太清楚，只知道需要cors进行访问，这个要在后端的api文档中进行撰写。
我们的api文档其实是个ts文件，在server.js中进行一个声明：

var cors=require("cors");
app.use(cors());

当然，这是声明，用nodejs进行声明的部分，这个cors是个插件，是需要下载的，下载指令为：

npm install cors

然后就可以达到我之前的那个效果了！

reference：

大致说一下，我是典型的cv工程师，源码其实是我改的别人的，然后之前看到的网页布局仅仅用于个人实践，没有商业内容；感谢ufo大佬和烟哥的帮助！