前后端分离的示例，使用
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 Response
Entity<Book> createBook(@RequestBody Book book) {
Book result = bookRepository.save(book);
return new Response
Entity<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.prevent
Default();
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')
);
```
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
