前面章節進行CORS跨域設置時，我們使用了@CrossOrigin("*")，但明顯的隨著項目的增大，我們重復的書寫該代碼的次數便會越來越多。本著**不造重復的輪子**的原則，我們使用以下方法對整個項目進行CORS設置，從而避免了每建立一個方法都要增加一個跨域設置的煩惱。 # 統一設置跨域信息 首先建立放置項目配置信息的包：config，然后新建`WebConfig.java`: ``` package com.mengyunzhi.springBootStudy.config; import org.springframework.context.annotation.Configuration; import org.springframework.web.servlet.config.annotation.CorsRegistry; import org.springframework.web.servlet.config.annotation.EnableWebMvc; import org.springframework.web.servlet.config.annotation.WebMvcConfigurer; @Configuration ? @EnableWebMvc ? public class WebConfig implements WebMvcConfigurer ? { @Override ? public void addCorsMappings(CorsRegistry registry) { registry.addMapping("/**") ? .allowedOrigins("http://localhost:4200") ? .allowedMethods("PUT", "DELETE", "POST", "GET", "PATCH"); ? } } ``` * ? 該類是一個用于進行項目配置的類 * ? 將其添加到由`@Configuration`注解的類上，導入`MVC`配置信息 * ? 想變更WebMvc的配置信息，則實現WebMvcConfigurer * ? 實現接口中的方法 * ? 配置CORS信息：任意請求地址。 * ? 配置CORS信息：由http://localhost:4200發起訪問的。 * ? 配置CORS信息："PUT", "DELETE", "POST", "GET", "PATCH"方法均可發起跨域訪問。 此時，我們便可以刪除原`TeacherController`中的對跨域進行的相關設置了，如： ``` @DeleteMapping("{id}") @CrossOrigin("*") ? public void delete(@PathVariable Long id) { String sql = String.format( "delete from `teacher` where id = %s", id); this.jdbcTemplate.update(sql); } ``` # 顯示班級列表 我們分別啟動前后臺，并在數據庫中添加對應的測試數據。 教師表：  班級表：  ## 直接引用組件 如果想在項目中顯示教師列表，前提是在項目中引入教師列表組件。前面我們又講過：組件依賴于模塊存在，在使用某個組件前，必須引入該組件所在的模塊： app.module.ts ``` import {KlassModule} from './klass/klass.module'; ? @NgModule({ declarations: [ AppComponent, TeacherAddComponent, TeacherEditComponent, TeacherIndexComponent ], imports: [ BrowserModule, AppRoutingModule, HttpClientModule, FormsModule, KlassModule ? ], providers: [], bootstrap: [AppComponent] }) export class AppModule { } ``` ### 定制路由 app.routing.module.ts ``` import {IndexComponent} from './klass/index/index.component'; ? const routes: Routes = [ { path: 'teacher', component: TeacherIndexComponent }, { path: 'teacher/add', component: TeacherAddComponent }, { path: 'teacher/edit/:id', component: TeacherEditComponent }, { ? path: 'klass', component: IndexComponent } ]; ``` ### 測試  這是由于我們在進行組件開發的測試環節中，直接將組件放到了`TestModule`中進行測試。對`組件`的單元測試只保證了`組件`的正常運行，但無法保證`模塊`是正常運行的，`klass`模塊的正常運行依賴于`BrowserModule`及`FormsModule`： klass/klass.module.ts ``` import {NgModule} from '@angular/core'; import {IndexComponent} from './index/index.component'; import {FormsModule} from '@angular/forms'; import {BrowserModule} from '@angular/platform-browser'; /** * 班級模塊 */ @NgModule({ declarations: [IndexComponent], imports: [ BrowserModule, ? FormsModule ? ] }) export class KlassModule { } ``` #### 測試  ## 完善信息 最后，我們將班級管理添加到導航中： app.component.html ``` <h2>歡迎使用河北工業大學教務管理系統</h2> <ul> <li><a routerLink="">首頁</a></li> <li><a routerLink="teacher">教師管理</a></li> <li><a routerLink="klass">班級管理</a> </li> </ul> <router-outlet></router-outlet> ``` # 項目結構圖 最終項目的整體結構圖如下所示：  # 參考文檔 | 名稱 | 鏈接 | 預計學習時長(分） | | --- | --- | --- | | 源碼地址 | [https://github.com/mengyunzhi/spring-boot-and-angular-guild/releases/tag/step3.2.10](https://github.com/mengyunzhi/spring-boot-and-angular-guild/releases/tag/step3.2.10) | - | | mvc cors global | [https://docs.spring.io/spring/docs/5.2.1.RELEASE/spring-framework-reference/web.html#mvc-cors-global](https://docs.spring.io/spring/docs/5.2.1.RELEASE/spring-framework-reference/web.html#mvc-cors-global) | 10 |