springboot实现添加书籍的前后端描述

前后端分离的示例，使用Spring Boot作为后端，React作为前端，MySQL作为数据库。

后端部分：

1. 定义Book实体类，包含id、title和author属性，使用JPA注解进行数据库映射。

@Entity
public class Book {
    @Id
    @GeneratedValue(strategy= GenerationType.AUTO)
    private long id;

    private String title;

    private String author;

    // getter/setter方法省略
}

2. 定义BookRepository接口，继承JpaRepository，用于对Book实体进行数据库操作。

@Repository
public interface BookRepository extends JpaRepository<Book, Long> {
}

3. 定义BookController类，使用@RestController注解，对外提供RESTful API。

@RestController
@RequestMapping("/api/books")
public class BookController {
    @Autowired
    private BookRepository bookRepository;

    @PostMapping
    public ResponseEntity<Book> createBook(@RequestBody Book book) {
        Book result = bookRepository.save(book);
        return new ResponseEntity<Book>(result, HttpStatus.CREATED);
    }
}

4. 在application.properties文件中配置MySQL数据库连接信息。

spring.datasource.url=jdbc:mysql://localhost:3306/bookstore
spring.datasource.username=root
spring.datasource.password=123456
spring.jpa.show-sql=true

前端部分：

1. 安装必要的npm包和组件，例如axios、bootstrap和react-router-dom等。

2. 定义AddBook组件，包含一个表单，用于输入书籍信息。在表单中使用axios向后端发送POST请求，添加书籍。

import axios from 'axios';

class AddBook extends React.Component {
    constructor(props) {
        super(props);
        this.state = {title: '', author: ''}
        this.handleSubmit = this.handleSubmit.bind(this);
    }

    handleSubmit(event) {
        event.preventDefault();
        const book = {title: this.state.title, author: this.state.author};
        axios.post('/api/books', book)
            .then(res => {
                console.log(res);
                console.log(res.data);
            });
    }

    render() {
        return (
            <div>
                <h1>Add Book</h1>
                <form onSubmit={this.handleSubmit}>
                    <div className="form-group">
                        <label>Title:</label>
                        <input type="text" className="form-control" value={this.state.title} onChange={event => this.setState({title: event.target.value})} required />
                    </div>
                    <div className="form-group">
                        <label>Author:</label>
                        <input type="text" className="form-control" value={this.state.author} onChange={event => this.setState({author: event.target.value})} required />
                    </div>
                    <button type="submit" className="btn btn-primary">Submit</button>
                </form>
            </div>
        );
    }
}

export default AddBook;

3. 在App.js中定义路由，使得访问'/add'路径时显示AddBook组件。

import {BrowserRouter as Router, Switch, Route} from 'react-router-dom';
import AddBook from './components/AddBook';
import 'bootstrap/dist/css/bootstrap.min.css';

function App() {
  return (
    <Router>
      <Switch>
        <Route path="/add">
          <AddBook />
        </Route>
      </Switch>
    </Router>
  );
}

export default App;

4. 在Navbar组件中添加链接，使得点击"Add Book"时跳转到'/add'路径。

import {Link} from 'react-router-dom';

function Navbar() {
  return (
    <nav className="navbar navbar-expand-lg navbar-light bg-light">
      <Link className="navbar-brand" to="/">Book Store</Link>
      <ul className="navbar-nav mr-auto">
        <li className="nav-item">
          <Link className="nav-link" to="/add">Add Book</Link>
        </li>
      </ul>
    </nav>
  );
}

export default Navbar;

5. 在index.js中渲染Navbar组件和App组件。

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import Navbar from './components/Navbar';

ReactDOM.render(
  <React.StrictMode>
    <Navbar />
    <div className="container mt-3">
      <App />
    </div>
  </React.StrictMode>,
  document.getElementById('root')
);