背景介紹：
今天把登錄頁面的HTTP請求和路由配置了一下，然後通過請求到的數據進行路由跳轉；
首先配置反向代理，之前用原生的時候是通過nginx來進行反向代理解決跨域的問題，但是使用ng後，需要在瀏覽器輸入locahost:端口號 進行訪問，和nginx的方式是一樣的；
網上搜了一圈怎麼通過nginx來代理ng解決都沒有解決~
然後查到資料說angular有自帶的HTTP代理方法：
首先是代理文件的配置：
創建一個json格式的代理配置文件，裏面的配置信息爲，
{
“/carrots-admin-ajax/“: { 所有接口都在這個路徑下面，所以這句的意思就是所有以這個路徑開頭的HTTP請求都通過代理進行轉發
“target": "http://dev.admin.carrots.ptteng.com/", target爲轉發的目的地址，當頁面請求滿足匹配規則時，請求被轉發至target指向的地址，在未配置pathRewrite的情況下，請求中的所有路徑和參數會被同時轉發到目的地址。
“secure": false, 指定是否驗證SSL證書，開發環境基本不會走https協議，此處默認false。
“pathRewrite": {
"^/carrots-admin-ajax/": ""
}, 轉發時地址的rewrite規則。後臺規則中，如果接口有路徑有“/carrots-admin-ajax/“ 這層路徑的話，就不需要加上這個；如果沒有這層路徑的話，就得配置這個規則，否則這個路徑也會和參數一起發送到服務器，然後就報錯啦~~ 我們的後臺是有這個路徑的，本來沒有配置這個規則的，但是做了一件蠢事~~ 在發送HTTP請求的URL的時候我把’/carrots-admin-ajax/a/login’也加上了~~然後路徑重複，就報錯咯~~ 所以就加上了這個pathRewrite規則！
"changeOrigin": true,
"logLevel": "debug"
} }
json配置文件：
配置好以後，使用命令ng serve --proxy-config proxy.config.json啓動服務，此時符合轉發規則的請求就會被代理愉快的轉發了。
HTTP在angular中被拆分成一個單獨的模塊，所以要在App.ts中從@angular/http中導入常量，
import { Headers, RequestOptions, URLSearchParams } from ‘@angular/http';
或者導入HttpModule ，這是一個便於使用的模塊集合，導入以後作爲依賴導入到ngmodule.imports列表中，這樣就可以把上面列出來的這些模塊導入組件當中；
關於這個NgModule，現在瞭解到的就是每個在NgModule中指定過的都會成爲’模塊’的一部分，如果想在別的組件中使用，必須執行這一步，可以把NgModule看成一箇中轉站，所有的模塊和組件只有通過中轉站纔有可能進行互相訪問，它就是一個樞紐；
導入以後進入需要使用該模板的組件當中，把需要的模板導入至組件中；
import {
Component,
OnInit
} from '@angular/core';
import { Http, Response, Headers, RequestOptions, URLSearchParams } from '@angular/http'; /* 導入http需要使用到的模塊 */
import { Router } from '@angular/router'; /* 導入路由模塊 */
@Component({
selector: 'app-login-page',
templateUrl: './login-page.component.html',
styleUrls: ['./login-page.component.scss']
})
export class LoginPageComponent implements OnInit {
data = {
message: '',
}; /* 一定要先聲明message字段纔可以進行操作 */
constructor(public http: Http ,
private router: Router,
) {
this.http = http; /* 把實例化的http賦值，這樣在下面好調用 */
}
submit(name: HTMLInputElement, password: HTMLInputElement): boolean {
const postData = `name=${name.value}&pwd=${password.value}`; /* 獲取輸入的值 */
// console.log(postData);
const headers = new Headers();
headers.append('Content-Type', 'application/x-www-form-urlencoded');
const options = new RequestOptions({ headers: headers }); /* 添加請求頭 */
this.http.post(
'/carrots-admin-ajax/a/login', postData, options
).subscribe((res: Response) => {
this.data = res.json();
if (this.data.message === 'success') {
// console.log(this.data);
this.router.navigateByUrl('backend/main');
}
});
/* 通過在構造函數中實例的http屬性來發送請求，調用this.http.post並傳入URI（
因爲是跨域請求，所以只要發送URI就好了），然後請求會返回一個Observable對象，然後可以使用subscribe訂閱變化，
這是一種異步變成的回調函數，當http.post返回一個流時，會發出一個Response對象，所以在這個回調函數的參數中把對象實例給
一個res變量，在這個函數中用json方法提取並解析成一個 Object，然後賦值給this.data 。這裏需要除以的是data一定要先聲明
包括下面的用來判斷進行跳轉路由的 message（這是返回的數據中的一個屬性），如果不提前聲明字段的話就會報錯！） */
// console.log(`名字爲：${name.value}，密碼爲：${password.value}`);
return false; /* 這裏返回布爾值是因爲click時間唄冒泡到父級。瀏覽器會嘗試導航這個空白鏈接，所以瀏覽器
就刷新了。價格return false 只有當前元素會被冒泡，不會再向上冒泡了 */
} /* 爲button綁定事件 */
ngOnInit() {}
}
接下來就是配置路由，配置路由是找的ng官網的方法。
angular中最佳的方式就是在一個獨立的頂級模塊中加載和配置路由器，它只負責路由功能，意思就是從組件中獨立出來了，然後根據AppModule中導入它。
這個模塊類在src/app下生成：ng generate module app-routing —flat —module=app ，其中—flat 把這個文件放進了 src/app 中，而不是單獨的目錄中。 —module=app 告訴 CLI 把它註冊到 AppModule 的 imports 數組中。
1、通常不會在路由模塊中聲明組件，所以可以刪除 @NgModule.declarations 並刪除對 CommonModule 的引用。
3、添加一個 @NgModule.exports 數組，其中放上 RouterModule 。 export 導出 RouterModule 讓路由器的相關指令可以在 AppModule 中的組件中使用。
配置好的路由頁面爲：
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { LoginPageComponent } from './login-page/login-page.component'; /* 導入登錄頁 */
import { BackendMainComponent } from './backend-main/backend-main.component'; /* 導入後臺主頁 */
const routes: Routes = [
{ path: '', redirectTo: '/login', pathMatch: 'full'}, /* 默認路由，應用啓動時加載的 */
{ path: 'login', component: LoginPageComponent}, /* 定義登錄頁路由 */
{ path: 'backend/main', component: BackendMainComponent}, /* 定義後臺主頁路由 */
];
/* 添加一個路由定義，當用戶點擊某個鏈接或者輸入urL時會顯示哪個視圖，
path 用於匹配URL 的字符串
component 當導航到這個路由時 路由器應該創建哪個組件 */
@NgModule({
imports: [
RouterModule.forRoot(routes)
],
/* 初始化路由器，讓它監聽瀏覽器中的地址變化，使用routes來配置 */
exports: [RouterModule], /* 添加出口讓路由器的相關指令能在Appmodule中使用 */
declarations: []
})
export class AppRoutingModule { }
上面的都配置好以後，還需要一個路由出口，不然添加好的路由沒地方出來呀
<router-outlet></router-outlet>
把這個添加到HTML模板中，它會告訴路由器在哪裏顯示路由到的視圖 ；
1、如果配置反向代理解決跨域問題
2、如果發送HTTP請求
3、如果配置路由模塊
以上問題的答案在文章中有說明