好的，下面是一个简单的
Spring Boot +
Vue 图书管理示例。
首先，我们需要创建一个
Spring Boot 项目并添加必要的依赖项：
1. 在 https://start.
spring.io/ 上创建一个新的
Spring Boot 项目，选择 Web, JPA, MySQL 和
Thymeleaf 依赖。
2. 在 pom.xml 文件中添加以下依赖项：
```xml
<!-- MySQL 驱动 -->
<dependency>
<groupId>mysql</groupId>
<artifactId>mysql-connector-java</artifactId>
</dependency>
<!--
Spring Data JPA -->
<dependency>
<groupId>org.
springframework.data</groupId>
<artifactId>
spring-data-jpa</artifactId>
</dependency>
<!--
Thymeleaf -->
<dependency>
<groupId>org.
springframework.
boot</groupId>
<artifactId>
spring-
boot-starter-
thymeleaf</artifactId>
</dependency>
```
接下来，我们需要创建一个 Book 实体类和一个 BookRepository 接口来与数据库交互，以及一个 BookController 类来处理 HTTP 请求。
1. 创建 Book 实体类：
```java
@Entity
public class Book {
@Id
@GeneratedValue(strategy = GenerationType.IDENTITY)
private Long id;
private String title;
private String author;
// getters and setters
}
```
2. 创建 BookRepository 接口：
```java
@Repository
public interface BookRepository extends JpaRepository<Book, Long> {
}
```
3. 创建 BookController 类：
```java
@Controller
public class BookController {
@Autowired
private BookRepository bookRepository;
@GetMapping("/")
public String index(Model model) {
List<Book> books = bookRepository.findAll();
model.addAttribute("books", books);
return "index";
}
@GetMapping("/add")
public String addForm(Model model) {
model.addAttribute("book", new Book());
return "add";
}
@PostMapping("/add")
public String addSubmit(@ModelAttribute Book book) {
bookRepository.save(book);
return "redirect:/";
}
}
```
现在我们已经完成了后端部分，接下来我们需要创建一个
Vue 前端界面来显示和添加图书。
1. 创建一个 `src/main/resources/static`
目录，并在其中创建一个 `index.html` 文件，用于渲染
Vue 应用。
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Book Management</title>
<script src="https://cdn.jsdelivr.net/
npm/
vue/dist/
vue.js"></script>
</head>
<body>
<div id="app">
<h1>Book Management</h1>
<div v-if="books.length === 0">
<p>No books found.</p>
</div>
<table v-else>
<thead>
<tr>
<th>Title</th>
<th>Author</th>
</tr>
</thead>
<tbody>
<tr v-for="book in books">
<td>{{book.title}}</td>
<td>{{book.author}}</td>
</tr>
</tbody>
</table>
<button @click="addForm">Add Book</button>
<div v-if="showAddForm">
<form @submit.prevent="addBook">
<div>
<label>Title:</label>
<input v-model="newBook.title" required>
</div>
<div>
<label>Author:</label>
<input v-model="newBook.author" required>
</div>
<div>
<button type="submit">Add</button>
<button type="button" @click="cancelAdd">Cancel</button>
</div>
</form>
</div>
</div>
<script src="/js/app.js"></script>
</body>
</html>
```
2. 在 `src/main/resources/static`
目录中创建一个 `js`
目录，并在其中创建一个 `app.js` 文件。这个文件将包含我们的
Vue 应用程序。
```js
new
Vue({
el: '#app',
data: {
books: [],
showAddForm: false,
newBook: {
title: '',
author: ''
}
},
mounted() {
this.fetchBooks();
},
methods: {
fetchBooks() {
fetch('/api/books')
.then(response => response.json())
.then(data => {
this.books = data;
});
},
addForm() {
this.showAddForm = true;
},
cancelAdd() {
this.showAddForm = false;
this.newBook.title = '';
this.newBook.author = '';
},
addBook() {
const data = {
title: this.newBook.title,
author: this.newBook.author
};
fetch('/api/books', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(data)
})
.then(response => {
if (response.ok) {
this.fetchBooks();
this.showAddForm = false;
this.newBook.title = '';
this.newBook.author = '';
}
});
}
}
});
```
现在，我们已经完成了整个项目。启动
Spring Boot 应用程序，然后在浏览器中访问 http://localhost:8080 即可看到图书列表和添加图书的表单。
本文详细解析了Vue.js项目的目录结构，包括基础库、编译打包工具和本地服务器设置。同时，介绍了如何在Spring Boot中整合Vue.js，提供了环境安装步骤和快速启动项目所需的命令列表。
最低0.47元/天 解锁文章
3万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
