将react或者vue项目整合springboot

桃扇骨 2024-03-16 21:06 57阅读 0赞

## 前端工程 ##

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

![在这里插入图片描述][f1ffc114527c411f85f353596b5edfcc.png]  
![在这里插入图片描述][9a52a22e08ad445bbfb7c159d4fda36c.png]

### 打包前端工程 ###

npm run build

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

![在这里插入图片描述][b5a77d0282174293b6b4cb85049cfedd.png]

## SpringBoot工程 ##

> 后端使用 `thymeleaf`

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

### 文件复制 ###

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

![在这里插入图片描述][80682baa5be8403e873836685bd470b9.png]

#### 2. 再将index.html放到templates下 ####

![在这里插入图片描述][834d8e3bcfe4453aaebc9be9f8b7f7e4.png]

#### 3. 修改html文件引用 ####

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

![在这里插入图片描述][a484739b18a848bfbba6cbae3eccc157.png]

#### 4. 编写后端页面转发层 ####

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

#### 5. 访问 ####

![在这里插入图片描述][21006fdcf47b41f38b96994de924dddf.png]

[f1ffc114527c411f85f353596b5edfcc.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/15/dd47c3968947420c901aa563fce49061.png
[9a52a22e08ad445bbfb7c159d4fda36c.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/15/2962b7bd3db342ba885efc46059ddac4.png
[b5a77d0282174293b6b4cb85049cfedd.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/15/b193abf4bb314de08b6e8f7169404d9f.png
[thymeleaf]: https://blog.csdn.net/chinus_yan/article/details/121718774
[80682baa5be8403e873836685bd470b9.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/15/212dca348b31419d82cc30e0dd92c13d.png
[834d8e3bcfe4453aaebc9be9f8b7f7e4.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/15/d3d46e5e5fed44129af2bb9c3dbb0446.png
[a484739b18a848bfbba6cbae3eccc157.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/15/d19f5d146c074b5d8eaf0f885d98fc81.png
[21006fdcf47b41f38b96994de924dddf.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/15/c5b0fa082b5b4614a2f7e2f1efef9252.png