springboot+layui实现网页上增删改查
时间: 2023-12-24 16:06:19 浏览: 152
springboot+vue+elementui实现增删改查和分页查询
5星 · 资源好评率100%
Spring Boot是一个非常流行的Java框架,可以轻松地创建Web应用程序。Layui是一个流行的前端UI框架,可以帮助我们快速地创建漂亮的Web页面。在这里,我将向你展示如何使用Spring Boot和Layui来实现基本的增删改查功能。
首先,我们需要创建一个Spring Boot项目。你可以使用Spring Initializr来创建一个新项目,也可以使用Eclipse或IntelliJ IDEA等IDE来创建一个新项目。
接下来,我们需要添加一些依赖项。在这个例子中,我们将使用Spring Data JPA来访问数据库。在pom.xml文件中添加以下依赖项:
```xml
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-data-jpa</artifactId>
</dependency>
<dependency>
<groupId>com.h2database</groupId>
<artifactId>h2</artifactId>
<scope>runtime</scope>
</dependency>
```
我们还需要添加Spring Boot和Layui的依赖项。在pom.xml文件中添加以下依赖项:
```xml
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<dependency>
<groupId>org.webjars</groupId>
<artifactId>layui</artifactId>
<version>2.5.4</version>
</dependency>
<dependency>
<groupId>org.webjars</groupId>
<artifactId>jquery</artifactId>
<version>3.1.0</version>
</dependency>
```
接下来,我们需要配置数据库连接。在application.properties文件中添加以下代码:
```
spring.datasource.url=jdbc:h2:mem:testdb
spring.datasource.driverClassName=org.h2.Driver
spring.datasource.username=sa
spring.datasource.password=
spring.jpa.database-platform=org.hibernate.dialect.H2Dialect
spring.h2.console.enabled=true
```
在这里,我们使用H2内存数据库来简化示例。在实际应用程序中,你可能需要使用其他数据库,例如MySQL或PostgreSQL。
现在,我们将创建一个实体类来表示我们的数据表。在这个例子中,我们将创建一个简单的数据表,其中包含id,name和age字段。创建一个名为Person的类,并在其中添加以下代码:
```java
@Entity
@Table(name = "person")
public class Person {
@Id
@GeneratedValue(strategy = GenerationType.AUTO)
private Long id;
private String name;
private int age;
// getters and setters
}
```
接下来,我们将创建一个Spring Data JPA存储库来访问数据库。创建一个名为PersonRepository的接口,并在其中添加以下代码:
```java
@Repository
public interface PersonRepository extends JpaRepository<Person, Long> {
}
```
现在我们已经设置好了数据访问层,我们将创建一个控制器来处理HTTP请求。创建一个名为PersonController的类,并在其中添加以下代码:
```java
@Controller
public class PersonController {
@Autowired
private PersonRepository personRepository;
@GetMapping("/")
public String index(Model model) {
List<Person> persons = personRepository.findAll();
model.addAttribute("persons", persons);
return "index";
}
@GetMapping("/add")
public String addForm(Model model) {
return "add";
}
@PostMapping("/add")
public String addSubmit(@ModelAttribute Person person) {
personRepository.save(person);
return "redirect:/";
}
@GetMapping("/edit/{id}")
public String editForm(@PathVariable Long id, Model model) {
Person person = personRepository.findById(id).orElseThrow(() -> new IllegalArgumentException("Invalid person id:" + id));
model.addAttribute("person", person);
return "edit";
}
@PostMapping("/edit/{id}")
public String editSubmit(@PathVariable Long id, @ModelAttribute Person person, BindingResult bindingResult) {
if (bindingResult.hasErrors()) {
person.setId(id);
return "edit";
}
personRepository.save(person);
return "redirect:/";
}
@GetMapping("/delete/{id}")
public String delete(@PathVariable Long id) {
personRepository.deleteById(id);
return "redirect:/";
}
}
```
在这里,我们定义了五个方法来处理HTTP请求:
- `index()` - 处理根路径请求,列出所有人员记录。
- `addForm()` - 处理添加人员记录请求,返回一个包含表单的页面。
- `addSubmit()` - 处理添加人员记录请求,将表单提交的数据保存到数据库中。
- `editForm()` - 处理编辑人员记录请求,返回一个包含表单的页面。
- `editSubmit()` - 处理编辑人员记录请求,将表单提交的数据更新到数据库中。
- `delete()` - 处理删除人员记录请求,从数据库中删除指定的记录。
现在我们需要创建HTML模板来呈现数据。创建一个名为index.html的文件,并在其中添加以下代码:
```html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Person List</title>
<link rel="stylesheet" type="text/css" href="/webjars/layui/2.5.4/css/layui.css">
<script type="text/javascript" src="/webjars/jquery/3.1.0/jquery.min.js"></script>
<script type="text/javascript" src="/webjars/layui/2.5.4/layui.js"></script>
</head>
<body>
<div class="layui-container">
<div class="layui-row">
<div class="layui-col-md12">
<h2>Person List</h2>
</div>
</div>
<div class="layui-row">
<div class="layui-col-md12">
<table class="layui-table">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Age</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr th:each="person : ${persons}">
<td th:text="${person.id}"></td>
<td th:text="${person.name}"></td>
<td th:text="${person.age}"></td>
<td>
<button class="layui-btn layui-btn-xs" onclick="location.href='/edit/'+${person.id}">Edit</button>
<button class="layui-btn layui-btn-danger layui-btn-xs" onclick="location.href='/delete/'+${person.id}">Delete</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="layui-row">
<div class="layui-col-md12">
<button class="layui-btn" onclick="location.href='/add'">Add Person</button>
</div>
</div>
</div>
</body>
</html>
```
这个模板使用Thymeleaf作为模板引擎,并使用Layui来创建漂亮的表格和按钮。它列出了所有人员记录,并提供了添加,编辑和删除记录的链接。
接下来,我们需要创建一个名为add.html的文件,其中包含添加人员记录的表单。添加以下代码:
```html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Add Person</title>
<link rel="stylesheet" type="text/css" href="/webjars/layui/2.5.4/css/layui.css">
<script type="text/javascript" src="/webjars/jquery/3.1.0/jquery.min.js"></script>
<script type="text/javascript" src="/webjars/layui/2.5.4/layui.js"></script>
</head>
<body>
<div class="layui-container">
<div class="layui-row">
<div class="layui-col-md12">
<h2>Add Person</h2>
</div>
</div>
<div class="layui-row">
<div class="layui-col-md12">
<form class="layui-form" method="post" action="/add">
<div class="layui-form-item">
<label class="layui-form-label">Name:</label>
<div class="layui-input-block">
<input type="text" name="name" required lay-verify="required" placeholder="Enter name" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">Age:</label>
<div class="layui-input-block">
<input type="text" name="age" required lay-verify="required" placeholder="Enter age" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<button class="layui-btn" lay-submit lay-filter="formDemo">Submit</button>
<button type="reset" class="layui-btn layui-btn-primary">Reset</button>
</div>
</div>
</form>
</div>
</div>
</div>
</body>
</html>
```
这个模板使用Layui创建一个包含name和age字段的表单。当用户提交表单时,它将数据发送到服务器上的/add路由。
接下来,我们需要创建一个名为edit.html的文件,其中包含编辑人员记录的表单。添加以下代码:
```html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Edit Person</title>
<link rel="stylesheet" type="text/css" href="/webjars/layui/2.5.4/css/layui.css">
<script type="text/javascript" src="/webjars/jquery/3.1.0/jquery.min.js"></script>
<script type="text/javascript" src="/webjars/layui/2.5.4/layui.js"></script>
</head>
<body>
<div class="layui-container">
<div class="layui-row">
<div class="layui-col-md12">
<h2>Edit Person</h2>
</div>
</div>
<div class="layui-row">
<div class="layui-col-md12">
<form class="layui-form" method="post" th:action="@{'/edit/'+${person.id}}" th:object="${person}">
<div class="layui-form-item">
<label class="layui-form-label">Name:</label>
<div class="layui-input-block">
<input type="text" name="name" required lay-verify="required" th:value="${person.name}" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">Age:</label>
<div class="layui-input-block">
<input type="text" name="age" required lay-verify="required" th:value="${person.age}" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<button class="layui-btn" lay-submit lay-filter="formDemo">Submit</button>
<button type="reset" class="layui-btn layui-btn-primary">Reset</button>
</div>
</div>
</form>
</div>
</div>
</div>
</body>
</html>
```
这个模板使用Layui创建一个包含name和age字段的表单,并将表单数据预填充为当前记录的值。当用户提交表单时,它将数据发送到服务器上的/edit/{id}路由。
最后,我们需要为我们的应用程序创建一个入口点。创建一个名为Application的类,并在其中添加以下代码:
```java
@SpringBootApplication
public class Application {
public static void main(String[] args) {
SpringApplication.run(Application.class, args);
}
}
```
现在我们已经设置好了我们的应用程序,运行它并访问http://localhost:8080/,你应该能够看到一个包含所有人员记录的表格,以及添加,编辑和删除记录的链接。
这就是使用Spring Boot和Layui实现网页上增删改查的基本步骤。当然,你可以扩展它以满足你的需求。
阅读全文