如果觉得有用的话,请留下一个赞吧!
😃
1.在数据库中创建book表,表字段如下
2.创建springboot工程导入相关坐标,在pom.xml中导入以下相关坐标
<dependencies>
<dependency>
<groupId>com.baomidou</groupId>
<artifactId>mybatis-plus-boot-starter</artifactId>
<version>3.4.2</version>
</dependency>
<dependency>
<groupId>org.projectlombok</groupId>
<artifactId>lombok</artifactId>
</dependency>
<dependency>
<groupId>cn.hutool</groupId>
<artifactId>hutool-all</artifactId>
<version>5.7.3</version>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<dependency>
<groupId>mysql</groupId>
<artifactId>mysql-connector-java</artifactId>
<scope>runtime</scope>
</dependency>
3.编写文件上传接口,在springboot工程中新建一个包名为Controller,在Controller里面新建文件类FileController
@RestController
@RequestMapping("/files")
public class FileController extends BaseController {
@Value("${server.port}")
private String port;
@Value("${file.ip}")
private String ip;
@PostMapping("/upload")
public Result<?> upload(MultipartFile file) throws IOException {
String originalFilename = file.getOriginalFilename();
String flag = IdUtil.fastSimpleUUID();
String rootFilePath = System.getProperty("user.dir") + "/files/" + flag + "_" + originalFilename;
File saveFile = new File(rootFilePath);
if (!saveFile.getParentFile().exists()) {
saveFile.getParentFile().mkdirs();
}
FileUtil.writeBytes(file.getBytes(), rootFilePath);
return Result.success("http://" + ip + ":" + port + "/files/" + flag);
}
}
@GetMapping("/{flag}")
public void getFiles(@PathVariable String flag, HttpServletResponse response) {
OutputStream os;
String basePath = System.getProperty("user.dir") + "/files/";
List<String> fileNames = FileUtil.listFileNames(basePath);
String fileName = fileNames.stream().filter(name -> name.contains(flag)).findAny().orElse("");
try {
if (StrUtil.isNotEmpty(fileName)) {
response.addHeader("Content-Disposition", "attachment;filename=" + URLEncoder.encode(fileName, "UTF-8"));
response.setContentType("application/octet-stream");
byte[] bytes = FileUtil.readBytes(basePath + fileName);
os = response.getOutputStream();
os.write(bytes);
os.flush();
os.close();
}
} catch (Exception e) {
System.out.println("文件下载失败");
}
}
4.后端BookController代码如下:
package com.example.demo.controller;
import cn.hutool.core.util.StrUtil;
import com.baomidou.mybatisplus.core.conditions.query.LambdaQueryWrapper;
import com.baomidou.mybatisplus.core.toolkit.Wrappers;
import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
import com.example.demo.common.Result;
import com.example.demo.entity.Book;
import com.example.demo.mapper.BookMapper;
import org.springframework.web.bind.annotation.*;
import javax.annotation.Resource;
import java.util.List;
import java.util.Vector;
@RestController
@RequestMapping("/book")
public class BookController extends BaseController{
@Resource
BookMapper bookMapper;
@PostMapping
public Result<?> save(@RequestBody Book Book) {
bookMapper.insert(Book);
return Result.success();
}
@PutMapping
public Result<?> update(@RequestBody Book Book) {
bookMapper.updateById(Book);
return Result.success();
}
@DeleteMapping("/{id}")
public Result<?> delete(@PathVariable Integer id) {
bookMapper.deleteById(id);
return Result.success();
}
@PostMapping("/deleteBatch")
public Result<?> deleteBatch(@RequestBody List<Integer> ids) {
bookMapper.deleteBatchIds(ids);
return Result.success();
}
@GetMapping("/{id}")
public Result<?> getById(@PathVariable Integer id) {
return Result.success(bookMapper.selectById(id));
}
@GetMapping("/{userId}")
public Result<?> getByUserId(@PathVariable Integer userId) {
return Result.success(bookMapper.findByUserId(userId));
}
@GetMapping
public Result<?> findPage(@RequestParam(defaultValue = "1") Integer pageNum,
@RequestParam(defaultValue = "10") Integer pageSize,
@RequestParam(defaultValue = "") String search) {
LambdaQueryWrapper<Book> wrapper = Wrappers.<Book>lambdaQuery();
if (StrUtil.isNotBlank(search)) {
wrapper.like(Book::getName, search);
}
Page<Book> BookPage = bookMapper.selectPage(new Page<>(pageNum, pageSize), wrapper);
return Result.success(BookPage);
}
}
5.前端vue文件Book.vue
<template>
<div style="padding: 10px">
<!-- 功能区域-->
<div style="margin: 10px 0">
<el-button type="primary" @click="add" v-if="user.role === 1">新增</el-button>
<el-popconfirm
v-if="user.role === 1"
title="确定删除吗?"
@confirm="deleteBatch"
>
<template #reference>
<el-button type="danger" >批量删除</el-button>
</template>
</el-popconfirm>
</div>
<!-- 搜索区域-->
<div style="margin: 10px 0">
<el-input v-model="search" placeholder="请输入关键字" style="width: 20%" clearable></el-input>
<el-button type="primary" style="margin-left: 5px" @click="load">查询</el-button>
</div>
<el-table
v-loading="loading"
:data="tableData"
border
stripe
style="width: 100%"
@selection-change="handleSelectionChange"
>
<el-table-column
type="selection"
width="55">
</el-table-column>
<el-table-column
prop="id"
label="ID"
sortable
>
</el-table-column>
<el-table-column
prop="name"
label="名称">
</el-table-column>
<el-table-column
prop="price"
label="单价">
</el-table-column>
<el-table-column
prop="author"
label="作者">
</el-table-column>
<el-table-column
prop="createTime"
label="出版时间">
</el-table-column>
<el-table-column
label="封面">
<template #default="scope">
<el-image
style="width: 100px; height: 100px"
:src="scope.row.cover"
:preview-src-list="[scope.row.cover]">
</el-image>
</template>
</el-table-column>
<el-table-column label="操作" width="240">
<template #default="scope">
<el-button type="primary" size="mini" @click="buy(scope.row.id)">购买</el-button>
<el-button size="mini" @click="handleEdit(scope.row)" v-if="user.role === 1">编辑</el-button>
<el-popconfirm title="确定删除吗?" @confirm="handleDelete(scope.row.id)" v-if="user.role === 1">
<template #reference>
<el-button size="mini" type="danger">删除</el-button>
</template>
</el-popconfirm>
</template>
</el-table-column>
</el-table>
<div style="margin: 10px 0">
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage"
:page-sizes="[5, 10, 20]"
:page-size="pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="total">
</el-pagination>
<el-dialog title="提示" v-model="dialogVisible" width="30%">
<el-form :model="form" label-width="120px">
<el-form-item label="名称">
<el-input v-model="form.name" style="width: 80%"></el-input>
</el-form-item>
<el-form-item label="价格">
<el-input v-model="form.price" style="width: 80%"></el-input>
</el-form-item>
<el-form-item label="作者">
<el-input v-model="form.author" style="width: 80%"></el-input>
</el-form-item>
<el-form-item label="出版时间">
<el-date-picker v-model="form.createTime" value-format="YYYY-MM-DD" type="date" style="width: 80%" clearable></el-date-picker>
</el-form-item>
<el-form-item label="封面">
<el-upload ref="upload" :action="filesUploadUrl" :on-success="filesUploadSuccess">
<el-button type="primary">点击上传</el-button>
</el-upload>
</el-form-item>
</el-form>
<template #footer>
<span class="dialog-footer">
<el-button @click="dialogVisible = false">取 消</el-button>
<el-button type="primary" @click="save">确 定</el-button>
</span>
</template>
</el-dialog>
</div>
</div>
</template>
<script>
import request from "@/utils/request";
export default {
name: 'Book',
components: {
},
data() {
return {
user: {},
loading: true,
form: {},
dialogVisible: false,
search: '',
currentPage: 1,
pageSize: 10,
total: 0,
tableData: [],
filesUploadUrl: "http://" + window.server.filesUploadUrl + ":9090/files/upload",
ids: []
}
},
created() {
let userStr = sessionStorage.getItem("user") || "{}"
this.user = JSON.parse(userStr)
request.get("/user/" + this.user.id).then(res => {
if (res.code === '0') {
this.user = res.data
}
})
this.load()
},
methods: {
buy(bookId) {
request.get("/order/buy/" + bookId).then(res => {
window.open(res.data)
})
},
deleteBatch() {
if (!this.ids.length) {
this.$message.warning("请选择数据!")
return
}
request.post("/book/deleteBatch", this.ids).then(res => {
if (res.code === '0') {
this.$message.success("批量删除成功")
this.load()
} else {
this.$message.error(res.msg)
}
})
},
handleSelectionChange(val) {
this.ids = val.map(v => v.id)
},
filesUploadSuccess(res) {
console.log(res)
this.form.cover = res.data
},
load() {
this.loading = true
request.get("/book", {
params: {
pageNum: this.currentPage,
pageSize: this.pageSize,
search: this.search
}
}).then(res => {
this.loading = false
this.tableData = res.data.records
this.total = res.data.total
})
},
add() {
this.dialogVisible = true
this.form = {}
if (this.$refs['upload']) {
this.$refs['upload'].clearFiles()
}
},
save() {
if (this.form.id) {
request.put("/book", this.form).then(res => {
console.log(res)
if (res.code === '0') {
this.$message({
type: "success",
message: "更新成功"
})
} else {
this.$message({
type: "error",
message: res.msg
})
}
this.load()
this.dialogVisible = false
})
} else {
request.post("/book", this.form).then(res => {
console.log(res)
if (res.code === '0') {
this.$message({
type: "success",
message: "新增成功"
})
} else {
this.$message({
type: "error",
message: res.msg
})
}
this.load()
this.dialogVisible = false
})
}
},
handleEdit(row) {
this.form = JSON.parse(JSON.stringify(row))
this.dialogVisible = true
this.$nextTick(() => {
if (this.$refs['upload']) {
this.$refs['upload'].clearFiles()
}
})
},
handleDelete(id) {
console.log(id)
request.delete("/book/" + id).then(res => {
if (res.code === '0') {
this.$message({
type: "success",
message: "删除成功"
})
} else {
this.$message({
type: "error",
message: res.msg
})
}
this.load()
})
},
handleSizeChange(pageSize) {
this.pageSize = pageSize
this.load()
},
handleCurrentChange(pageNum) {
this.currentPage = pageNum
this.load()
}
}
}
</script>