前言
前不久學習了web開發，用react寫了前端，spring boot搭建了后端，然而沒有成功地把兩個工程結合起來，造成前端與后端之間需要跨域通信，帶來了一些額外的工作。
這一次成功地將前端工程與后端結合在一個project中，記錄一下，也希望能幫到那些和我一樣的入門小白。
環境
windows 10 - x64, java 1.8.0, node v8.9.4, npm 6.1.0
前奏
*jdk, node 和 npm請自行安裝
新建一個spring boot工程
在intellij里選擇spring initializer新建，
依賴添加devtool和web
隨后就初始化了后端的spring boot項目
在spring boot項目的文件夾內，新建一個react工程，推薦用create-react-app，沒有的話通過npm安裝到全局
|
1
2
|
// npm install -g create-react-appcreate-react-app frontene |
主曲
添加maven插件frontend-maven-plugin
|
1
2
3
4
5
6
7
8
9
|
<plugins> <plugin> <!-- https://mvnrepository.com/artifact/com.github.eirslett/frontend-maven-plugin --> <groupid>com.github.eirslett</groupid> <artifactid>frontend-maven-plugin</artifactid> <version>1.6</version> ... </plugin> </plugins> |
frontend-maven-plugin可以在打包時build react項目，并將build得到的前端頁面文件放入指定位置。
配置frontend-maven-plugin
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
|
<executions> <execution> <id>install node and npm</id> <goals> <goal>install-node-and-npm</goal> </goals> <configuration> <nodeversion>v8.11.1</nodeversion> <npmversion>5.6.0</npmversion> <nodedownloadroot>http://npm.taobao.org/mirrors/node/</nodedownloadroot> <!--<npmdownloadroot>http://npm.taobao.org/mirrors/npm/</npmdownloadroot>--> </configuration> </execution> <execution> <id>npm install</id> <goals> <goal>npm</goal> </goals> <configuration> <arguments>install</arguments> </configuration> </execution> <execution> <id>npm run-script build</id> <goals> <goal>npm</goal> </goals> <configuration> <arguments>run-script build</arguments> </configuration> </execution> </executions> <configuration> <installdirectory>target</installdirectory> <workingdirectory>frontend</workingdirectory> </configuration> |
maven這一插件會依次執行install-node-and-npm, npm install, npm run-script build三條命令。
配置中的installdirectory指定了node和npm的安裝位置，在jar包中安裝node和npm確保在沒有安裝node和npm的機器上jar包依然可以運行，如果安裝了則會屏蔽全局的node和npm。
workingdirectory值為前端項目package.json文件所在路徑，插件會自動在workingdirectory下運行npm install和npm run-script build命令。
webpack 配置
通過create-react-app生成的項目里并沒有webpack的配置，在frontend里npm run eject，會彈出許多個文件夾，config下可以看見與webpack相關的多個配置文件。
這里需要修改paths.js 中的 module.exports = { ... }，修改后如下
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
module.exports = { dotenv: resolveapp('.env'), appbuild: resolveapp('../src/main/resources/static/'), // 設置build所產生的文件的放置位置 apppublic: resolveapp('../src/main/resources/static/'), // 設置public文件夾內文件在build后的存放位置 apphtml: resolveapp('public/index.html'), appindexjs: resolveapp('src/index.js'), apppackagejson: resolveapp('package.json'), appsrc: resolveapp('src'), yarnlockfile: resolveapp('yarn.lock'), testssetup: resolveapp('src/setuptests.js'), appnodemodules: resolveapp('node_modules'), publicurl: getpublicurl(resolveapp('package.json')), servedpath: getservedpath(resolveapp('package.json')),}; |
尾聲
前后端工程結合通過以上一些操作就可以實現一個工程開發，同時前后端仍然是解耦的，僅測試前端效果只需要在前端文件下用node運行。
實踐證明，在前端應用react-router并不需要對后端作其他配置。
這篇博文只是將spring boot和react結合到一個項目里的一次簡單的嘗試，本人web開發并不精通，懇請高手斧正。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持服務器之家。
原文鏈接：https://blog.csdn.net/Higher_Stark/article/details/80931388
