将react或者vue项目整合springboot

原创已于 2023-06-20 16:15:04 修改 · 460 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#react.js #vue.js #spring boot

于 2023-06-20 16:08:48 首次发布

本文介绍了如何将一个基于React+Datav组件的前端工程打包，并集成到SpringBoot后端中。首先通过`npmrunbuild`打包前端，然后将生成的`static`、`favicon.ico`和`index.html`分别放入SpringBoot的`resources/static`和`templates`目录。接着，调整`index.html`中引用的CSS文件路径，以适应Thymeleaf。最后，创建一个后端控制器进行页面转发。

前端工程

我这边用一个基于react+datav组件信息展示屏项目

在这里插入图片描述

打包前端工程

npm run build

打包完成后会生成一个 build 文件夹，我们需要的就只有 static 、favicon.ico、index.html

在这里插入图片描述

SpringBoot工程

后端使用 thymeleaf

对 thymeleaf 还不熟悉的小伙伴可以先去了解下

文件复制

1. 在resources/static目录下新建一个 datav 的文件夹，把打包好的 static下的所有文件以及favicon.ico放进去

在这里插入图片描述

2. 再将index.html放到templates下

在这里插入图片描述

3. 修改html文件引用

thymeleaf 的html有自己专属的描述
对文件的引用是从static目录开始算起的，href和src前需要加上 th:
检查下css文件是否还有引用，都需要换成static下开始就完成了

<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">

在这里插入图片描述

4. 编写后端页面转发层

@Controller
@RequestMapping("/extra/datav")
public class ScreenDatavController{
    
    @GetMapping("/index")
    public String index(Model model) throws Exception {
        return "extra/datav" + "/index";
    }
}