springboot+vue+myabtis-plusl以表格形式显示书籍id对应的照片的具体代码
时间: 2023-12-31 09:04:01 浏览: 149
以下是示例代码,仅供参考:
1. 创建书籍实体类
```java
import com.baomidou.mybatisplus.annotation.TableName;
import lombok.Data;
@Data
@TableName(value = "book")
public class Book {
private Long id;
private String name;
private byte[] cover;
}
```
2. 创建书籍Mapper接口
```java
import com.baomidou.mybatisplus.core.mapper.BaseMapper;
import com.example.demo.entity.Book;
import org.apache.ibatis.annotations.Mapper;
import java.util.List;
@Mapper
public interface BookMapper extends BaseMapper<Book> {
List<Book> selectBookList();
}
```
3. 创建RESTful API
```java
import com.example.demo.entity.Book;
import com.example.demo.mapper.BookMapper;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;
import java.util.List;
@RestController
public class BookController {
@Autowired
private BookMapper bookMapper;
@GetMapping("/book/list")
public List<Book> getBookList() {
return bookMapper.selectBookList();
}
}
```
4. 在Vue中使用axios获取书籍列表数据,并在表格中展示
```vue
<template>
<div>
<el-table :data="bookList">
<el-table-column prop="id" label="ID"></el-table-column>
<el-table-column prop="name" label="书籍名称"></el-table-column>
<el-table-column label="书籍封面">
<template slot-scope="scope">
<img :src="scope.row.cover">
</template>
</el-table-column>
</el-table>
</div>
</template>
<script>
import axios from 'axios'
export default {
data() {
return {
bookList: []
}
},
mounted() {
axios.get('/book/list').then(response => {
this.bookList = response.data
})
}
}
</script>
```
5. 在CSS中为表格和图片添加样式
```css
.el-table {
width: 100%;
margin-bottom: 20px;
border: none;
}
.el-table th, .el-table td {
padding: 10px;
text-align: center;
vertical-align: middle;
border: none;
}
.el-table th {
background-color: #f5f7fa;
font-weight: bold;
}
.el-table img {
max-width: 100%;
max-height: 100%;
}
```
请注意,以上代码仅为示例代码,具体实现细节需要根据你的具体需求和技术栈进行调整。
阅读全文