写一个适用于themeleaf的后台轮播图管理功能并给出具体代码
时间: 2024-02-18 09:59:47 浏览: 147
带后台的图片轮播代码
5星 · 资源好评率100%
好的,以下是使用Spring Boot、MyBatis、Thymeleaf实现的后台轮播图管理功能的具体代码。
1. 创建数据库表
```sql
CREATE TABLE `carousel` (
`id` int(11) NOT NULL AUTO_INCREMENT COMMENT '主键ID',
`img_url` varchar(255) DEFAULT NULL COMMENT '图片地址',
`link_url` varchar(255) DEFAULT NULL COMMENT '链接地址',
`create_time` datetime NOT NULL DEFAULT CURRENT_TIMESTAMP COMMENT '创建时间',
PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=1 DEFAULT CHARSET=utf8mb4 COMMENT='轮播图表';
```
2. 创建实体类
Carousel.java
```java
public class Carousel {
private Integer id;
private String imgUrl;
private String linkUrl;
private Date createTime;
// 省略getter和setter方法
}
```
3. 创建Mapper接口
CarouselMapper.java
```java
public interface CarouselMapper {
int save(Carousel carousel);
int deleteById(Integer id);
int update(Carousel carousel);
Carousel getById(Integer id);
List<Carousel> getAll();
}
```
4. 创建Mapper映射文件
CarouselMapper.xml
```xml
<mapper namespace="com.example.demo.mapper.CarouselMapper">
<insert id="save" parameterType="com.example.demo.entity.Carousel">
INSERT INTO `carousel` (`img_url`, `link_url`) VALUES (#{imgUrl}, #{linkUrl})
</insert>
<delete id="deleteById">
DELETE FROM `carousel` WHERE `id` = #{id}
</delete>
<update id="update" parameterType="com.example.demo.entity.Carousel">
UPDATE `carousel` SET `img_url` = #{imgUrl}, `link_url` = #{linkUrl} WHERE `id` = #{id}
</update>
<select id="getById" parameterType="int" resultType="com.example.demo.entity.Carousel">
SELECT * FROM `carousel` WHERE `id` = #{id}
</select>
<select id="getAll" resultType="com.example.demo.entity.Carousel">
SELECT * FROM `carousel`
</select>
</mapper>
```
5. 创建Service层
CarouselService.java
```java
@Service
public class CarouselService {
@Autowired
private CarouselMapper carouselMapper;
public int save(Carousel carousel) {
return carouselMapper.save(carousel);
}
public int deleteById(Integer id) {
return carouselMapper.deleteById(id);
}
public int update(Carousel carousel) {
return carouselMapper.update(carousel);
}
public Carousel getById(Integer id) {
return carouselMapper.getById(id);
}
public List<Carousel> getAll() {
return carouselMapper.getAll();
}
}
```
6. 创建Controller层
CarouselController.java
```java
@Controller
@RequestMapping("/carousel")
public class CarouselController {
@Autowired
private CarouselService carouselService;
@GetMapping("/list")
public String list(Model model) {
List<Carousel> carouselList = carouselService.getAll();
model.addAttribute("carouselList", carouselList);
return "carousel/list";
}
@GetMapping("/add")
public String add() {
return "carousel/add";
}
@PostMapping("/save")
public String save(Carousel carousel) {
carouselService.save(carousel);
return "redirect:/carousel/list";
}
@GetMapping("/edit/{id}")
public String edit(@PathVariable("id") Integer id, Model model) {
Carousel carousel = carouselService.getById(id);
model.addAttribute("carousel", carousel);
return "carousel/edit";
}
@PostMapping("/update")
public String update(Carousel carousel) {
carouselService.update(carousel);
return "redirect:/carousel/list";
}
@GetMapping("/delete/{id}")
public String delete(@PathVariable("id") Integer id) {
carouselService.deleteById(id);
return "redirect:/carousel/list";
}
}
```
7. 创建Thymeleaf视图
list.html
```html
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>轮播图列表</title>
</head>
<body>
<h1>轮播图列表</h1>
<table>
<thead>
<tr>
<th>ID</th>
<th>图片地址</th>
<th>链接地址</th>
<th>创建时间</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr th:each="carousel : ${carouselList}">
<td th:text="${carousel.id}"></td>
<td th:text="${carousel.imgUrl}"></td>
<td th:text="${carousel.linkUrl}"></td>
<td th:text="${carousel.createTime}"></td>
<td>
<a th:href="@{/carousel/edit/{id}(id=${carousel.id})}">编辑</a>
<a th:href="@{/carousel/delete/{id}(id=${carousel.id})}">删除</a>
</td>
</tr>
</tbody>
</table>
<a href="/carousel/add">添加轮播图</a>
</body>
</html>
```
add.html
```html
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>添加轮播图</title>
</head>
<body>
<h1>添加轮播图</h1>
<form method="post" th:action="@{/carousel/save}">
<div>
<label>图片地址:</label>
<input type="text" name="imgUrl" placeholder="请输入图片地址"/>
</div>
<div>
<label>链接地址:</label>
<input type="text" name="linkUrl" placeholder="请输入链接地址"/>
</div>
<div>
<button type="submit">提交</button>
</div>
</form>
<a href="/carousel/list">返回轮播图列表</a>
</body>
</html>
```
edit.html
```html
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>编辑轮播图</title>
</head>
<body>
<h1>编辑轮播图</h1>
<form method="post" th:action="@{/carousel/update}">
<input type="hidden" name="id" th:value="${carousel.id}"/>
<div>
<label>图片地址:</label>
<input type="text" name="imgUrl" th:value="${carousel.imgUrl}"/>
</div>
<div>
<label>链接地址:</label>
<input type="text" name="linkUrl" th:value="${carousel.linkUrl}"/>
</div>
<div>
<button type="submit">提交</button>
</div>
</form>
<a href="/carousel/list">返回轮播图列表</a>
</body>
</html>
```
以上是适用于Thymeleaf的后台轮播图管理功能的具体代码。
阅读全文