引言
随着互联网技术的不断发展，前后端分离的开发模式逐渐成为主流。这种模式提高了开发效率和项目可维护性。本文将详细介绍如何使用 Spring MVC 和 React 构建一个高效的前后端分离项目实例。
环境准备
后端环境
Java Development Kit (JDK)
: 版本 1.8 或更高。
Maven
: 用于项目构建和依赖管理。
IDE
: 如 IntelliJ IDEA 或 Eclipse。
前端环境
Node.js
: 用于 React 项目构建。
npm
: Node.js 的包管理器。
Webpack
: React 项目打包工具。
IDE
: 如 WebStorm 或 Atom。
后端开发
创建 Spring Boot 项目
启动 IDEA 或 Eclipse
。
创建 Spring Boot 项目
：
选择 Spring Initializr。
添加依赖项：Spring Web, Spring Security, Thymeleaf。
点击 “Generate” 生成项目。
添加实体类
在
src/main/java/com/example/demo/model
目录下创建实体类
User.java
：
package com.example.demo.model;

public class User {
private Long id;
private String username;
private String password;
// 省略 getter 和 setter
}
添加控制器
在
src/main/java/com/example/demo/controller
目录下创建控制器
UserController.java
：
package com.example.demo.controller;

import com.example.demo.model.User;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;

import java.util.List;

@RestController
@RequestMapping(“/user”)
public class UserController {
@Autowired
private UserService userService;

@GetMapping
public List findAll() {
return userService.findAll();
}

@GetMapping(“/{id}”)
public User findById(@PathVariable Long id) {
return userService.findById(id);
}

@PostMapping
public User save(@RequestBody User user) {
return userService.save(user);
}

@PutMapping(“/{id}”)
public User update(@PathVariable Long id, @RequestBody User user) {
user.setId(id);
return userService.update(user);
}

@DeleteMapping(“/{id}”)
public void delete(@PathVariable Long id) {
userService.delete(id);
}
}
添加服务类
在
src/main/java/com/example/demo/service
目录下创建服务类
UserService.java
：
package com.example.demo.service;

import com.example.demo.model.User;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import java.util.List;

@Service
public class UserService {
@Autowired
private UserRepository userRepository;

public List findAll() {
return userRepository.findAll();
}

public User findById(Long id) {
return userRepository.findById(id).orElse(null);
}

public User save(User user) {
return userRepository.save(user);
}

public User update(User user) {
return userRepository.save(user);
}

public void delete(Long id) {
userRepository.deleteById(id);
}
}
添加数据访问层
在
src/main/java/com/example/demo/repository
目录下创建数据访问层
UserRepository.java
：
package com.example.demo.repository;

import com.example.demo.model.User;
import org.springframework.data.jpa.repository.JpaRepository;
import org.springframework.stereotype.Repository;

@Repository
public interface UserRepository extends JpaRepository {
}
前端开发
创建 React 项目
打开终端
。
运行以下命令
：
npx create-react-app my-app
cd my-app
添加 React 组件
在
src/App.js
文件中添加以下代码：
import React, { Component } from ‘react’;
import axios from ‘axios’;

class App extends Component {
state = {
users: [],
selectedUser: null,
};

componentDidMount() {
axios.get(‘/user’).then(response => {
this.setState({ users: response.data });
});
}

handleSelectUser = (user) => {
axios.get(`/user/${user.id}`).then(response => {
this.setState({ selectedUser: response.data });
});
};

render() {
const { users, selectedUser } = this.state;

return (

);
}
}

export default App;
运行项目
启动后端项目
。
在终端中运行以下命令
：
npm start
此时，你将看到一个包含用户列表和详情的简单页面。
总结
本文详细介绍了如何使用 Spring MVC 和 React 构建一个高效的前后端分离项目实例。通过本文的介绍，读者可以快速上手并实践这种开发模式。