小白文章之---React前端和spring boot 后端整合

React框架是一个纯前端的框架，它可以帮助我们高效率的开发前端界面。当前端界面开发完成后，就需要接入后端数据，那如何进行与后端整合呢。肯定不是CV就能解决的

步骤

1、在package.json文件创建主页的标识
在package.json文件中的“private”属性后面添加“homepage”属性，生成定义的项目文件

"name": "front",
  "version": "0.1.0",
  "private": true,
  "homepage": "{项目名称}",
  .............
  //省略后面的代码

2、在开发工具的控制台输入指令"npm run build"生成项目文件，这个文件就包含了整个前端的代码

npm run build

执行完成后会在前端项目根目录下面生成一个build文件

注：

这里导出的包中的index.html文件不能直接运行，如果直接运行会出现错误，找不到资源文件，因为我们在导包的时候给“homepage”定义了名字，所以浏览器在解析静态资源时的路径就跟定义的名字有关系

如果想在本地直接运行这个文件，这里提供两种方法
①、基于路径的方法，将属性“homepage”定义为“.”，在解析时直接去找根目录下的文件

"homepage": ".",

②、属性“homepage”定义为其他具体的项目名时，解析时会在定义的名字下面去找资源文件(crm为我定义的项目文件名)，这个时候在包文件下是没有这个文件的

所以，导包完成后，需要对其文件结构进行改变，创建一个以项目名命名的文件，将除了index.html和静态文件的其他文件放在这个文件夹中，这里的静态文件是放在代码中的public目录下面的文件，完成后就可以直接在本地运行项目了(data和dataNon都是放在public中的文件)，整理好的文件结构如下图

如果静态资源没有放在public文件下，在打包的时候会被编译成hash码，在解析时就会出现错误

注：

如果前端项目中使用了axios，在本地运行时会获取不到数据，这是正常的，axios需要在服务器中获取上下文路径对应的数据

获取到前端的文件后，就需要将前端的文件导入到后端项目中
1、创建项目
既然前端都是用到了React框架，那么后端也应该使用框架来提升开发效率，这里我使用的是spring boot项目来做后端开发，也可以使用其他的web项目
2、将前端文件文件中index.html文件放在后端项目的resources目录下的templates文件中，其余的文件放在static文件中
3、前端项目导入完成后就可以运行了，当然这样运行肯定时候报错的，因为我们在导入的时候就更改了文件的路径，所以这里需要使用thymeleaf，通过thymeleaf去获取上下文路径

4、在pom.xml文件中添加thymeleaf的jar包依赖

		<dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-thymeleaf</artifactId>
        </dependency>
        <dependency>
            <groupId>net.sourceforge.nekohtml</groupId>
            <artifactId>nekohtml</artifactId>
            <version>1.9.22</version>
        </dependency>

5、完后后就可以通过控制层跳转界面了

@Controller
public class HomePge {
    @RequestMapping("/")
    public String homePage() {

        return "index";
    }
}

最后，如果是导入到spring或者maven项目中，只需要将整理好的项目结构文件放在web-app根目录下就行了，不需要导入其他的jar包