前面章节进行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); } ``` # 显示班级列表 我们分别启动前后台,并在数据库中添加对应的测试数据。 教师表: ![](https://img.kancloud.cn/91/7e/917e4a003140ac08bdb72a9baf878ee5_685x120.png) 班级表: ![](https://img.kancloud.cn/7e/41/7e41f42453d04f1fadd11d972a2489a3_478x163.png) ## 直接引用组件 如果想在项目中显示教师列表,前提是在项目中引入教师列表组件。前面我们又讲过:组件依赖于模块存在,在使用某个组件前,必须引入该组件所在的模块: 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 } ]; ``` ### 测试 ![](https://img.kancloud.cn/ed/51/ed514170c26143757d1a7df32eac3172_885x368.png) 这是由于我们在进行组件开发的测试环节中,直接将组件放到了`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 { } ``` #### 测试 ![](https://img.kancloud.cn/75/7f/757fd53124c77ac49e4982147d7bf88f_453x344.png) ## 完善信息 最后,我们将班级管理添加到导航中: 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://img.kancloud.cn/20/7c/207ccffc49aa23dd0218e524ecd945a3_927x418.png) # 参考文档 | 名称 | 链接 | 预计学习时长(分) | | --- | --- | --- | | 源码地址 | [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 |