spring boot + vue 图书管理的简单示例
时间: 2023-10-23 17:12:45 浏览: 104
好的，下面是一个简单的 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 即可看到图书列表和添加图书的表单。
阅读全文
相关推荐
大家在看
软件工程-总体设计概述(ppt-113页).ppt
软件工程-总体设计概述(ppt-113页).ppt
欧姆龙编码器E6B2-CWZ6C
本文档介绍了欧姆龙编码器的基本数据以及使用方式，可以供给那些需要使用欧姆龙编码器的同学阅读
中国移动5G规模试验测试规范--核心网领域--SA基础网元性能测试分册.pdf
目 录
前 言............................................................................................................................ 1
1. 范围........................................................................................................................... 2
2. 规范性引用文件....................................................................................................... 2
3. 术语、定义和缩略语............................................................................................... 2
3.1. 测试对象........................................................................................................ 3
4. 测试对象及网络拓扑............................................................................................... 3
................................................................................................................................ 3
4.1. 测试组网........................................................................................................ 3
5. 业务模型和测试方法............................................................................................... 6
5.1. 业务模型........................................................................................................ 6
5.2. 测试方法........................................................................................................ 7
6. 测试用例................................................................................................................... 7
6.1. AMF性能测试................................................................................................ 7
6.1.1. 注册请求处理能力测试..................................................................... 7
6.1.2. 基于业务模型的单元容量测试.........................................................9
6.1.3. AMF并发连接管理性能测试........................................................... 10
6.2. SMF性能测试............................................................................................... 12
6.2.1. 会话创建处理能力测试................................................................... 12
6.2.2. 基
Pr1Wire2432Eng_reset_2432_
THIS SOFTWARE IS DESIGNED TO RESET CHIP 2432
10-虚拟内存的基本概念和请求分页处理方式.pdf
虚拟内存的基本概念和请求分页处理方式
最新推荐
Springboot+Vue+shiro实现前后端分离、权限控制的示例代码
以下是一个简单的Springboot Controller示例，展示了如何处理POST请求： ```java @RequestMapping(value = "/add", method = RequestMethod.POST) @ResponseBody public JSONResult addClient(@RequestBody String ...
解决前后端分离 vue+springboot 跨域 session+cookie失效问题
在前后端分离的架构中，Vue.js作为前端框架与Spring Boot作为后端服务进行交互时，常常会遇到跨域和Session、Cookie失效的问题。本文将详细介绍如何解决这些问题。 首先，跨域是由于浏览器的安全策略限制，同一源...
springboot+vue实现websocket配置过程解析
1. 引入依赖：在 Maven 项目中，需要引入 SpringBoot 的 WebSocket 依赖 `<dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-websocket</artifactId> <version>1.3.5....
Springboot vue导出功能实现代码
本文主要介绍了 Springboot Vue 导出功能实现代码，通过示例代码详细介绍了如何使用 Vue 2 和 Springboot 2.x 实现导出功能。文章还对 Axios 中的 params 和 data 两个参数进行了科普，介绍了如何正确使用这两个参数...
websocket在springboot+vue中的使用教程
在本教程中，我们将详细介绍如何在Spring Boot和Vue中使用WebSocket。WebSocket是一种实时通信协议，允许服务器推送数据到客户端，而不需要客户端不断地请求服务器。下面，我们将通过实例代码，展示如何在Spring ...
Terraform AWS ACM 59版本测试与实践
资源摘要信息:"本资源是关于Terraform在AWS上操作ACM（AWS Certificate Manager）的模块的测试版本。Terraform是一个开源的基础设施即代码（Infrastructure as Code，IaC）工具，它允许用户使用代码定义和部署云资源。AWS Certificate Manager（ACM）是亚马逊提供的一个服务，用于自动化申请、管理和部署SSL/TLS证书。在本资源中，我们特别关注的是Terraform的一个特定版本的AWS ACM模块的测试内容，版本号为59。
在AWS中部署和管理SSL/TLS证书是确保网站和应用程序安全通信的关键步骤。ACM服务可以免费管理这些证书，当与Terraform结合使用时，可以让开发者以声明性的方式自动化证书的获取和配置，这样可以大大简化证书管理流程，并保持与AWS基础设施的集成。
通过使用Terraform的AWS ACM模块，开发人员可以编写Terraform配置文件，通过简单的命令行指令就能申请、部署和续订SSL/TLS证书。这个模块可以实现以下功能：
1. 自动申请Let's Encrypt的免费证书或者导入现有的证书。
2. 将证书与AWS服务关联，如ELB（Elastic Load Balancing）、CloudFront和API Gateway等。
3. 管理证书的过期时间，自动续订证书以避免服务中断。
4. 在多区域部署中同步证书信息，确保全局服务的一致性。
测试版本59的资源意味着开发者可以验证这个版本是否满足了需求，是否存在任何的bug或不足之处，并且提供反馈。在这个版本中，开发者可以测试Terraform AWS ACM模块的稳定性和性能，确保在真实环境中部署前一切工作正常。测试内容可能包括以下几个方面：
- 模块代码的语法和结构检查。
- 模块是否能够正确执行所有功能。
- 模块与AWS ACM服务的兼容性和集成。
- 模块部署后证书的获取、安装和续订的可靠性。
- 多区域部署的证书同步机制是否有效。
- 测试异常情况下的错误处理机制。
- 确保文档的准确性和完整性。
由于资源中没有提供具体的标签，我们无法从中获取关于测试的详细技术信息。同样，由于只提供了一个文件名“terraform-aws-acm-59-master”，无法得知该模块具体包含哪些文件和代码内容。然而，文件名暗示这是一个主版本（master），通常意味着这是主要的、稳定的分支，开发者可以在其上构建和测试他们的配置。
总之，terraform-aws-acm-59是Terraform的一个AWS ACM模块的测试版本，用于自动化管理和部署SSL/TLS证书。这个模块能够简化证书生命周期的管理，并提高与AWS服务的集成效率。测试工作主要是为了验证版本59的模块是否正常工作，并确保其在真实场景中可靠地执行预期功能。"
【HS1101湿敏电阻全面解析】：从基础知识到深度应用的完整指南
# 摘要
HS1101湿敏电阻作为湿度监测的重要元件，在环境监测、农业、工业等多个领域都有广泛应用。本文首先对湿敏电阻的基本概念及其工作原理进行了概述，接着详细探讨了其特性参数，如响应时间、灵敏度以及温度系数等，并针对HS1101型号提供了选型指南和实际应用场景分析。文章还深入讨论了HS1101湿敏电阻在电路设计中的要点和信号处理方法，提供了实践案例来展示其在智能湿度调节器和农业自动灌溉系统中的应用。最后，本文给出了湿敏电阻的维护保养技巧和故障排除方法，以帮助用户确保湿敏电阻的最佳性能和使用寿命。
# 关键字
湿敏电阻；HS1101；特性参数；电路设计；信号处理；环境监测；故障排除
参考资
MATLAB在一个图形窗口中创建一行两列的子图的代码
在MATLAB中，可以使用`subplot`函数在一个图形窗口中创建多个子图。对于一行两列的子图，可以使用以下代码：
```matlab
% 创建第一个子图
subplot(1, 2, 1);
plot([1, 2, 3], [4, 5, 6]);
title('子图1');
% 创建第二个子图
subplot(1, 2, 2);
plot([1, 2, 3], [6, 5, 4]);
title('子图2');
```
这段代码的详细解释如下：
1. `subplot(1, 2, 1);`：创建一个1行2列的子图布局，并激活第一个子图。
2. `plot([1, 2, 3], [4,
Doks Hugo主题：打造安全快速的现代文档网站
资源摘要信息:"Doks是一个适用于Hugo的现代文档主题，旨在帮助用户构建安全、快速且对搜索引擎优化友好的文档网站。在短短1分钟内即可启动一个具有Doks特色的演示网站。以下是选择Doks的九个理由：
1. 安全意识：Doks默认提供高安全性的设置，支持在上线时获得A+的安全评分。用户还可以根据自己的需求轻松更改默认的安全标题。
2. 默认快速：Doks致力于打造速度，通过删除未使用的CSS，实施预取链接和图像延迟加载技术，在上线时自动达到100分的速度评价。这些优化有助于提升网站加载速度，提供更佳的用户体验。
3. SEO就绪：Doks内置了对结构化数据、开放图谱和Twitter卡的智能默认设置，以帮助网站更好地被搜索引擎发现和索引。用户也能根据自己的喜好对SEO设置进行调整。
4. 开发工具：Doks为开发人员提供了丰富的工具，包括代码检查功能，以确保样式、脚本和标记无错误。同时，还支持自动或手动修复常见问题，保障代码质量。
5. 引导框架：Doks利用Bootstrap框架来构建网站，使得网站不仅健壮、灵活而且直观易用。当然，如果用户有其他前端框架的需求，也可以轻松替换使用。
6. Netlify就绪：Doks为部署到Netlify提供了合理的默认配置。用户可以利用Netlify平台的便利性，轻松部署和维护自己的网站。
7. SCSS支持：在文档主题中提及了SCSS，这表明Doks支持使用SCSS作为样式表预处理器，允许更高级的CSS样式化和模块化设计。
8. 多语言支持：虽然没有在描述中明确提及，但Doks作为Hugo主题，通常具备多语言支持功能，这为构建国际化文档网站提供了便利。
9. 定制性和可扩展性：Doks通过其设计和功能的灵活性，允许用户根据自己的品牌和项目需求进行定制。这包括主题颜色、布局选项以及组件的添加或修改。
文件名称 'docs-main' 可能是Doks主题的核心文件，包含网站的主要内容和配置。这个文件对于设置和维护文档网站来说是至关重要的，因为它包含了网站的主要配置信息，如导航结构、品牌设置、SEO配置等。开发者在使用Doks主题时，将重点调整和优化这个文件以满足具体的项目需求。"
E9流程表单前端接口API(V5)：前端与后端协同开发的黄金法则
# 摘要
本文全面介绍了E9流程表单API(V5)的开发与应用，阐述了协同开发理论基础和前端实践，并结合案例分析展示了API在企业流程自动化中的实战应用。文章首先概述了E9流程表单API(V5)的核心概念，然后详细探讨了前后端协同开发的重要