Angular 5与Spring MVC集成方案及相关技术咨询

嘿，针对你用Spring MVC 5和Angular 5开发Web应用的这些问题，我来一步步给你捋清楚：

1. 是否需要部署两个独立Web应用？ #

两种方案都可行，各有优劣，完全取决于你的项目规模和需求：

• 分开部署：前后端彻底解耦，前端团队和后端团队可以独立开发、测试、发布；后续可以根据各自的负载独立扩容（比如前端用CDN+Nginx集群，后端用Tomcat集群），适合中大型生产项目。
• 集成部署：把Angular打包后的静态资源嵌入Spring MVC项目，只部署一个Web应用，部署流程简单，维护成本低，适合小型项目、演示项目或者初期快速迭代阶段。

2. 若分开部署，Angular 5适配何种Web服务器？ #

Angular打包后是纯静态资源（HTML/CSS/JS），适合用专门的静态资源服务器，推荐这几个：

• Nginx（最推荐生产环境）：性能优异，静态资源处理速度快，还能轻松配置反向代理，把前端的API请求转发到Spring MVC服务端，同时支持HTTPS、负载均衡等功能。
• Apache HTTP Server：老牌服务器，配置灵活，同样适合托管静态资源和做反向代理。
• Node.js http-server（仅开发/测试用）：轻量便捷，安装后直接在Angular的dist目录运行http-server就能启动服务，适合快速验证前端代码。
• Tomcat：也能托管静态资源，但静态资源处理效率不如Nginx，一般不推荐单独用它部署前端。

3. 若不分开部署，如何实现二者集成？ #

核心思路是把Angular打包后的静态资源嵌入Spring MVC项目，让Spring的Web容器同时托管静态资源和REST接口，步骤如下：

1. 构建Angular项目：在Angular项目根目录执行ng build --prod，会生成dist目录，里面是打包好的静态资源。
2. 复制静态资源：把dist里的所有文件复制到Spring MVC项目的src/main/resources/static目录（如果是Spring Boot），或者src/main/webapp目录（传统Spring MVC）。
3. 配置Spring MVC路由：为了处理Angular的前端路由（刷新页面404的问题），需要把所有非API请求转发到index.html，可以通过配置类实现：

@Configuration
public class WebMvcConfig implements WebMvcConfigurer {
    @Override
    public void addViewControllers(ViewControllerRegistry registry) {
        // 根路径指向index.html
        registry.addViewController("/").setViewName("forward:/index.html");
        // 所有非API请求都转发到index.html，解决Angular路由刷新404
        registry.addViewController("/**").setViewName("forward:/index.html");
    }
}

4. 部署运行：把Spring项目打包成WAR或JAR，部署到Tomcat，或者直接用Spring Boot内嵌Tomcat启动。

4. 可运行的集成示例 #

第一步：Angular 5前端代码 #

先写一个简单的调用后端API的组件：

// src/app/user.service.ts
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable()
export class UserService {
  constructor(private http: HttpClient) {}

  // 调用后端的/api/users接口
  getUsers() {
    return this.http.get('/api/users');
  }
}

// src/app/user.component.ts
import { Component, OnInit } from '@angular/core';
import { UserService } from './user.service';

@Component({
  selector: 'app-users',
  template: `<h3>用户列表</h3><ul><li *ngFor="let user of users">{{user.name}}</li></ul>`
})
export class UserComponent implements OnInit {
  users: any[] = [];

  constructor(private userService: UserService) {}

  ngOnInit() {
    this.userService.getUsers().subscribe(data => {
      this.users = data;
    });
  }
}

记得在app.module.ts中导入HttpClientModule并声明组件，然后执行ng build --prod生成静态资源，复制到Spring项目的static目录。

第二步：Spring MVC后端代码 #

写一个简单的REST接口和配置类：

// src/main/java/com/example/demo/controller/UserController.java
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import java.util.ArrayList;
import java.util.List;

@RestController
@RequestMapping("/api/users")
public class UserController {

    @GetMapping
    public List<User> getUsers() {
        List<User> userList = new ArrayList<>();
        userList.add(new User("Alice"));
        userList.add(new User("Bob"));
        userList.add(new User("Charlie"));
        return userList;
    }

    // 内部用户实体类
    static class User {
        private String name;

        public User(String name) {
            this.name = name;
        }

        public String getName() {
            return name;
        }

        public void setName(String name) {
            this.name = name;
        }
    }
}

// src/main/java/com/example/demo/config/WebMvcConfig.java
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.ViewControllerRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

@Configuration
public class WebMvcConfig implements WebMvcConfigurer {
    @Override
    public void addViewControllers(ViewControllerRegistry registry) {
        registry.addViewController("/").setViewName("forward:/index.html");
        registry.addViewController("/**").setViewName("forward:/index.html");
    }
}

启动Spring Boot应用后，访问http://localhost:8080就能看到Angular页面展示后端返回的用户列表了。

5. 单服务器运行二者是否为最佳实践？ #

分场景判断：

• 适合单服务器的场景：小型项目、内部工具、演示原型、初期开发阶段。这种情况下，单服务器部署能减少运维成本，快速上线。
• 不适合单服务器的场景：生产环境、高并发项目、需要独立扩容的项目。分开部署可以让前端和后端各自独立优化：前端用CDN加速静态资源，后端根据API请求量扩容；而且前后端可以独立发布，不会因为前端更新影响后端服务，反之亦然。

总的来说，根据你的项目阶段和规模选择最合适的方案就好～

内容的提问来源于stack exchange，提问作者rahul shalgar