SpringBoot整合Ant Design Pro進(jìn)行部署

一、Ant Design Pro 打包

1.1 運(yùn)行 build打包

$ npm run build

1.2 將打包生成的靜態(tài)文件拷貝到spring boot 項(xiàng)目中

構(gòu)建打包成功之后，會在根目錄生成 dist 文件夾，然后將dist 文件夾里的的文件復(fù)制到 spring boot 項(xiàng)目的 /src/main/resources/static 目錄下

二、配置spring boot 項(xiàng)目可訪問到static目錄下的index.html

2.1 以gradle為例導(dǎo)入spring-boot-starter-thymeleaf

compile group: 'org.springframework.boot', name: 'spring-boot-starter-thymeleaf', version: '2.1.5.RELEASE'

2.2 在application.yml配置文件中配置

#配置html資源路徑

spring:
thymeleaf:
prefix: classpath:static/

2.3 在controller配置訪問地址

/**

• @author Alan Chen
• @description 攔截Ant Design Pro訪問路徑
• @date 2019/5/24*/
  @Controller
  br/>*/
  @Controller
  /**
• 配置url通配符，攔截多個地址
• @return
  */
  @RequestMapping(value = {
  "/",
  "/user",
  "/user/",
  "/console",
  "/console/"
  })
  public String fowardIndex() {
  return "index";
  }
  }

注意：@Controller不是@RestController，使用@RestController會返回“index”字符串

輸入地址 http://localhost:8080 、http://localhost:8080/user/login 都會轉(zhuǎn)發(fā)到index.html，從而展示Ant Design Pro頁面

2.4 配置spring boot 項(xiàng)目可訪問到static目錄下的js、css

嘗試訪問http://localhost:8080/user/login時(shí)，發(fā)現(xiàn)現(xiàn)在已經(jīng)能訪問到index.html了，但頁面報(bào)錯了，訪問不到j(luò)s和css,錯誤頁面如下：

需要配置一下，讓js、css等靜態(tài)資源去static目錄下去加載

@Configuration@EnableWebMvc
br/>@EnableWebMvc
br/>@Override
registry.addResourceHandler("/**").addResourceLocations("classpath:/static/");
}
}

三、整合完成

再次訪問http://localhost:8080/user/login 頁面顯示正常

訪問http://localhost:8080/console/commodity/product-brand 顯示后臺界面

四、補(bǔ)充2.3

關(guān)于2.3，網(wǎng)上有一種思路是這樣的：

Ant Design構(gòu)建完成后只有一個index.html頁面和一些js、css文件，當(dāng)使用browserHistory，如果直接放在Spring Boot的resource/static文件夾下面，當(dāng)瀏覽器直接訪問或者在非 "/ “，”/index"路徑刷新時(shí)，由于服務(wù)器無法正確響應(yīng)，會直接觸發(fā)404報(bào)錯。

解決思路：瀏覽器訪問任何404錯誤路徑都返回 /index.html文件。剩下的事情交給前端路由

@Controller
public class AntDesignController implements ErrorController {@Override
br/>@Override
return "/error";
}
@RequestMapping(value = "/error")
public String getIndex(){
return "index"; //返回index頁面
}
}

種方式也能實(shí)現(xiàn)效果，但這種方式使得所有的錯誤請求（404）都會被攔截跳轉(zhuǎn)到index.html ,其實(shí)不太嚴(yán)謹(jǐn)，而且給人的感覺是，先讓其“出錯”，再來“補(bǔ)救”

參考官方文檔：Ant Design Pro