Angular官方樣例Tour of Heroes通過angular-in-memory-web-api來模擬實現遠端呼叫對hero進行增刪改查，本節對其修改呼叫上一節實現的介面。

二、下載Angular官方樣例程式碼

三、安裝依賴包,在專案所在資料夾的控制檯（或cmd）中: npm install

四、關聯git: 

1、建立git創庫:   git init

2、關聯遠端創庫：git remote add origin https://gitee.com/lxhjh2015/heroes-web.git

3、拉取程式碼到本地：git pull origin master

4、本地新增：git add .

5、本地提交：git commit -am "第一次提交"

6、推送程式碼：git push

7、為了記錄本小節成果，建立本地分支: git checkout -b base

8、把本地分支上傳到遠端（遠端建立分支）：git push origin base

9、切換回master分支:git checkout master

10、建立本節工作分支: git checkout -b first

11、把本節工作分支上傳到遠端: git push origin first

這樣本地和遠端，都分別有三個分支master、base、first

五、修改angular專案程式碼

angular專案程式碼，僅僅需要修改兩個地方即可。

第一個地方,修改介面地址，把hero.service.ts檔案中

private heroesUrl = 'api/heroes';

修改為

private heroesUrl = 'http://192.168.33.154:8001/api/heroes';

IP地址修改為你的電腦的ip

第二個地方，取消angular-in-memory-web-api啟動，把app.module.ts檔案中

HttpClientInMemoryWebApiModule.forRoot(
      InMemoryDataService, { dataEncapsulation: false }
    )
 

這三行程式碼註釋即可。

六、允許heroapi的cros跨域請求

angular專案程式碼修改之後，並不能立馬實現介面呼叫，通過瀏覽器開發者工具檢視網路請求，會發現“invalid cors request”。意思是springboot的cros專案存在跨域限制，我們要解決cros問題.

1、在pom.xml檔案中新增依賴

<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-security</artifactId>
</dependency>

2、新增包com.jh.heroes.api.web.config

3、新增安全配置類WebSecurityConfig，程式碼為

package com.jh.heroes.api.web.config;

import org.springframework.context.annotation.Configuration;
import org.springframework.security.config.annotation.web.builders.HttpSecurity;
import org.springframework.security.config.annotation.web.configuration.EnableWebSecurity;
import org.springframework.security.config.annotation.web.configuration.WebSecurityConfigurerAdapter;

@Configuration
@EnableWebSecurity
public class WebSecurityConfig extends WebSecurityConfigurerAdapter {
	
	@Override
	protected void configure(HttpSecurity http) throws Exception {
		//關閉csrf,所有請求允許訪問
		http.cors().and().csrf().disable().authorizeRequests().anyRequest().permitAll();
	}
}

注：這個配置，關閉csrf，允許所有請求訪問，不做任何限制。

4、新增cros配置類CorsConfiguration，程式碼為

package com.jh.heroes.api.web.config;

import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

@Configuration
public class CorsConfiguration implements WebMvcConfigurer {
	@Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOrigins("*")
                .allowedMethods("POST", "GET", "PUT", "OPTIONS", "DELETE")
                .maxAge(3600)
                .allowCredentials(true);
    }
}

注：

A、這個配置最大限度的允許訪問。

B、早期的springboot這個配置檔案繼承於WebMvcConfiugrationAdaper，現在WebMvcConfiugrationAdaper已經過期。在WebMvcConfiugrationAdaper檔案中做了說明，我們應該直接實現WebMvcConfigurer.

七、git程式碼提交

 經過對angular和springboot專案的簡單修改，它們可以跑起來了。

1、在angular專案的控制檯，進行如下操作

A、git commit -am "修改介面地址，專案啟動時不啟動HttpClientInMemoryWebApiModule"

B、推送程式碼：git push

C、 切換到master分支:git checkout master

D、 master分支合併first分支程式碼:git merge first

E、把master分支程式碼上傳到遠端:git push

F、建立新的工作分割槽: git checkout -b second

G、把本地分支上傳到遠端（遠端建立分支）：git push origin second

2、在springboot專案的控制檯，進行如下操作

A、git add .

B、git commit -am "增加cros及security基礎配置"

C、推送程式碼：git push

D、 切換到master分支:git checkout master

E、 master分支合併first分支程式碼:git merge first

F、把master分支程式碼上傳到遠端:git push

G、建立新的工作分割槽: git checkout -b second

H、把本地分支上傳到遠端（遠端建立分支）：git push origin second

八、小結

本節使angular官方專案連線到我們用springboot製作的介面，同時也解決了springboot專案的cros跨域的問題。

參考