正文

新手必看！Spring Boot+React快速搭建项目实战教程

/0 浏览量
0531

引言

在当今的Web开发领域，Spring Boot和React都是非常流行的技术栈。Spring Boot以其简洁的配置和丰富的功能，成为了Java后端开发的优选；而React则以其高效的前端渲染和组件化开发，成为了前端开发的利器。本文将带你从零开始，使用Spring Boot和React快速搭建一个简单的项目，让你在实际操作中学习这两大技术栈。

一、环境准备

在开始搭建项目之前，我们需要准备以下环境：

  1. Java开发环境：建议使用JDK 1.8及以上版本。
  2. Node.js环境：用于运行React项目。
  3. IDE：推荐使用IntelliJ IDEA或Eclipse。
  4. Git：用于版本控制。

二、创建Spring Boot项目

  1. 创建Maven项目：在IDE中创建一个新的Maven项目，并添加以下依赖：
<dependencies>
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-web</artifactId>
    </dependency>
</dependencies>
  1. 编写主类：创建一个名为Application的主类，并添加以下代码：
@SpringBootApplication
public class Application {
    public static void main(String[] args) {
        SpringApplication.run(Application.class, args);
    }
}
  1. 创建Controller：创建一个名为HelloController的控制器类，并添加以下代码：
@RestController
@RequestMapping("/api")
public class HelloController {
    @GetMapping("/hello")
    public String hello() {
        return "Hello, World!";
    }
}
  1. 启动项目：运行Application主类，项目将启动并在默认端口8080上运行。

三、创建React项目

  1. 创建React项目：在命令行中执行以下命令：
npx create-react-app my-app
  1. 进入项目目录：
cd my-app
  1. 安装依赖：如果遇到依赖问题，可以尝试运行以下命令：
npm install
  1. 运行项目：在命令行中执行以下命令，启动React项目：
npm start

四、前后端联调

  1. 修改React组件：打开src/App.js文件，并添加以下代码：
import React, { useState, useEffect } from 'react';
import axios from 'axios';

function App() {
  const [data, setData] = useState('');

  useEffect(() => {
    axios.get('http://localhost:8080/api/hello')
      .then(response => {
        setData(response.data);
      })
      .catch(error => {
        console.error('Error fetching data: ', error);
      });
  }, []);

  return (
    <div className="App">
      <h1>Hello, {data}</h1>
    </div>
  );
}

export default App;
  1. 访问项目：在浏览器中访问http://localhost:3000，你应该能看到“Hello, World!”的显示。

五、总结

通过本文的教程，你已经成功使用Spring Boot和React搭建了一个简单的项目。在实际开发中，你可以根据需求添加更多的功能和组件。希望这篇文章能帮助你快速入门Spring Boot和React，祝你学习愉快！

-- 展开阅读全文 --