前面章节进行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 |